替换所有字符串并换行为 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

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

 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>");
  }

Answer 2

您只是从原始字符串更新 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>
  );
}

替换所有字符串并换行为 html

Replace all strings and wrap as html

reactjs

grunt-string-replace