1

私は何をする必要がありますか

HTMLページの本文にjavascriptを含むiframeを表示します。そのようなものでdocument.write('<iframe ...></iframe'>);

このiframeには、親ドキュメントの本文でキーワードを検索し、親ドキュメントのhtmlリンク<a href="#">keyword</a>に置き換えるjavascript関数があります。

私が試したこと

スクリプトがドキュメント内にあるが、親ドキュメントを操作するためのiframe内にはない場合、これらは魅力のように機能しました。

私の問題/質問

  1. 問題は、「キーワード」が「解釈されていない」htmlにテキストとして置き換えられることです。（ブラウザが表示されます<a href="#">keyword</a>）。
  2. 私の2番目の質問は、一致するすべての式ではなく、1回だけ置換を行う方法です。

通常、私はいくつかのjQueryを使用しますが、このプロジェクトでは、ライブラリなしでいくつかのjavascriptのみを使用する必要があります。

私を助けるためのアイデアはありますか？（私は誰にも「自分のコードを書いて」ほしくない、ただ自分でそれを作るためのアドバイスが欲しいだけだ）

PS 1：Chromeを使用していますが、すべてのブラウザで動作するようにしたいと思います。

PS 2：英語は私の母国語ではないので、何かわからないことがあれば、遠慮なく私に聞いてください。もっとよく説明しようと思います。

編集2

最初のスクリプトがHTMLで機能するようになったため、質問1は解決されましたが、キーワードが数回繰り返された場合でも、置換を1回だけ行うにはどうすればよいですか？（質問2）

4

1 に答える 1

0

xiaoyiの助けを借りて、いくつかの解決策を見つけました。

  • ループを停止し、最初の一致のみを置き換えます
  • 複数のキーワードを検索/置換する機能のグローバル化

最適化できると思いますが、私にとっては魅力のように機能し、誰かに役立つ場合は共有します（ドキュメントのターゲット、ここでは「親」を変更することを忘れないでください）：

(function(){
    // don't replace text within these tags
    var skipTags = { 'a': 1, 'style': 1, 'script': 1, 'iframe': 1, 'meta':1, 'title':1, 'img':1, 'h':1 };
    // find text nodes to apply replFn to
    function findKW( el, term, replFn ) 
    {
        var child, tag,found=false;
        for (var i = 0;i<=el.childNodes.length - 1 && !found; i++)
        {
            child = el.childNodes[i];
            if (child.nodeType == 1) 
            { // ELEMENT_NODE
                tag = child.nodeName.toLowerCase();
                if (!(tag in skipTags)) 
                {
                    findKW(child, term, replFn);
                }
            } 
            else if (child.nodeType == 3) 
            { // TEXT_NODE
                found=replaceKW(child, term, replFn); // if found=true, we stop the loop
            }
        }
     }; 
    // replace terms in text according to replFn
    function replaceKW( text, term, replFn) 
    {
        var match,
            matches = [],found=false;
        while (match = term.exec(text.data)) 
        {
            matches.push(match);
        }
        for (var i = 0;i<=matches.length - 1 && !found; i++)
        {           
            match = matches[i];         
            // cut out the text node to replace
            text.splitText(match.index);
            text.nextSibling.splitText(match[1].length);
            text.parentNode.replaceChild(replFn(match[1]), text.nextSibling);
            if(matches[i])found=true;// To stop the loop            
        }
        return found;
    };
    // First search/replace
    var replTerm = 'keyword';
    findKW(
        parent.document.body, 
        new RegExp('\\b(' + replTerm + ')\\b', 'gi'),
        function (match) 
        {
          var link = parent.document.createElement('a');
          link.href = 'http://www.okisurf.com/#q=' + replTerm;
          link.target = '_blank';
          link.innerHTML = match;
          return link;
        }
    );
    // A second search/replace
    var replTerm = 'word';
    findKW(
        parent.document.body, 
        new RegExp('\\b(' + replTerm + ')\\b', 'gi'),
        function (match) 
        {
          var link = parent.document.createElement('a');
          link.href = 'http://www.okisurf.com/#q=' + replTerm;
          link.target = '_blank';
          link.innerHTML = match;
          return link;
        }
    );
    // Other search/replace
    // ...
}());

createTreeWalker()また、2 番目の解決策は、 DOM 機能を受け入れない Internet Explorer ウィッチでは機能しないことも発見しました。

于 2012-11-20T15:25:00.290 に答える