Question

我有一些javascript代码用span标记替换某些单词，用tinyMCE元素中的背景颜色突出显示它们：

var oldContent = 'some sample text',
    newContent = oldContent.replace(/sample|text/g, '<span style="background-color: #ddd;">$&</span>');

问题是文本需要在用户输入时进行更新，因此每次击键都会反复替换这些单词，结果如下：

<span style="background-color: #ddd;"><span style="background-color: #ddd;"><span style="background-color: #ddd;">sample</span></span></span>

有没有办法忽略已经用span标签包装的单词？我尝试匹配两侧带有空格的单词，而不是像/ sample | text /那样匹配空格，而不仅仅是单词，如果其中一个单词在内容中是最后一个，则不匹配，除非你用它结束它一个空间。

Answer 1

您的功能正常，问题在于输出结果。

var oldContent = 'some sample text',
newContent = oldContent.replace(/sample|text/g, '<span style="background-color: #ddd;">$&    </span>');
$("div").html(newContent);

只看fiddle - 一切正常

Answer 2

您应该使用jQuery.replaceWith()之类的内容，并替换不在跨度中的TextNode，而不是替换div的innerHTML。

另一种可能的解决方案是从innerHTML删除所有突出显示的HTML，因此您最终会得到纯文本，您可以使用突出显示代码轻松替换它。

Answer 3

Javier，这种情况听起来与Match (or replace) a pattern except in situations s1, s2, s3 etc非常相似。

关于使用正则表达式解析html的所有免责声明，这是一种简单的方法。

这是我们简单的正则表达式：

<span.*?</span>|(sample|text)

交替的左侧匹配完整的<span... </span>标签。我们将忽略这些匹配。右侧匹配并捕获sample或text到组1，我们知道它们是正确的，因为它们与左侧的表达式不匹配。

此骨架程序显示了如何使用正则表达式（请参阅online demo底部的结果）：

<script>
var subject = '<span>dont touch this sample</span> sample text';
var regex = /<span.*?<\/span>|(sample|text)/g;
replaced = subject.replace(regex, function(m, group1) {
    if (group1 == "" ) return m;
    else return "&lt;mybeautifulspan&gt;" + group1 + "&lt;/myspan&gt;";
});
document.write("<br>*** Replacements ***<br>");
document.write(replaced);
</script>

参考

How to match (or replace) a pattern except in situations s1, s2, s3...

如果不在某个HTML标记内，则替换文本

3 个答案: