インタープリタパターンを使用して、要素のXPathパスを取得するためのアルゴリズムを実装します。

インタープリタパターンを使用して、要素のXPathパスを取得するためのアルゴリズムを実装します。

[[432233]]

文章

1. 通訳モード

言語に対して、その文法表現（言語のルールを定義するために使用される、言語内の文法記述ツール）を与え、その言語で定義された文を解釈するインタープリタを定義します。

定義は抽象的に聞こえるかもしれません。たとえば、一般的な Web サイトで多言語を実装する場合、まず言語の種類を決定し、さまざまな言語のコーパスを事前に設計する必要があります。次に、構成と統一された変数ルールに基づいて、それらをさまざまな言語にマッピングします。

2. 要素のXpathパス

XPath は、XML ドキュメント内の要素と属性を移動するために使用されます。 XPath は XML ノードの検索に使用されますが、HTML と XML は構造が似ているため、HTML ドキュメント内のノードの検索にも使用できます。ここでは HTML、つまり HTML ページ内で要素が配置されているパスのみを考慮します。

では、要素の Xpath パスを素早く取得するにはどうすればよいでしょうか。実はとても簡単です。Google デバッグ ツールを開いてみましょう。

要素の XPath パスをコピーするには、[XPath のコピー] を選択します。形式は次のようになります。

  1.  //*[@id= "juejin" ]/div[2]/main/div/div[1]/article/div[1]

要素の Xpath パスを取得するアプリケーション シナリオは多数あります。たとえば、よく使用する Python クローラーは、クローラー フレームワークを使用して、Xpath パスを介してページ内の dom ノードを簡単に制御し、目的のデータと要素を取得できます。たとえば、要素の Xpath パスをバックエンドに送信すると、バックエンドは特定の機能の使用状況とインタラクション データをカウントできます。たとえば、Web サイトを閲覧しているユーザーの熱分布マップ、パス ポートレートなどを分析できます。

3.jsは要素のXpathパスの取得を実装します

実装する前に、まず Xpath パスの構造を分析してみましょう。たとえば、ページがある場合、要素 span の構造は次のようになります。

  1.  <!DOCTYPE html>
  2.  <html lang= "ja" >
  3.  <ヘッド>
  4.  <メタ文字セット= "UTF-8" >
  5.  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  6.  <meta http-equiv= "X-UA-compatible" content= "ie=edge" >
  7.  <title>ドキュメント</title>
  8.  </head>
  9.  <本文>
  10.  <div>
  11.  <span>私は徐小曦です</span>
  12.  </div>
  13.  </本文>
  14.  </html>

その場合、Xpath パスは次のようになります。

  1.  HTML/BODY|HEAD/DIV/SPAN

上記からわかるように、右端の要素がターゲット要素であり、左端の最初の要素が最も外側のコンテナーです。このプロセスを完了するには、まず、要素の parentNode を介して現在の要素の親要素を取得し、最上位の位置を見つける必要があります。ただし、前のレイヤーを見つけるたびに、その要素の前の兄弟要素もトラバースする必要があることにも注意する必要があります。この兄弟要素の名前がその後ろの要素の名前と同じ場合は、要素名に 1 を追加します。

最初のステップは、同じレベルの兄弟要素を走査するメソッド getSameLevelName を実装することです。

  1.  // 兄弟要素の名前を取得する
  2. 関数getSameLevelName(ノード){
  3.     // 兄弟要素がある場合
  4.     if(node.previousSibling) {
  5.         let name = '' , // 返される兄弟要素名の文字列
  6. count = 1, // 隣接する兄弟要素内の同じ名前を持つ要素の数
  7.            ノード名 = ノード.ノード名、
  8.            兄弟 = node.previousSibling;
  9.         while(兄弟){
  10.             if(sibling.nodeType == 1 && sibling.nodeType === node.nodeType && sibling.nodeName){
  11.                 if(nodeName == 兄弟.nodeName){
  12. 名前+= ++カウント;
  13.                 }それ以外{
  14.                     // 同じ隣接ノード名を持つノードの数を再作成します
  15. カウント= 1;
  16.                     // 新しいノード名を追加
  17. 名前+= '|' + 兄弟ノード名.toUpperCase()
  18.                 }
  19.             }
  20.             兄弟 = 兄弟.前の兄弟;
  21.         }
  22. 戻る 名前 
  23.     }それ以外{
  24.         // 兄弟要素がない場合は''を返します 
  25. 戻る  ''  
  26.     }
  27.  }

2 番目のステップは、ドキュメント ツリーをトラバースすることです。

  1.  // XPathインタープリタ
  2. インタープリタ = (関数() {
  3. 戻る 関数(ノード、ラップ){
  4.  // パス配列
  5. パス = [] とします。
  6.  // コンテナノードがない場合、デフォルトはドキュメントです
  7. wrap = wrap || ドキュメント;
  8.  // 現在のノードがコンテナノードと等しい場合
  9. if(node ​​=== wrap) {
  10. ラップノードタイプ == 1 の場合
  11. パスをプッシュします(wrap.nodeName.toUpperCase())
  12.  }
  13. 戻り経路
  14. }
  15.  // 現在のノードの親ノードがコンテナノードと等しくない場合
  16. if(node.parentNode !== wrap){
  17.  // 現在のノードの親ノードに対してトラバーサル操作を実行します
  18. パス = arguments.callee(node.parentNode, wrap)
  19.  }
  20.  // 現在のノードの親要素ノードがコンテナノードと同じ場合
  21. それ以外{
  22.  wrap.nodeType == 1 && path.push(wrap.nodeName.toUpperCase())
  23.  }
  24.  // 要素の兄弟要素の名前統計を取得します
  25. 兄弟の名前を getSameLevelName(ノード) にします。
  26. ノードのノードタイプが1の場合
  27. path.push(node.nodeName.toUpperCase() + サブリング名)
  28.  }
  29.  // 最終的なパス配列の結果を返す
  30. 戻り経路
  31. }
  32.  })()

これら 2 つの方法を使用すると、要素の XPath パスを簡単に取得できます。次に例を示します。

  1.  path = Interpreter(document.querySelector( 'span' ))とします。
  2.  console.log(パス.join ( '/' ))

これは、開始と同じデータ構造を返します。例: HTML/BODY|HEAD/DIV/SPAN

<<:  10の古典的なソートアルゴリズム

>>:  人工知能の時代においても、人間同士の交流は依然として重要である

ブログ    
ブログ    
ブログ    

推薦する

Google ナレッジグラフ プロダクト マネージャーへのインタビュー: 探検するために生まれた

Google は最近、検索ページの新しい機能である Google ナレッジグラフをリリースしました。...

AI 異常検出は企業にどのようなメリットをもたらすのでしょうか?

翻訳者 |陳俊レビュー | Chonglou異常検出は、企業が競合他社よりも先に今後のトレンドを特定...

LeCun はそれを見て良かったと言っていました! Meta AI は音声、視覚、テキストで同時に SOTA を達成

人間の知能は「マルチモーダル学習」の総体であり、分類の境界を越えてさまざまな情報源や形式からの情報と...

ランダム フォレスト分類アルゴリズムを使用して Iris データ分類をトレーニングするとどうなるでしょうか?

[[205745]] MLlib は、機械学習のエンジニアリング実践を簡素化し、大規模への拡張を容...

...

72歳の男性がコーラを飲みながら脳で麻雀をする：これはすべて脳コンピューターインターフェース技術のおかげです

浙江省メディアの報道によると、現在浙江大学医学部第二付属病院で治療を受けている72歳の張さんは、意識...

...

モバイルアプリ開発における人工知能の実装

[[382351]] [51CTO.com クイック翻訳] 人々が今日のニーズについて話すとき、彼ら...

2020年、アルゴリズムの話題が主流になる年

[[397576]]システムに閉じ込められた配達員から人々が飽きることのないソーシャルメディアまで、...

データマイニング分野のトップ10の古典的なアルゴリズムの1つであるC4.5アルゴリズム（超詳細なコード付き）

古典的なデータマイニングアルゴリズムのトップ 10 は次のとおりです。導入C4.5 は決定木アルゴリ...

MetaMindによるNLP研究の徹底分析：機械学習をスキップさせる方法

自然言語処理は、人工知能研究における中心的な課題の 1 つです。最近、Salesforceによる買収...

COVID-19パンデミックの影響を受けて、世界のエッジAIソフトウェア市場は急速な発展を遂げている

MarketsandMarkets は、エッジ AI ソフトウェア市場が 2019 年から 2021...

...

2019年の中国人工知能産業の競争環境の分析

近年、人工知能の技術と応用は成熟を続けており、人工知能市場の規模は徐々に拡大しています。中国情報通信...

Googleが独自のAIチップを開発することを選択した6つの理由

[51CTO.com クイック翻訳] 長い間、Google などのクラウドベンダーは、自社のデータセ...