Replace all strings and wrap as html

Question

I want to find and replace strings in html and replace them as tags.
from my name is ron and his name is ben
to my name is <b>ron</b> and his name is <b>ben</b>

Here is my code, works partially: 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>
  );
}

I think maybe you didn't save your [codesandbox](https://codesandbox.io/s/bold-wood-tzith). All I see is the default react template. — Drew Reese, Mar 30 '20 at 06:45

score 1 · Accepted Answer · answered Mar 30 '20 at 07:31

You are only ever updating res from the original string versus incrementally updating res, so the last replace operation trumps all.

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

This is correct, you are replacing str in the first loop, and then replacing the original value again in the second. This ignores the changes made in the first — Richard Price, Mar 30 '20 at 07:34

score 0 · Answer 2 · answered Mar 30 '20 at 06:47

0

I think the problem is that, you are not concatenating the results here.

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

This must be like below.

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

answered Mar 30 '20 at 06:47

Praveenkumar

2,056
1
9
18

Not working, please use my link: https://stackblitz.com/edit/react-gjriyz – SexyMF Mar 30 '20 at 07:27

Replace all strings and wrap as html

2 Answers2