Javascript正则表达式：将单词和空格包装成标签

Question

我一直在尝试实现以下功能：我想将单词包装在“”标签中，将空格（可能是多个）包装在“
”标签中，假设原始文本可能包含不应被触及的HTML标记。

This is   <b>very bold</b> word. 

转换为 -->

<w>This</w><s> </s><w>is</w><s>   </s><b><w>very</w><s> </s><w>bold</w></b><s> </s><w>word</w>

什么是正确的正则表达式，以实现此目的？

- WHITECOLOR

Answer 1

你应该使用两个替换符号 >>

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

请查看此演示。

---

编辑:

针对更复杂的输入（根据您下面的评论），请使用 >>。

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

请查看此演示。

- Ωmega

---

你能解释一下 (?=...) 这部分吗？ - Sean Vaughn

@SeanVaughn - 部分 (?=\s) 的意思是“后面跟着空格”。 - Ωmega

很好，但是你的解决方案能否修改以处理“复杂”的标签，例如<span style="font-weight:bold">非常粗体</span>而不是<b>非常粗体</b>？ - WHITECOLOR

无法处理嵌套元素http://jsfiddle.net/EfzW8/1/（“bold”未包含在<w>中）。您可以添加任意数量的特殊情况，但我总是会找到一个反例根据定义http://en.wikipedia.org/wiki/Chomsky_hierarchy#The_hierarchy。 - Prinzhorn

@Prinzhorn - 首先，OP要求正则表达式解决方案，因此找到最接近的正则表达式解决方案是很好的。您最近的示例具有data-foo="<bar>"标记参数，这是可能的，但非常不太可能。由于我不知道OP需要解析什么类型的HTML源代码，因此很难说我们需要使用多复杂的正则表达式。我相信我最近的代码应该适用于OP。 - Ωmega

Answer 2

正则表达式并不适用于所有任务。如果您的字符串可以包含任意HTML，则无法使用正则表达式处理所有情况，因为HTML是一种上下文无关语言，而正则表达式仅覆盖其中的子集。在搞砸循环和大量代码来处理此问题之前，请允许我提出以下建议：

如果您处于浏览器环境或可访问DOM库，则可以将此字符串放入临时DOM元素中，然后处理文本节点，然后读取字符串。

以下是一个示例，使用我写的一个库，名为Linguigi（已于数月前进行更新）。

var element = document.createElement('div');
element.innerHTML = 'This is   <b>very bold</b> word.';

var ling = new Linguigi(element);

ling.eachWord(true, function(text) {
    return '<w>' + text + '</w>';
});

ling.eachToken(/ +/g, true, function(text) {
    return '<s>' + text + '</s>';
});

alert(element.innerHTML);

示例：http://prinzhorn.github.com/Linguigi/（点击Stackoverflow 12758422按钮）

- Prinzhorn