如何替换JS字符串中匹配到多处中某一指定节点?

2024-01-16 07:58

本文主要是介绍如何替换JS字符串中匹配到多处中某一指定节点?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

来源 | https://www.cnblogs.com/class1/p/14273231.html

问题先行,要求搜索关键字,匹配到四处,那我鼠标放在第二处,我想把它变个颜色,该怎么实现呢?截图如下:

对于如何替换JS字符串中匹配到多处中某一指定节点?今天我们一起来看看。

字符串的替换,我们首先想到的一个属性是replace:

strObject.replace(reg/substr,replacement)


两个参数,第一个参数,需要替换的值(可以是正则匹配式也可以是字符串),第二个参数,替换成的值。

str ="abcdefabdrdwss";str.replace(/"ab"/g, "xy"); console.log(str)  // xycdefxydrdwss

当我们使用正则表达式,如上,加上g,就是全局匹配,不加就是匹配第一个。但是我就想替换第二处的ab。好像没有直接可用的api。那我们可不可以拿到第二处的下标位置,通过字符串截取拼接的方式实现呢?

顺着这个思路,如何找到第二处的下标位置。

 let str ="abcdefabdrdwss";    const reg = new RegExp(‘ab‘, ‘g‘);    let ret;    const arr=[];    while((ret = reg.exec(str))!==null) {      arr.push({id:ret.index,content:ret.input}) // 通过循环把每次匹配的开始下标都放到arr中    }   console.log(arr) //[{id:0,content:"abcdefabdrdwss"},{id:6,content:"abcdefabdrdwss"}]

每处的下标都收集到了,再看如何替换。

  // 字符串的替换,四个参数,第一个是原始字符串,第二个是替换的开始位置,第三是替换的内容    //第四个参数,这里是替换几位index就加几    const replaceStr = (strs, index, text,len) => {      return strs.substring(0, index) + text + strs.substring(index + len);    }; 

结合上面的内容,可以直接替换第二个"ab"了:

const newVal= replaceStr(str, arr[1].id, ‘xy‘,2);console.log(newVal)  // abcdefxydrdwss

附上完整的js代码示例:

 const str ="这是主体内容,有很多内容,喜欢看这个内容就关注吧";    const reg = new RegExp(‘内容‘, ‘g‘);    let ret;    const arr=[];    while((ret = reg.exec(str))!==null) {      arr.push({id:ret.index,content:ret.input})     }  const replaceStr = (strs, index, text,len) => {      return strs.substring(0, index) + text + strs.substring(index + len);    }; // 替换文本的第三处“内容”为 “文章”const newVal= replaceStr(str, arr[2].id, ‘文章‘,2);console.log(newVal)  // 这是主体内容,有很多内容,喜欢看这个文章就关注吧

本文完~

这篇关于如何替换JS字符串中匹配到多处中某一指定节点?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/611824

相关文章

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,:本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹,请按照以

Springboot3+将ID转为JSON字符串的详细配置方案

《Springboot3+将ID转为JSON字符串的详细配置方案》:本文主要介绍纯后端实现Long/BigIntegerID转为JSON字符串的详细配置方案,s基于SpringBoot3+和Spr... 目录1. 添加依赖2. 全局 Jackson 配置3. 精准控制(可选)4. OpenAPI (Spri

使用Python实现base64字符串与图片互转的详细步骤

《使用Python实现base64字符串与图片互转的详细步骤》要将一个Base64编码的字符串转换为图片文件并保存下来,可以使用Python的base64模块来实现,这一过程包括解码Base64字符串... 目录1. 图片编码为 Base64 字符串2. Base64 字符串解码为图片文件3. 示例使用注意

python如何生成指定文件大小

《python如何生成指定文件大小》:本文主要介绍python如何生成指定文件大小的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python生成指定文件大小方法一(速度最快)方法二(中等速度)方法三(生成可读文本文件–较慢)方法四(使用内存映射高效生成

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

golang float和科学计数法转字符串的实现方式

《golangfloat和科学计数法转字符串的实现方式》:本文主要介绍golangfloat和科学计数法转字符串的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望... 目录golang float和科学计数法转字符串需要对float转字符串做处理总结golang float

Python如何判断字符串中是否包含特殊字符并替换

《Python如何判断字符串中是否包含特殊字符并替换》这篇文章主要为大家详细介绍了如何使用Python实现判断字符串中是否包含特殊字符并使用空字符串替换掉,文中的示例代码讲解详细,感兴趣的小伙伴可以了... 目录python判断字符串中是否包含特殊字符方法一:使用正则表达式方法二:手动检查特定字符Pytho

C#继承之里氏替换原则分析

《C#继承之里氏替换原则分析》:本文主要介绍C#继承之里氏替换原则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#里氏替换原则一.概念二.语法表现三.类型检查与转换总结C#里氏替换原则一.概念里氏替换原则是面向对象设计的基本原则之一:核心思想:所有引py

MySQL 字符串截取函数及用法详解

《MySQL字符串截取函数及用法详解》在MySQL中,字符串截取是常见的操作,主要用于从字符串中提取特定部分,MySQL提供了多种函数来实现这一功能,包括LEFT()、RIGHT()、SUBST... 目录mysql 字符串截取函数详解RIGHT(str, length):从右侧截取指定长度的字符SUBST