javascript - Removing html tags from string in React - Stack Overflow

IT技术

更新时间：2025-04-030

admin管理员组
文章数量:1341473

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 !

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</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 !

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

!

 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</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

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. !

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.</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. !

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.

!

 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.</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

Share Improve this question asked Dec 3, 2022 at 18:00 John Doe 531 gold badge1 silver badge5 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 8

Try this, this will erase all type of html tags, classes and css properties

const regex = /(<([^>]+)>)/gi;
const result = text.replace(regex, "");

DOMParser bined with a method to retrieve all text nodes would be more appropriate. And rather than an effect hook for this, consider passing a function to useState - that way, the state never gets set to the (undesirable) value with the HTML markup, but starts out as the replaced string without any re-renderings - or avoid state entirely now that it isn't being set anywhere.

const getTextContentOnly = (html) => {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const walker = document.createTreeWalker(
        doc.body, 
        NodeFilter.SHOW_TEXT, 
        null, 
        false
    );
    const texts = [];
    let node;
    while(node = walker.nextNode()) {
        texts.push(node.nodeValue);
    }
    return texts;
}
const App = () => {
     const texts = React.useMemo(() => getTextContentOnly(
    `<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.</span></p><p><br></p><p>!</p>`
    ), []);
    return texts.map((text, i) => <div key={i}>{text}</div>);
};

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg./react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

You can do like this.

export function Example() {
  // ...
  return (
    <div>
        <StoryOutput
          output={html.replace(/(<([^>]+)>)/gi, '')}
        />
    </div>
  )
}

本文标签： javascriptRemoving html tags from string in ReactStack Overflow

版权声明：本文标题：javascript - Removing html tags from string in React - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1743649149a2516018.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Removing html tags from string in React - Stack Overflow

3 Answers 3

更多相关文章