Question

我尝试查找和替换文本（使用jQuery）。实际上我正在尝试在文本周围添加span元素。我也应该能够再次移除跨度而不会丢失内部文本。

例如，假设我有以下情况：

<span>This is a span element</span>

我希望能够使用jQuery / JavaScript动态执行此操作：

<span>This is a <span class="marked">span</span> element</span>

我也应该能够删除span.marked并返回第一个结果。

然而问题是我想在具有多个子节点和子节点的容器内的所有文本上执行此操作，等等。

到目前为止我得到的代码将执行以下操作，这不是我想要的：

<<span class="marked">span</span>>This is a <span class="marked">span</<span class="marked">span</span> element</span>

我想对页面上的所有文本执行此操作，而不仅仅是找到的第一个文本。

编辑：到目前为止，我的代码是这样做的：

var re = new RegExp(word, 'g');
$('.container').html($('.container').html().replace(re, '<span class="marked">' + word + '</span>'));

word是一个字符串，其中包含用于包围的文本。

Answer 1

要在html中包装搜索字符串，您可以使用以下内容：

$('span:contains("word")').html().replace('word', '<span class="marked">word</span>');

要删除它，您可以使用以下内容：

$('span:contains("word")').html().replace('<span class="marked">word</span>', 'word');

是的，这是一种相当粗暴的方式，但它应该有用。

修改正如@ user3558931指出的那样，这个词必须是一个变量。

要在html中包装搜索字符串，您可以使用以下内容：

$('span:contains("' + str + '")').html().replace(str, '<span class="marked">' + str + '</span>');

要删除它，您可以使用以下内容：

$('span:contains("' + str + '")').html().replace('<span class="marked">' + str + '</span>', str);

修改上面代码中的一个小故障，请参阅此小提琴中的固定代码：http://jsfiddle.net/thePav/7TNk6/21/

Answer 2

$('.container p').each(function() {
    var text = $(this).text();
    $(this).html(text.replace('word', '<strong><span class="accordion">word </span></strong>')); 
});

Answer 3

不要使用正则表达式。使用DOM遍历，这将更可靠，更快速，破坏性更小（例如，事件处理程序不会被破坏）。

有关简单示例，请参阅https://stackoverflow.com/a/10618517/96100。

或者，您可以使用以下内容：

http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/

这并不包括事后删除跨度，但这是一个相当简单的事情。类似于以下内容（未经测试）：

function replaceWithOwnChildren(el){
    var parent = el.parentNode;
    while (el.hasChildNodes()) {
        parent.insertBefore(el.firstChild, el);
    }
    parent.removeChild(el);
}

// Create a non-live standard array of spans
var spans = [].slice.call(document.getElementsByTagName("span"), 0);
for (var i = 0, len = spans.length; i < len; ++i) {
    if (spans[i].className == "marked") {
        replaceWithOwnChildren(spans[i]);
    }
}

// Glue together any adjacent text nodes
document.normalize();

Answer 4

我认为需要调整正则表达式，因此它不会选择<span或任何其他HTML标记。我想建议RegExp：

var re = new RegExp('[^<\\/](' + word + ')', 'g');

替换：

$('.container').each(function() {
    $(this).html( $(this).html().replace( re, ' <span class="marked">$1</span>' ) );
});

可以通过使用代码（下面演示中的点击按钮）来反转：

$('button.undo').on( 'click', function() {
    $('.container').find( 'span.marked' ).each(function() {
        $(this).replaceWith( word );
    });
});

JS FIDDLE DEMO

OTHER DEMO

Answer 5

尝试使用以下内容：

$('.container').forEach(function(){ 
    $(this).html().... 
})

如果那是你的问题。否则，请澄清，究竟什么不能正常工作？

Answer 6

var span = document.getElementsByTagName("span")[0];
span.innerHTML = span.innerHTML.replace(/span/g, "<span class=\"marked\">span</span>");

http://jsfiddle.net/7TNk6/1/

Answer 7

var mark = function(word){
    return function(){
        this.innerHTML = this.innerHTML.replace(word,'' + word + '');
    }
};
$('span').each(mark('span'));

jQuery：查找文本并替换为HTML

7 个答案: