将标签中的下一个文本换行

Question

有没有动态的方式来包装下一个文本。

<p>Enterprise integration platform</p>

预期产出：

<p>Enterprise <span>integration</span> platform</p>

我需要换行"企业"之后出现的任何文本

Answer 1

此代码将查找所有出现的带有"企业"一词的段落。如果单词可以出现在其他单词之后，您将需要更多的处理

$("p:contains('Enterprise')").html(function() { 
var texts = this.textContent.split(" "); 
return texts.shift()+" <span>"+texts.shift()+"</span> "+texts.join(" ");
});

span { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>Some stuff:</p>
<p>Enterprise integration platform</p>
<p>Enterprise architecture</p>
<p>Enterprise service as a service</p>

Answer 2

var elements = document.querySelectorAll("p");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.innerHTML = element.innerText.replace(/Enterprise (S+)/, "Enterprise <span>$1</span>");
}

/* just style to highlight span */
span {
background-color: red;
}

<p>Enterprise integration platform</p>

请注意，此正则表达式将仅替换Enterprise的第一个匹配项，如果需要替换所有出现项，则需要添加g后缀：/Enterprise (S+)/g。

我在这里使用正则表达式，我可以在这里解释一下

• Enterprise— 显然是在搜索Enterprise文本。
• S+— 搜索一个或多个非空格字符。
• (S+)— 捕获此非空格字符组以使用$1替换。

如果需要对Enterprise进行不区分大小写的搜索，则应重写将运算符替换为.replace(/(enterprise) (S+)/i, "$1 <span>$2</span>")。

请注意，我使用i后缀进行不区分大小写的搜索并捕获enterprise单词，因为它在任何情况下都可以。