替换所有字符串并包装为 html

Question

我想在 html 中查找和替换字符串并将它们替换为标签。
来自my name is ron and his name is ben
给my name is <b>ron</b> and his name is <b>ben</b>

这是我的代码，部分工作：https://stackblitz.com/edit/react-gjriyz

export default function App() {
  const arr = ["ron", "ben"];
  const str = "my name is ron and his name is ben";
  let res = "";
  for (var i in arr) {
    res = str.replace(arr[i], "<b>" + arr[i] + "</b>");
  }
  return (
    <div className="App">
      <span dangerouslySetInnerHTML={{ __html: res }} /> <br />
      <br /> 
      expected result: <br />
      my name is <b>ron</b> and his name is <b>ben</b>
    </div>
  );
}

Answer 1

您只是从原始字符串更新 res 而不是增量更新 res，因此最后一个替换操作胜过所有操作。

export default function App() {
  const arr = ["ron", "ben"];
  const str = "my name is ron and his name is ben";
  let res = str;
  for (var i in arr) {
    // iterate on res, not str
    // res = str.replace(arr[i], "<b>" + arr[i] + "</b>");
    res = res.replace(arr[i], "<b>" + arr[i] + "</b>");
  }
  return (
    <div className="App">
      <span dangerouslySetInnerHTML={{ __html: res }} /> <br />
      <br /> 
      expected result: <br />
      my name is <b>ron</b> and his name is <b>ben</b>
    </div>
  );
}

Answer 2

我认为问题在于，您没有在此处连接结果。

 let res = "";
  for (var i in arr) {
    res = str.replace(arr[i], "<b>" + arr[i] + "</b>");
  }

必须如下所示。

 let res = str;
  for (var i in arr) {
    res = res.replace(arr[i], "<b>" + arr[i] + "</b>");
  }