0

我正在使用我在 stackoverflow 上找到的正则表达式来用 span 标签包围段落中的单词实例，以便用户可以单击每个内部单词以查看该单词的定义。这非常有效，但是，我遇到的问题是，有时该段落的短语包含在内部或标签中，例如标题。

作品：

<div id="passage"> 
<p>
    Hello, my name is SirTophamHatt.
</p>
...
</div>

$('#passage').find('p').each(function() {
    $(this).html(function (index, oldHtml) {
        return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');
    });
});

<div id="passage">
<p>
    <span class="word">Hello</span>, <span class="word">my</span> <span class="word">name</span> <span class="word">is</span> <span class="word">SirTophamHatt</span>.
</p>
...
</div>

不工作：

<div id="passage"> 
<p>
    <em>Hello, my name is SirTophamHatt.</em>
</p>
...
</div>

$('#passage').find('p').each(function() {
    $(this).html(function (index, oldHtml) {
        return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');
    });
});

<div id="passage">
<p>
    <
    <span class="word">em</span>
    >
    <span class="word">Hello</span>, 
    <span class="word">my</span> 
    <span class="word">name</span> 
    <span class="word">is</span> 
    <span class="word">SirTophamHatt</span>
    <!--<span class="word">-->em>
</p>
...
</div>

为了清楚起见，我将最后一段分开。

我不擅长正则表达式；如何修改模式，使其匹配所有不是开始或结束 HTML 标记的单词？

谢谢！

编辑：子元素中的单词必须被包裹起来。HTML 标签本身必须被忽略。

EDIT2：匆忙的例子，没有提供正确使用字符串替换。

4

2 回答 2

9

您可以使用负前瞻来确保单词前面没有右尖括号而没有左尖括号：

\b(\w+(?![^<>]*>))\b
      ^^^^^^^^^^^

而且我认为您可以安全地删除?in \w+?，因为您匹配的是整个单词。

于 2013-10-07T18:19:19.370 回答
2

我能够使用我不久前写的一个突出显示插件来包装单词。

演示：http: //jsfiddle.net/bfXPy/

$("#passage").highlightText(/\b([a-z]+)\b/ig,"word")

您可能需要升级该([a-z]+)部分以匹配您要替换的文本中包含的内容。

这个想法是遍历文本节点而不是处理 html 替换。

于 2013-10-07T18:41:19.637 回答