7

特定の要素のすべての子孫要素（のテキスト）内の特定の文字列を置き換えたいと思います。

innerHTMLこのシーケンスは属性に表示される可能性があるため、使用できません。XPathを使用してみましたが、インターフェイスは基本的に読み取り専用のようです。これは1つの要素に制限されているため、のような関数document.getElementsByTagNameも使用できません。

これを行う方法を提案できますか？jQueryまたは純粋なDOMメソッドはすべて受け入れられます。

編集：

いくつかの答えは、私が回避しようとしていた問題を示唆しています。要素でテキストを直接変更すると、テキスト以外のすべての子ノードが削除されます。

したがって、問題は基本的に、ツリー内のすべてのテキストノードを効率的に選択する方法にあります。XPathでは、として簡単に行うことができます//text()が、現在のXPathインターフェイスでは、これらのテキストノードを変更することはできません。

これを行う1つの方法は、Bergiの回答に示されているように再帰を使用することです。別の方法はjQueryのセレクターを使用することfind('*')ですが、これは少し高価です。より良い解決策があるかどうかをまだ待っています。

4

4 に答える 4

4

すべてのノードを再帰的に巡回する単純な自作の DOM イテレータを使用するだけです。

(function iterate_node(node) {
    if (node.nodeType === 3) { // Node.TEXT_NODE
        var text = node.data.replace(/any regular expression/g, "any replacement");
        if (text != node.data) // there's a Safari bug
            node.data = text;
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (var i = 0; i < node.childNodes.length; i++) {
            iterate_node(node.childNodes[i]); // run recursive on DOM
        }
    }
})(content); // any dom node
于 2012-07-17T16:13:26.463 に答える
1

解決策は、使用可能なすべてのノード（TextNodeを含む）をサーフィンして、結果に正規表現パターンを適用することです。TextNodesも取得するには、jQuerysを呼び出す必要があります.contents()。例えば：

var search = "foo",
    replaceWith = 'bar',
    pattern = new RegExp( search, 'g' );


function searchReplace( root ) {
    $( root ).contents().each(function _repl( _, node ) {
        if( node.nodeType === 3 )
            node.nodeValue = node.nodeValue.replace( pattern, replaceWith );
        else searchReplace( node );
    });
}

$('#apply').on('click', function() {
    searchReplace( document.getElementById('rootNode') );
});

例： http： //jsfiddle.net/h8Rxu/3/

参照：.contents()

于 2012-07-17T15:48:46.960 に答える
0

申し訳ありませんが、自分で取得しました：

$('#id').find('*').each(function(){
    $.each(this.childNodes, function() {
        if (this.nodeType === 3) {
            this.data = this.data.toUpperCase();
        }
    })
})

ここでは結果をより明確にするために toUpperCase() を使用しましたが、ここではすべての String 操作が有効です。

于 2012-07-17T15:40:57.070 に答える
0

jQuery の使用:

$('#parent').children().each(function () {
    var that = $(this);

    that.text(that.text().replace('test', 'foo'));
});

直接の子だけでなく、すべての子を検索したい場合は、.find()代わりに を使用します。

http://jsfiddle.net/ExwDx/

編集: children、each、text、およびfindのドキュメント。

于 2012-07-17T15:41:29.233 に答える