如何替換JS字元串中比對到多處中某一指定節點？

​

問題先行，要求搜尋關鍵字，比對到四處，那我滑鼠放在第二處，我想把它變個顔色，該怎麼實作呢？​截圖如下：

對于如何替換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)  // 這是主體内容，有很多内容，喜歡看這個文章就關注吧      

本文完~