替换元素中字符串的所有位置

Replace all the ocurrance of a string in an element

本文关键字：位置 字符串 元素 替换      更新时间：2023-10-13

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

不能使用innerHTML，因为此序列可以出现在属性中。我已经尝试过使用XPath，但是这个接口基本上是只读的。因为这仅限于一个元素，所以像document.getElementsByTagName这样的函数也不能使用。

有什么建议可以做这件事吗？任何jQuery或纯DOM方法都是可以接受的。

编辑：

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

因此，问题本质上归结为如何有效地选择树中的所有Text节点。在XPath中，您可以很容易地将其作为//text()，但当前的XPath接口似乎不允许您更改这些Text节点。

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

只需使用一个简单的自制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

解决方案可能是浏览所有可用节点（包括TextNodes），并对结果应用regexp模式。为了获取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()

使用jQuery:

$('#parent').children().each(function () {
    var that = $(this);
    that.text(that.text().replace('test', 'foo'));
});

如果您希望搜索所有子项而不是仅搜索直系子项，请改用.find()。

http://jsfiddle.net/ExwDx/

编辑：用于子项、每个、文本和查找的文档。

对不起，我自己刚刚拿到：

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

我曾经在这里使用UpperCase（）来使结果更加明显，但任何String操作在那里都是有效的。

相关文章：