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

更新日期: 2021-01-13 阅读: 2.1k 标签: 字符串

抛出一个问题,如图,搜索关键字,匹配到四处,那我鼠标放在第二处,我想把它变个颜色,该怎么实现呢?回到文章的标题,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)  // 这是主体内容,有很多内容,喜欢看这个文章就关注吧

转载请注明出处!

原文地址:https://www.cnblogs.com/class1/p/14273231.html 


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/10088

相关推荐

js中字符串截取的几种方式

众所周知,js提供了很多字符串截取的方式。下面主要介绍js中slice(),splice(),split(),substring(),substr()的使用和区别,主要介绍了JavaScript截取、切割字符串的技巧,需要的朋友可以参考

JavaScript:生成重复的字符串(字符串乘法)

看到一个题目要求写一个函数times,输出str重复num次的字符串。除了利用循环还有几种方法:递归,结合三元表达式更简洁。数组的 join() 方法。ES6的 repeat() 方法。ES6目前没有全部兼容。

js 字符串比较大小

数值是合乎常理的操作,其实字符串也可以比较大小;两个字符串比较大小,比较的是组成它们字符的ASCII码的大小,比较原则如下:比较的是字符的ASCII码的大小。

原生js去掉字符串2端空格Trim()方法总汇

在我们使用JavaScript编写脚本的时候,经常会遇到把字符串两边的空格进行清除,它不想其它语言会有内置方法函数处理,js需要我们自己代码来实现。如果用过jquery库的话,它提供了trim方法,我们可以直接使用。

JS判断字符串小括号是否成对合法

要判断()是否成对;运用栈的后进先出 的特点,定义一个空数组,作为栈;for循环遍历字符串,当遇到(的时候就把(添加到空数组最顶端,push方法,记录发现一个左括号;

js中String.prototype实现string过滤空格_字符串空格过滤

我们都知道prototype可以向对象上添加属性和方法,语法如下:object.prototype.name=value。这篇文章就是利用prototype,为字符串扩展过滤空格的方法

es6中新增的字符串方法

es6中新增的字符串方法:字符串模板用法${变量名}、字符串查找方法string.includes(要找得字符串)、检查字符串是否已xxx开头、字符串重复方法string.repeat(次数)、字符串填充string.padStart

js提取字符串中的数值

1.像生于1999年这样字符串中只含有一个整型数值的字符串,直接使用正则表达式将数字的字符删除掉就行:2.对于字符串中含有多数值,使用字符串的match方法,通过正则表达式提取字符串的所有数字(包含整数和小数):

ES6 字符串之模板字符串、标签模板、实用方法集

模板字符串:1.可写多行字符串 2.使用${}添加变量,模板字符串之中还能调用函数。标签模板的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容。

Js实现字符串压缩

字符串压缩。利用字符重复出现的次数,编写一种方法,实现基本的字符串压缩功能。比如,字符串aabcccccaaa会变为a2b1c5a3。若“压缩”后的字符串没有变短,则返回原先的字符串。你可以假设字符串中只包含大小写英文字母

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!