將標簽中的下一個文本換行

Question

有沒有動態的方法來包裝下一個文本。

<p>Enterprise integration platform</p>

預期產量：

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

我需要包裝將出現在“企業”之后的所有文本

Answer 1

此代碼將查找所有出現的帶有單詞Enterprise的段落。 如果單詞可以在其他單詞之后出現，則需要更多處理

 $("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字詞，因為在任何情況下都可以。