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>?!"