如何替换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中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

关于Gateway路由匹配规则解读

《关于Gateway路由匹配规则解读》本文详细介绍了SpringCloudGateway的路由匹配规则,包括基本概念、常用属性、实际应用以及注意事项,路由匹配规则决定了请求如何被转发到目标服务,是Ga... 目录Gateway路由匹配规则一、基本概念二、常用属性三、实际应用四、注意事项总结Gateway路由

C#从XmlDocument提取完整字符串的方法

《C#从XmlDocument提取完整字符串的方法》文章介绍了两种生成格式化XML字符串的方法,方法一使用`XmlDocument`的`OuterXml`属性,但输出的XML字符串不带格式,可读性差,... 方法1:通过XMLDocument的OuterXml属性,见XmlDocument类该方法获得的xm

JSON字符串转成java的Map对象详细步骤

《JSON字符串转成java的Map对象详细步骤》:本文主要介绍如何将JSON字符串转换为Java对象的步骤,包括定义Element类、使用Jackson库解析JSON和添加依赖,文中通过代码介绍... 目录步骤 1: 定义 Element 类步骤 2: 使用 Jackson 库解析 jsON步骤 3: 添

使用Python合并 Excel单元格指定行列或单元格范围

《使用Python合并Excel单元格指定行列或单元格范围》合并Excel单元格是Excel数据处理和表格设计中的一项常用操作,本文将介绍如何通过Python合并Excel中的指定行列或单... 目录python Excel库安装Python合并Excel 中的指定行Python合并Excel 中的指定列P

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更

Python将大量遥感数据的值缩放指定倍数的方法(推荐)

《Python将大量遥感数据的值缩放指定倍数的方法(推荐)》本文介绍基于Python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处理,并将所得处理后数据保存为新的遥感影像... 本文介绍基于python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处