<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 3 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 3 年前。
我需要一个 Javascript 函数,它会自动在具有 class="cec"的 span 元素之间包装特定文本 (Stefano)。
这里是 HTML:
<main>
<div>
<p>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</p>
<p>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</p>
<b>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</b>
<h2>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</h2>
<h3>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</h3>
<h4>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</h4>
</div>
</main>
这里应该如何转换:
<main>
<div>
<p>Lorem Ipsum bla bla bla <span class="cec">Stefano</span> Lorem Ipsum bla bla bla</p>
<p>Lorem Ipsum bla bla bla <span class="cec">Stefano</span> Lorem Ipsum bla bla bla</p>
<b>Lorem Ipsum bla bla bla <span class="cec">Stefano</span> Lorem Ipsum bla bla bla</b>
<h2>Lorem Ipsum bla bla bla <span class="cec">Stefano</span> Lorem Ipsum bla bla bla</h2>
<h3>Lorem Ipsum bla bla bla <span class="cec">Stefano</span> Lorem Ipsum bla bla bla</h3>
<h4>Lorem Ipsum bla bla bla <span class="cec">Stefano</span> Lorem Ipsum bla bla bla</h4>
</div>
</main>
考虑到它将在 Wordpress 环境中完成,因此我将避免使用 JQuery。
提前致谢!
最佳答案
您可以使用 replace
和正则表达式来完成。
var container
选择带有您的标记的元素。
/g
用于全局替换。
var container = document.querySelector('div');
container.innerHTML = container.innerHTML.replace(/Stefano/g, '<span class="cec">Stefano</span>');
.cec{color: red}
<main>
<div>
<p>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</p>
<p>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</p>
<b>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</b>
<h2>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</h2>
<h3>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</h3>
<h4>Lorem Ipsum bla bla bla Stefano Lorem Ipsum bla bla bla</h4>
</div>
</main>
关于javascript - 使用带有 Javascript 代码的类在 span 元素之间包装特定文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57672851/