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

Regular expression for wrapping every word in span tag on word boundaries in javascript

本文关键字:单词 正则表达式 包装 span 边界 javascript 标签      更新时间:2023-09-26

我想在<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上找到了它。但是它只在空格处换行每个单词,也换行标点符号,这在我的例子中是不希望的。

我知道我应该为自己这么不擅长正则表达式而感到羞愧。

有人能帮帮我吗?

多谢!

试试这个regex:

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

我玩了一下,让它工作:

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>