首页 > 其他分享 >[GPT] 对于一个复杂的html文档而言,如何用 js 批量替换页面上的某些文字从A替换为B,前提是不能去掉标签和已绑定的事件

[GPT] 对于一个复杂的html文档而言,如何用 js 批量替换页面上的某些文字从A替换为B,前提是不能去掉标签和已绑定的事件

时间:2023-07-11 18:13:34浏览次数:52  
标签:node replaceTextInDocument 文本 函数 替换 html js 节点

 

原生:示例代码

function replaceTextInDocument(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(/A/g, 'B');
  } else if (node.nodeType === Node.ELEMENT_NODE) {
    for (var i = 0; i < node.childNodes.length; i++) {
      replaceTextInDocument(node.childNodes[i]);
    }
  }
}

replaceTextInDocument(document.body);

上述代码定义了一个 replaceTextInDocument 函数,它接收一个节点作为参数。

如果节点是文本节点,则使用正则表达式替换文本内容。

如果节点是元素节点,则递归遍历其所有子节点,并对每个子节点调用 replaceTextInDocument 函数。

最后,我们可以调用 replaceTextInDocument 函数并将 document.body 作为参数,以替换整个页面上的文本内容。

这样就可以批量替换 HTML 页面中的某些文字,而不会影响标签和已绑定的事件。

 

jQuery实现:示例代码

function replaceTextInDocument($element) {
  $element.contents().each(function() {
    if (this.nodeType === Node.TEXT_NODE) {
      this.nodeValue = this.nodeValue.replace(/A/g, 'B');
    } else if (this.nodeType === Node.ELEMENT_NODE) {
      replaceTextInDocument($(this));
    }
  });
}

replaceTextInDocument($('#myContainer'));

在上面的代码中,我们定义了replaceTextInDocument函数,该函数将jQuery元素作为参数。

我们使用.contents()方法来获取元素的所有子节点。

然后,我们使用.each()方法对每个节点进行迭代。

如果节点是一个文本节点,我们将使用.nodeValue属性替换文本内容。

如果该节点是一个元素节点,我们会递归地调用该元素的replaceTextInDocument函数。

 

最后,你可以使用所需容器元素(如$('#myContainer'))的jQuery选择器调用replaceTextInDocument函数,以执行批量文本替换。

这个jQuery实现实现了与前面的JavaScript代码相同的结果,允许你在不影响标记和事件绑定的情况下将复杂HTML文档中的某些单词从A替换为B。

 

Cool:文字转语音

Link:https://www.cnblogs.com/farwish/p/17545542.html

标签:node,replaceTextInDocument,文本,函数,替换,html,js,节点
From: https://www.cnblogs.com/farwish/p/17545542.html

相关文章

  • js递归树结构
    //递归重组tree数据concatTreeData(list,newData,keyId,isLayze){letisFlag=false;list.map((item,index)=>{if(item.id==keyId){if(item.children){item.c......
  • 前端面试题-js(三)
    1.JavaScript中的对象JavaScript中有八种数据类型。有七种原始类型,因为它们的值只包含一种东西(字符串,数字或者其他)。相反,对象则用来存储键值对和更复杂的实体。对象是具有一些特殊特性的关联数组。它们存储属性(键值对),其中:属性的键必须是字符串或者symbol(通常是字符串)。值......
  • js中字符串的方法
    字符串的17种方法。。。。。。length:返回字符串的长度。conststr="Hello,World!";console.log(str.length);//输出13charAt(index):返回指定索引位置的字符。conststr="Hello,World!";console.log(str.charAt(4));//输出oconcat(str1,str2,...):连接两个或多......
  • nvm安装node报错Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104
    windows上通过nvm管理node版本,在本地安装了nvm后,通过nvm安装node,报错了,信息:Couldnotretrievehttps://nodejs.org/dist/latest/SHASUMS256.txt.Gethttps://nodejs.org/dist/latest/SHASUMS256.txt:dialtcp104.20.23.46:443:i/otimeout 有了这样的信息,我......
  • 25.solidwork替换零部件
    1.打开要替换的新零部件2.在装配体上右击要替换的旧零部件-替换零部件3.选择刚刚打开的新零部件-打钩4.再次打钩,即可5.替换完成......
  • Qt QJsonDocument以及与QJsonArray、QJsonObject、QJsonValue的关联
    0、说明QJsonDocument类提供了read/writeJSON文档的方法。用QJsonDocument::fromJson()方法,可以从将一个JSON文件(或者QByteArray数据)转换为QJsonDocument,用QJsonDocument::toJson()则能起到相反的用法。在此过程中的语法解析是很高效的,并且可以将JSON转换为Qt使用的二......
  • js 检测文本是否溢出
    自定义指令的方式手写实现/***检测文本是否溢出*参考https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js#L241*@param{*}e*@returns*/functionisEllipsis(e){returnnewPromise(resolve=>{constel=window.event......
  • go语言-不同类型转换为JSON格式数据
    1.将结构体转换为JSON:packagemainimport( "encoding/json" "fmt")typePersonstruct{ Namestring Ageint Emailstring}funcmain(){ person:=Person{Name:"Alice",Age:25,Email:"[email protected]"} ......
  • JS基础
    js基础之前学习的都忘了,重来一,js简介ECMAscript是javascript标准,所以一般情况下我们认为这是一个意思实际上javascript要更大一些完整的javascript实现应该由以下三个部分构成ECMAscriptDOMBOM构成 js的特点:解释型语言类似于java和c语言的结构动态语言基......
  • 520要通过这种方式告白 html+css+javascript canvas桃心代码 可修改 【附完整代码】
    ......