JavaScript遍历对象数组并替换字符串中的值

没问题，这种动态键的场景在日常开发里挺常见的，我们可以通过遍历对象的所有属性来实现统一替换。下面是具体的解决方案：

核心思路 #

因为对象的键是动态生成的，没法提前指定要处理哪些属性，所以核心步骤是：

• 先遍历数组中的每一个对象
• 对每个对象，获取它的所有属性名（不管是固定的还是动态生成的）
• 逐个检查属性值，只对字符串类型的值执行替换操作（避免数字、布尔等类型报错）

代码实现 #

修改原数组的版本 #

如果允许直接修改原数组，用forEach遍历就很高效：

const objArray = [{ 
  name: 'Joe', 
  age: 21, 
  randomCol1: 'Blah<br>Blah<br>Blah', 
  randomCol2: 'Blah<br>Blah<br>Blah', 
  randomCol3: 'Blah<br>Blah<br>Blah' 
}, { 
  name: 'Bob', 
  age: 25, 
  randomCol1: 'Blah<br>Blah<br>Blah' 
}];

// 定义要替换的目标字符串和替换后的内容
const targetStr = '<br>';
const replaceWith = '\n'; // 换成你实际需要的内容，比如'<br>'或者其他文本

// 遍历数组中的每个对象
objArray.forEach(obj => {
  // 获取当前对象的所有属性键
  Object.keys(obj).forEach(key => {
    // 只处理字符串类型的值，避免非字符串类型调用replace方法报错
    if (typeof obj[key] === 'string') {
      // 用replaceAll做全局替换，所有匹配的内容都会被替换
      obj[key] = obj[key].replaceAll(targetStr, replaceWith);
    }
  });
});

// 查看处理后的结果
console.log(objArray);

返回新数组的版本（不修改原数组） #

如果不想改动原数组，推荐用map配合对象浅拷贝来生成新数组，更符合函数式编程的最佳实践：

const objArray = [{ 
  name: 'Joe', 
  age: 21, 
  randomCol1: 'Blah<br>Blah<br>Blah', 
  randomCol2: 'Blah<br>Blah<br>Blah', 
  randomCol3: 'Blah<br>Blah<br>Blah' 
}, { 
  name: 'Bob', 
  age: 25, 
  randomCol1: 'Blah<br>Blah<br>Blah' 
}];

const targetStr = '<br>';
const replaceWith = '\n';

const processedArray = objArray.map(obj => {
  // 浅拷贝原对象，避免修改原数据
  const newObj = {...obj};
  Object.keys(newObj).forEach(key => {
    if (typeof newObj[key] === 'string') {
      newObj[key] = newObj[key].replaceAll(targetStr, replaceWith);
    }
  });
  return newObj;
});

console.log(processedArray); // 处理后的新数组
console.log(objArray); // 原数组保持不变

兼容旧环境的注意事项 #

如果你的运行环境不支持replaceAll（比如旧版浏览器），可以用正则表达式的全局匹配来替代，注意要转义目标字符串里的特殊正则字符：

// 替换replaceAll这一行
obj[key] = obj[key].replace(new RegExp(targetStr.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), replaceWith);

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