7

我想替换给定元素的所有后代元素（的文本）中的特定字符串。

innerHTML不能使用，因为此序列可以出现在属性中。我曾尝试使用 XPath，但似乎界面本质上是只读的。因为这仅限于一个元素，document.getElementsByTagName所以也不能使用类似的功能。

有人可以建议任何方法吗？任何 jQuery 或纯 DOM 方法都是可以接受的。

编辑：

一些答案暗示了我试图解决的问题：直接在元素上修改文本将导致所有非文本子节点被删除。

所以问题本质上归结为如何有效地选择树中的所有文本节点。在 XPath 中，您可以轻松地做到这一点//text()，但当前的 XPath 界面似乎不允许您更改这些 Text 节点。

一种方法是通过递归，如Bergi的回答所示。另一种方法是使用find('*')jQuery 的选择器，但是这样有点贵。仍在等待，看看是否有更好的解决方案。

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

一种解决方案可能是浏览所有可用节点（包括 TextNodes）并在结果上应用正则表达式模式。要同时获取 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 回答