javascript - 使用带有 Javascript 代码的类在 span 元素之间包装特定文本

标签 javascript html css wordpress

<分区>


关闭 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/

上一篇:css - 如果长按触摸屏,Angular <button> 会卡住

下一篇:javascript - Konva - 线不接触圆 - 圆和线之间的间隙

相关文章:

javascript - 具有 attr 绑定(bind)的数据绑定(bind)动态命名的 data-* 属性

javascript - 无法在本地主机中使用带有 expressJs api 的查询参数

javascript - Electron 在内部存储文件

javascript - react js如何只从文件中导入所需的函数而不是所有函数

javascript - 设置页面加载时音频对象的当前时间

javascript - JS - 在 <div> 标签上插入元素

javascript - 访问 div 标签的值

javascript - 具有 JavaScript 功能的 SEO 和 <a href ="#">...</a> 标签

css - 'darken( )' and ' rgba()', 这些函数是在css中吗?

html - CSS3 : border on a border-radius div