javascript - JQuery/Javascript - 在 DOM 中搜索文本并插入 HTML

标签 javascript jquery html dom insert

我如何在 DOM 中搜索文档文本中的特定字符串(例如,“奶酪”),然后在该字符串之后立即插入一些 HTML(例如,“< b >is fantastic”)。

我尝试了以下方法:

for (var tag in document.innerHTML) {
    if (tag.matches(/cheese/) != undefined) {
        document.innerHTML.append(<b>is fantastic</b>
    }
}

(以上更多是对我尝试过的内容的说明,而不是实际代码。我预计语法错误严重,所以请原谅任何错误,它们不是问题所在)。

干杯,

皮特

最佳答案

有一些本地方法可以在文档中查找文本:

MSIE:textRange.findText()
其他:window.find()

如果找到某些内容,则操作给定的 textRange。
这些方法应该提供比遍历整个文档更多的性能。

例子:

<html>
<head>

  <script>
  function fx(a,b)
  {
    if(window.find)
    {
      while(window.find(a))
      {
        var node=document.createElement('b');
            node.appendChild(document.createTextNode(b));
        var rng=window.getSelection().getRangeAt(0);
            rng.collapse(false);
            rng.insertNode(node);
      }
    }
    else if(document.body.createTextRange)
    {
      var rng=document.body.createTextRange();
      while(rng.findText(a))
      {
        rng.collapse(false);
        rng.pasteHTML('<b>'+b+'</b>');
      }
    }
  }
  </script>
</head>
<body onload="fx('cheese','is wonderful')">
<p>I've made a wonderful cheesecake with some <i>cheese</i> from my <u>chees</u>e-factory!</p>
</body>
</html>

关于javascript - JQuery/Javascript - 在 DOM 中搜索文本并插入 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4489119/

相关文章:

javascript - HTML5 如何让 canvas 不拉伸(stretch)页面?

jquery - 如何对包含数字内容的 <li> 列表进行排序(排序)?

jquery - 较小尺寸的 Youtube 视频在 Swiper 中无法工作

python - 如何使用 BeautifulSoup 获取 <tr> 中的特定 <td>

javascript - 单击菜单外部关闭菜单

html - 设置 HTML 表格的最大显示行数

javascript - 在javascript中获取字符串的数值

javascript - 如何创建滚动到粘性导航栏的标题?

javascript - 阐明浏览器是否还缓存通过 anchor href、动态生成的 html 和 javascript fetch?cache 获取的资源

用于控制 YouTube 音量的 jQuery UI slider