码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2021-01-14 11:15:26      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:收集   size   http   cap   string   结合   文章   直接   pre   

抛出一个问题,如图,搜索关键字,匹配到四处,那我鼠标放在第二处,我想把它变个颜色,该怎么实现呢?回到文章的标题,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如何替换字符串中匹配到多处中某一指定节点?

标签:收集   size   http   cap   string   结合   文章   直接   pre   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!