如何在页面中查找文本，然后使用 JS 为其添加超链接？

Question

我正在开发一个 Wordpress 网站并安装了一个主题。有些元素没有为其添加超链接的选项，因此我尝试添加超链接或使用 JS 使块可点击。

我想为那些 li 元素添加超链接，但主题目前不支持它。

我的逻辑：

页面加载后搜索 li 中的文本。
如果找到文本，则添加超链接。

<div class="col-lg-6 col-sm-6">
  <ul class="cyber-item">
    <li>
      <i class="bx bx-check"></i> abcd
    </li>
    <li>
      <i class="bx bx-check"></i> efgh
    </li>
    <li>
      <i class="bx bx-check"></i> Content Delivery Network
    </li>
    <li>
      <i class="bx bx-check"></i> 24/7 Hours services
    </li>
    </ul>
</div>

Answer 1

有几种方法可以解决这个问题。如果您已经在使用 jquery，您可能需要查看 .wrap() 函数的文档：https://api.jquery.com/wrap/

如果您不使用 jquery，使用纯 js 就足够简单了。您首先需要 select 所有 <li> 元素，然后遍历它们并将内容一一替换为您的 <a> 标签。您可以通过修改元素的 innerHTML 属性.

来做到这一点

我会说这似乎是一个奇怪的问题。必须有一种方法可以让您在不借助此方法的情况下将 link 添加到您的内容中。而且您仍然需要解决一些其他问题 - 例如，您如何知道每个 link 应该去哪里？

无论如何，这是一个片段，因此您可以了解您所问内容背后的原理：

const items = document.querySelectorAll('li')
items.forEach((item) => {
  const children = item.innerHTML
  item.innerHTML='<a href="http://whosebug.com">' + children + '</a>'
})

<div class="col-lg-6 col-sm-6">
  <ul class="cyber-item">
    <li>
      <i class="bx bx-check"></i> abcd
    </li>
    <li>
      <i class="bx bx-check"></i> efgh
    </li>
    <li>
      <i class="bx bx-check"></i> Content Delivery Network
    </li>
    <li>
      <i class="bx bx-check"></i> 24/7 Hours services
    </li>
    </ul>
</div>

如何在页面中查找文本，然后使用 JS 为其添加超链接？

How to Find a text in page and then add hyperlink to it using JS?

javascript

css

wordpress

hyperlink