インタープリタパターンを使用して、要素の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 mBERT の秘密を解明: ディープラーニングは人間の言語をどのように処理するのか?

[[384615]]言語機能を備えたディープラーニングシステムは、人々の生活の中で広く利用されてき...

人工知能が伝統文化に新たな命を吹き込む。パンダ型ロボット「Youyou」が国境を越えて「新年クロストーク会議」に参加

「パンダはトークができる、パンダはジョークを言うことができる、パンダは書道を書ける、そしてパンダはチ...

自然言語処理の他に、Word2Vec で何ができるのでしょうか?

機械学習の手法を使用して問題を解決する場合、適切なデータを持つことが重要です。残念ながら、生データは...

人工知能への恐怖とその対処法5つ

AI テクノロジーを導入する IT リーダーは、ある程度の不安を感じるかもしれませんが、それには十分...

Tantan Pan Ying: アルゴリズムベースの「額面」ソーシャル プラットフォームを作成する方法

編集者注: 「女性が風邪をひかずに舞台を降りられるのは素晴らしいことだ。そして、心が情熱で満たされる...

AIガバナンスがリスクを軽減しながら利益を獲得する方法

[[389556]] AI ガバナンスは、データ プライバシー、アルゴリズムのバイアス、コンプライア...

中国初の真のAI入力方式が発表され、未来の入力方式を革新する

入力がキーボードに別れを告げ、音声、表現、動作が入力方法になると、どのような魔法のような体験になるの...

...

マーケティングにおける AI についての考え方を変える 10 のグラフ

Adobe の最新の Digital Intelligence Briefing によると、トップク...

...

大規模言語モデルを導入し、国内初のコンピューティングパワーエコシステムをサポートする新しいオープンソースRLフレームワークRLLTEが登場

近年、強化学習に対する研究熱は高まり続けており、インテリジェント製造、自動運転、大規模言語モデルなど...

我が国の人工知能市場の規模は2022年に3705億元に達すると推定されている。

人工知能は、機械を通じて人間の思考と意思決定をシミュレートすることに重点を置いたコンピューターサイエ...

ライブチャットとチャットボット: どちらの顧客サービス方法が優れているのでしょうか?

[[267030]] [51CTO.com クイック翻訳] ビジネスの世界は大きな変化を遂げてきま...

アダムとイブ: ディープラーニングの問題を解決するための強力なツール

[[242433]] [51CTO.com クイック翻訳] 近年、ディープラーニングの波がインターネ...

庚子の年に流行したAIアプリのレビュー

2020年にはAIがより広く活用されるようになるでしょう。最先端の新興産業を開拓すると同時に、伝統的...