更快地替换所有 dom 元素中的文本的方法?

2023-11-21

我正在尝试替换标签之间的所有文本,我想知道最快的方法。

一个例子是尝试用任意字符串 helloWorld 替换所有文本,这样:

<div>
    <div>
        RandomText1
        <div>
            RandomText2
        </div>
    </div>
</div>

就变成这样了:

<div>
    <div>
        helloWorld
        <div>
            helloWorld
        </div>
    </div>
</div>

我目前的方法是:

  • 在 DOM 上进行深度优先搜索 (DFS)
  • 对于每个元素,解析并确定哪部分是文本,哪部分是元素。
  • 对于文本部分,将其替换。

对我来说,这真的很慢,尤其是尝试对大型文档执行此操作并且必须多次重复该过程。有更快的方法吗?


不需要解析每个元素来查找文本节点,只需递归遍历即可childNodes元素的属性

var newText = 'hello world';
function replaceTextNodes(node) {
  node.childNodes.forEach(function(el) {
    if (el.nodeType === 3) {  // If this is a text node, replace the text
      if (el.nodeValue.trim() !== "") { // Ignore this node it it an empty text node
        el.nodeValue = newText;
      }
    } else { // Else recurse on this node
      replaceTextNodes(el);
    }
  });
}

var onClick = replaceTextNodes.bind(null, document.querySelector('#container'));
document.querySelector('#replace').addEventListener('click', onClick);
<div id='container'>
  <div>
    RandomText1
    <div>
      RandomText2
      <ul>
        <li>RandomText3</li>
      </ul>
    </div>
  </div>
</div>
<button id="replace">Replace</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更快地替换所有 dom 元素中的文本的方法? 的相关文章

随机推荐

  • 与dispatch_sync发生死锁

    dispatch queue t myQueue dispatch queue create com mycompany myqueue 0 dispatch sync myQueue Do EXTREME PROCESSING for i
  • Java中'boolean'和'Boolean'的默认值

    默认值是多少boolean 原始 和BooleanJava 中的 原始包装器 a 的默认值Boolean 对象 是null The 默认值 for a boolean 原语 是false
  • 如何在 SwiftUI 选择器选项下方添加部分页脚文本?

    我正在 SwiftUI 上编写一个应用程序 并使用 Picker 呈现选项列表供用户选择 我想添加一些页脚文本来解释当有人点击选择器并看到选项时列表中的选择 This is an example screenshot of what I d
  • 是否可以使用 sed 可靠地转义正则表达式元字符

    我想知道是否有可能写一个100 可靠的sed命令转义输入字符串中的任何正则表达式元字符 以便可以在后续 sed 命令中使用它 像这样 bin bash Trying to replace one regex by another in an
  • ANTLR 语法中有保留字列表吗?

    我最近创建了一个 ANTLR3 解析器规则 options foo bar 它没有编译 我花了一些时间才发现options是一个保留字 AntlrWorks 指出了一个错误 但没有指出原因 ANTLR 中是否有保留字列表以及命名规则中是否有
  • 使用Java进行NAT穿越

    我想连接到计算机 每台计算机都位于 NAT 路由器后面 我读到 STUN 仅适用于 NAT 路由器后面的一台计算机 真的吗 如果是这样 我该如何解决双 NAT 问题 谢谢 托马斯 UDP打洞 and TCP打孔
  • 如何使用异步脚本将 Google Analytics 集成到 GWT 中

    我正在尝试在 GWT 应用程序中使用 Google Analytics 跟踪页面 我已经检查了以下线程 将 Google Analytics 集成到 GWT 应用程序中 我认为解决方案 public static native void r
  • 如何在android中的LoaderManager中使用两个Cursor和CursorJoiner

    我有一个ContentProvider 它有两个表 1 OnlineContacts 2 AllContacts 然后我有一个方法 我可以查询两个表并获取它们的结果cursors分别地 进而joining他们使用CursorJoiner并列
  • 如何修复“C 扩展未加载,训练速度会很慢”的问题。安装 C 编译器并重新安装 gensim 以进行快速训练。

    我正在使用库 node2vec 它基于 gensim word2vec 模型来对嵌入空间中的节点进行编码 但是当我想要适应 word2vec 对象时 我收到此警告 C Users lenovo Anaconda3 lib site pack
  • 如何在GUI线程中执行代码?

    我有一个对 Changed 事件做出反应的 FileSystemWatcher 我想打开该文件 读取其内容 将其显示在文本框中 并隐藏 1 秒后创建的弹出窗口 该代码几乎可以工作 但隐藏弹出窗口时会出现问题 这是代码片段 txtLog Di
  • __builtin_return_address 对于索引 >0 返回 null?

    我想获取调用者函数的返回地址 我在用着 builtin return address 函数 但如果我给出的索引值大于 0 它将返回NULL 请帮我解决这个问题 或者告诉我任何其他功能来获得相同的效果 See 这个答案相关问题 builtin
  • 行内元素可以包含块元素吗?

    内联元素可以包含块元素 例如 列表可以有段落吗 抛开 LI 和 P 都是块级这一事实 这样做永远是无效的 但从行为角度来看 有时您可以将块级元素嵌套在内联一级元素中 但这取决于浏览器解析器 例如 在 FireFox 3 x 中 使用此标记
  • 根据另一个输入组件的值禁用/启用 JSF 输入组件

    我有两个单选按钮
  • Java客户端和C++服务器通过TCP Socket发送和接收

    我有一个 C 服务器和两个客户端 ruby 和 java 一切都在 64 位 Linux 机器上运行 java 1 7 0 17 ruby 客户端可以正常工作 但 java 版本会出现问题 在Java中 我尝试将字符串从客户端发送到服务器
  • 如何增加 HTML 表格中列的宽度?

    如何增加 HTML 表格中列的宽度 下面是我的代码 我正在努力获得第二个 td 每行中的标签进行扩展 以便输入文本框之间有更多空间 第一个 td 标签 以及 cookie 的名称及其价格 第 3 td 标签 有任何想法吗 table bor
  • 如何在 ViewModel 中使用数组?

    我的代码现在看起来像这样 每条消息有两行代码 该代码可以工作 但如果我有 30 条消息 每条消息都可以为其赋值 那么我将需要 60 行代码来声明所有内容 string msg1 string msg2 public string Msg1
  • printf 是否有通用转换说明符?

    我想打印变量值而不指定其类型 在c中 我可以做 int main int argc char argv int i 1 float f 0 1 char s s printf i n i printf f n f printf s s re
  • 获取子类别 magento

    尝试获取处于活动状态的特定类别的子项 请帮忙 我做起来有困难 我目前可以展示所有内容 但不能具体展示 将不胜感激任何帮助 category Mage getModel catalog category gt load 2 category
  • 如何在 IIS Express 中启用外部请求?

    如何在 IIS Express 中启用远程请求 斯科特 格思里 Scott Guthrie 写道这是可能的但他没有说怎么做 IIS 团队网站上有一篇博客文章正在解释如何在 IIS Express 上启用远程连接 以下是该帖子的相关部分总结
  • 更快地替换所有 dom 元素中的文本的方法?

    我正在尝试替换标签之间的所有文本 我想知道最快的方法 一个例子是尝试用任意字符串 helloWorld 替换所有文本 这样 div div RandomText1 div RandomText2 div div div 就变成这样了 div