Question

是否有任何动态方式来包装下一个文本。

<p>Enterprise integration platform</p>

预期产出：

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

我需要包装“Enterprise”

之后出现的任何文字

Answer 1

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

＆＃13;

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

＆＃13;

span { color:red }

＆＃13;

<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>

＆＃13;

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

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

2 个答案: