在特定的开始结束位置替换字符串javascript

Question

我想替换特定开始和结束索引处的字符串，

str = `kunal 11 12 13 kunal 11 12`;

matches = [{
    Start: 0,
    End: 10
  },
  {
    Start: 15,
    End: 26
  }
];

str1 = '';
for (i = 0; i < matches.length; i++) {
  str1 = str.slice(0, matches[i].Start) +
         `<span>${str.substring(matches[i].Start, matches[i].End)}</span>` +
          str.slice(matches[i].End);
}

console.log(str1);

我写了一段代码，只是替换最后一个匹配项，是否有一些我缺少的预定义方法？

Answer 1

问题在于str1 = str.slice...<other manipulations of str> 意味着生成的str1 仅取决于str 是什么，而不取决于str1 以前可能是什么。因此，如果您在第一次迭代中重新分配 str1，然后在第二次迭代中重新分配它，那么第二个版本将不会包含在第一个版本中所做的任何更改。

要修复它，您可以迭代 matches 从最大的 Start 到最小的 Start，而不是反过来，而 .sliceing 修改 字符串，这将确保新插入的文本不会破坏您的matches'Start 和End 属性：

const input = `kunal 11 12 13 kunal 11 12`;
const matches = [{
    Start: 0,
    End: 10
  },
  {
    Start: 15,
    End: 26
  }
];
let str = input;
for (let i = matches.length - 1; i >= 0; i--) {
  str = str.slice(0, matches[i].Start) + `<span>${str.substring(matches[i].Start, matches[i].End)}</span>` + str.slice(matches[i].End);
}

console.log(str);

Answer 2

您可以使用Array.reduceRight() 和template literal 来获得结果。 reduceRight 用str 初始化，在每次迭代中（从最后一个匹配到第一个），它获取字符串的先前状态，用匹配更新它，并返回结果。

const str = `kunal 11 12 13 kunal 11 12`;
const matches = [{ Start: 0, End: 10 }, { Start: 15, End: 26 }];

const result = matches.reduceRight((r, { Start: s, End: e }) =>
  `${r.substring(0, s)}<span>${r.substring(s, e)}</span>${r.substring(e)}`, str);

console.log(result);