将下一个文本包装在标签中

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单词，因为它可以是任何情况。