javascript - 正则表达式匹配段落中的单词但排除内部 HTML 标签

Question

我正在使用在 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:匆忙的示例，没有提供字符串替换的正确使用。

Answer 1

您可以使用负向前视来确保单词前面没有右尖括号，而没有左尖括号:

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

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