0

HTML ページを別の形式に変換する Chrome 拡張機能を作成しています。

document.getElementsByTagName("*")そのコレクションを繰り返し使用すると、すべてのタグを確認できます。ただし、それはフラットな表現です。翻訳された出力が適切な包含/ネストを維持するように、SAX パーサーのように開始および終了の「イベント」を検出する必要があります。

JavaScriptでこれを行う正しい方法は何ですか? これを手動で行わなければならないのは少し厄介なようです。これを行う他の方法はありますか？

私が何を意味するかを説明するために...

   <html>
       <body>
           <h1>Header</h1>
           <div>
               <p>some text and a missing closing tag
               <p>some more text</p>
           </div>
           <p>some more dirty HTML
        </body>
    <html>

次の順序でイベントを取得する必要があります。

    html open
    body open
    h1 open
    text
    h1 close
    div open
    p open
    text
    p close
    p open
    text
    p close
    div close
    p open
    text
    p close
    body close
    html close

反復の一環として、SAX パーサーのようなイベントを追跡するのは自分次第だと感じています。他に利用できるオプションはありますか? そうでない場合は、サンプル コードを教えてもらえますか?

ありがとう！

4

2 に答える 2

2

各ノードと各ノードのすべての子をトラバースするだけです。子のレベルが使い果たされると、タグは閉じられます。

function parseChildren(node) {

    // if this a text node, it has no children or open/close tags
    if(node.nodeType == 3) {
        console.log("text");
        return;
    }

    console.log(node.tagName.toLowerCase() + " open");

    // parse the child nodes of this node
    for(var i = 0; i < node.childNodes.length; ++i) {
        parseChildren(node.childNodes[i]);
    }

    // all the children are used up, so this tag is done
    console.log(node.tagName.toLowerCase() + " close");
}

ページ全体をトラバースするには、単にparseChildren(document.documentFragment). console.logステートメントは、好きな動作に置き換えることができます。

タグ間の空白がテキスト ノードとしてカウントされるため、このコードは多くのtextノードをレポートすることに注意してください。これを回避するには、テキスト処理コードを展開します。

    if(node.nodeType == 3) {
        // if this node is all whitespace, don't report it
        if(node.data.replace(/\s/g,'') == '') { return; }

        // otherwise, report it
        console.log("text");
        return;
    }
于 2012-08-18T01:19:51.370 に答える
0

そのためのツールがあるとは思わないので、何らかの方法で 、 、などget first childをget next node行う再帰関数を作成する必要があります。get parent

于 2012-08-18T01:08:59.910 に答える