Question

对于真正的垃圾标题感到抱歉，很难解释。简化版......我有以下标记：

<a href="http://www.someurl.com/product/collection"><span class="collection">View</span> this collection today.</a>

现在，我想要最终得到的是以下内容：

<a href="http://www.someurl.com/product/collection"><span class="collection">View</span> this <span class="someClass">collection</span> today.</a>

我可以通过以下方式做到这一点：

var $el = $('a');
var newHTML = $el.html().replace(/collection/g, '<span class="someClass">collection</span>');
$el.html(newHTML);

问题是，我们最终得到：

<a href="http://www.someurl.com/product/collection"><span class="<span class="someClass">collection</span>">View</span> this <span class="someClass">collection</span> today.</a>

这显然不是我想要的......我是否正在谈论这个关于脸的屁股？我应该以不同的方式做这件事吗？

这是一个非常简单的例子，这个词可能不是“集合”，可能会在元素文本中多次出现。我也试过使用$ .text（）但是span标签会像你期望的那样被转义，并显示为文本“集合”。

我错过了什么？

编辑：

我编辑了这些例子，因为它们完全错了，而不是我所要求的！遗憾！

Answer 1

尝试：

$('a:contains(collection)').html(function() {
    return $(this).html().replace('collection', '<span class="someClass">collection</span>');
});

<强> jsFiddle example

生成的HTML是：

<a href="http://www.someurl.com/product/collection">View this <span class="someClass">collection</span> today.</a>

如果您想多次替换单词集合，请将替换行更改为：

.replace(/collection/g, '<span class="someClass">collection</span>')

将innerText包装在HTML标记中，而不会影响其他innerHTML中的任何内容

1 个答案: