jQuery:查找文本并替换为HTML

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

尝试使用以下内容：

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

如果那是你的问题。否则，请澄清一下，究竟是什么没有按预期工作？