Removing html tags from string in React

December 3, 2022

I am trying to remove tags from a string but keeping the order in tact using Regular expression. The string I have is this

General PowerThis contains some info. !enablebus atterminal: Name Terminalenable bus name Switch Busno ip domain-lookupip domain name region.google.com !

What I have tried so far is

 const [string, setString] = useState(
    `<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name&nbsp;Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.com</span></p><p><br></p><p>!</p>`
  );

  useEffect(() => {
    const regex = /(<([^>]+)>)/gi;
    const newString = string.replace(regex, " ");
    setString(newString);
  }, []);

What I get is this

General Power This contains some info. ! enable bus at terminal: Name Terminal enable bus name Switch Bus no ip domain-lookup ip domain name region .google.com !

The order I want is:

General Power

This contains some info.

enable

bus at

terminal: Name Terminal

enable bus name Switch Bus

no ip domain-lookup

ip domain name region.google.com

 const [string, setString] = useState(
    `<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name&nbsp;Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.com</span></p><p><br></p><p>!</p>`
  );

  useEffect(() => {
    const regex = /(<([^>]+)>)/gi;
    const newString = string.replace(regex, " ");
    setString(newString);
  }, []);

This is what I have tried so far

>Solution :

To preserve the order of the lines, you can use the String.prototype.split() method to split the string by the

tags, and then use String.prototype.replace() to remove the remaining HTML tags from each line.

Here is an example of how you could do this:

const [string, setString] = useState(
  `<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name&nbsp;Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.com</span></p><p><br></p><p>!</p>`
);

useEffect(() => {
  // Split the string by the `<p>` tags
  const lines = string.split("<p>");

  // Use `String.prototype.replace()` to remove the remaining HTML tags from each line
  const newString = lines.map(line => line.replace(/(<([^>]+)>)/gi, " ")).join("\n");

  // Set the new string
  setString(newString);
}, []);

This should give you the output you are looking for:

Copy code
General Power
This contains some info.

!
enable
bus at
terminal: Name Terminal
enable bus name Switch Bus
no ip domain-lookup
ip domain name region.google.com

!