Angular响应式表单实现动态字段时重复单引号值替换错误如何解决

问题根因 #

原有实现使用indexOf未指定查找起始位置，默认返回字符串中首个匹配项的索引，遇到重复的参数值就会出现替换错位的问题。

可行解决方案 #

方案1：小改动修复原有逻辑 #

给indexOf传入第二个参数记录上一次匹配的结束位置，每次只向后查找未处理的片段，避免重复匹配前面的内容：

this.replaceString = this.selectedStep.name;
// 记录上一次替换结束的位置，初始为0
let lastMatchEnd = 0;
this.metaArray.forEach((element: any) => {
  // 从lastMatchEnd位置开始查找，不会匹配到前面已经处理过的内容
  const metaIndex = this.replaceString.indexOf(element.paramValue, lastMatchEnd);
  if (metaIndex !== -1) {
    const replaceValue = this.stepEditForm.controls[element.paramIndex].value;
    this.replaceString = this.replaceString.substring(0, metaIndex) + replaceValue + this.replaceString.substring(metaIndex + element.paramValue.length);
    // 更新查找起始位置为本次替换结束的位置
    lastMatchEnd = metaIndex + replaceValue.length;
  }
});

方案2：更稳定的正则顺序匹配方案 #

先提取所有单引号包裹的参数和对应位置，按索引一一替换，不受参数值重复的影响：

const originStr = this.selectedStep.name;
const quoteReg = /'([^']+)'/g;
const matchPositions = [];
let match;
// 收集所有单引号参数的位置和原值
while ((match = quoteReg.exec(originStr)) !== null) {
  matchPositions.push({
    start: match.index,
    end: match.index + match[0].length,
  });
}
// 按索引收集表单提交的新值
const newValues = this.metaArray.map(item => this.stepEditForm.controls[item.paramIndex].value);
// 倒序替换避免前面的长度变化影响后续索引
let result = originStr;
for (let i = matchPositions.length - 1; i >= 0; i--) {
  const pos = matchPositions[i];
  // 替换单引号中间的内容，保留两侧的单引号
  result = result.slice(0, pos.start + 1) + newValues[i] + result.slice(pos.end - 1);
}
this.replaceString = result;

内容的提问来源于stack exchange，提问作者Soumya Gangamwar