javascript - jQuery:查找文本并替换为 HTML

Question

我尝试查找和替换文本(使用 jQuery)。实际上我正在尝试在文本周围添加一个 span 元素。我还应该能够再次删除 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 是一个字符串，其中包含要环绕 span 的文本。

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);

编辑:上面代码中的一个小故障，请参阅此 fiddle 中的固定代码:http://jsfiddle.net/thePav/7TNk6/21/