javascript - 用于在 javascript 中的单词边界上包装 span 标签中的每个单词的正则表达式

Question

我想将字符串的每个单词包装在<span>标签中，而不破坏任何现有的 html 标签，也不包括任何标点符号。

例如以下字符串：

This... is, an. example! <em>string</em>?!

应包装为：

<span>This</span>... <span>is</span>, <span>an</span>. <span>example</span>! 
<span><em>string</em></span>?!

理想情况下，我只需要包装这些词而不需要其他任何东西。

除了撇号，它们也应该被包裹起来。

it's=><span>it's</span>

give 'em=><span>give</span> <span>'em</span>

teachers'=><span>teachers'</span>

现在我正在使用一个非常简单的正则表达式：

str.replace(/([^\s<>]+)(?:(?=\s)|$)/g, '<span>$1</span>');

我在stackoverflow的某个地方找到了它。但它只将每个单词都包含在空格上，并且也包含标点符号，这在我的情况下是不可取的。

我知道我应该为正则表达式如此糟糕而感到羞耻。

有人可以帮帮我吗？

非常感谢！

Answer 1

试试这个正则表达式：

var str = "This string... it's, an. example! <em>string</em>?!";
str.replace(/([A-Za-z0-9'<>/]+)/g, '<span>$1</span>');

// "<span>This</span> <span>string</span>... <span>it's</span>, <span>an</span>. <span>example</span>! <span><em>string</em></span>?!"

Answer 2

我到处玩，让它工作：

String toMarkUp = "Each word needs a strong tag around it.  I really want to wrap each and every word";

String markedUp = toMarkUp.replaceAll("\\b(\\w+)\\b","<span>$1</span>");

正则表达式捕获每个由单词边界包围的具有 1 个或多个字符 (\w+) 的单词，并使用正向查找组在替换中使用 $1 来引用它，1 是正则表达式中的第一个捕获组。

输出 ：

<span>Each</span> <span>word</span> <span>needs</span> <span>a</span> <span>strong</span> <span>tag</span> <span>around</span> <span>it</span>.  <span>I</span> <span>really</span> <span>want</span> <span>to</span> <span>emphasize</span> <span>each</span> <span>and</span> <span>every</span> <span>word</span>