2

ページ上のこのhtmlを想像してください

<div id="hpl_content_wrap">
<p class="foobar">this is one word and then another word comes in foobar and then more words and then foobar again.</p>
<p>this is a <a href="http://foobar.com" data-bitly-type="bitly_hover_card">link with foobar in an attribute</a> but only the foobar inside of the link should be replaced.</p>
</div>

javascriptを使用して、htmlタグ内を変更せずにすべての「foobar」の単語を「herpderp」に変更するにはどうすればよいですか？

すなわち。プレーンテキストのみを変更する必要があります。

したがって、変更された成功したhtmlは

<div id="hpl_content_wrap">
<p class="foobar">this is one word and then another word comes in herpderp and then more words and then herpderp again.</p>
<p>this is a <a href="http://foobar.com" data-bitly-type="bitly_hover_card">link with herpderp in an attribute</a> but only the herpderp inside of the link should be replaced.    </p>
</div>
4

2 に答える 2

1

これがあなたがする必要があることです...

  1. 一連の要素への参照を取得します。
  2. テキストノードのテキストのみを置き換えて、子を再帰的にウォークします。

遅れて申し訳ありませんが、コードを追加する前に私は脇道に追いやられました。

var replaceText = function me(parentNode, find, replace) {
    var children = parentNode.childNodes;

    for (var i = 0, length = children.length; i < length; i++) {
        if (children[i].nodeType == 1) {
            me(children[i], find, replace);            
        } else if (children[i].nodeType == 3) {
            children[i].data = children[i].data.replace(find, replace);
        }

    }

    return parentNode;

}

replaceText(document.body, /foobar/g, "herpderp");​​​

jsFiddle。

于 2012-06-08T04:46:32.910 に答える
0

それは簡単なことです：

  • DOMツリー内のすべてのテキストノードを識別し、
  • 次に、その中のすべてのfoobar文字列を置き換えます。

完全なコードは次のとおりです。

// from: https://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery
var getTextNodesIn = function (el) {
    return $(el).find(":not(iframe)").andSelf().contents().filter(function() {
        return this.nodeType == 3;
    });
};

var replaceAllText = function (pattern, replacement, root) {
    var nodes = getTextNodesIn(root || $('body'))
    var re    = new RegExp(pattern, 'g')

    nodes.each(function (i, e) {
        if (e.textContent && e.textContent.indexOf(pattern) != -1) {
           e.textContent = e.textContent.replace(re, replacement);
        }
    });
};


// replace all text nodes in document's body
replaceAllText('foobar', 'herpderp');

// replace all text nodes under element with ID 'someRootElement'
replaceAllText('foobar', 'herpderp', $('#someRootElement'));

正規表現でクレイジーな長い文字列を処理しないように、foobarで事前チェ​​ックを行うことに注意してください。良い考えかもしれないし、そうでないかもしれない。

jQueryを使用せず、純粋なJavaScriptのみを使用する場合は、コードスニペット（jQueryでテキストノードを選択するにはどうすればよいですか？）のリンクをたどってください。ここには、ノードをフェッチするためのJSのみのバージョンもあります。次に、同様の方法で、返された要素を単純に繰り返します。

于 2012-06-08T04:47:57.357 に答える