React中如何移除字符串HTML标签并保留正确格式？

处理思路 #

不能一次性把所有标签替换成空格，需要分阶段精准处理：

1. 拆分段落：将转义后的</p>替换为换行符，同时移除<p>标签，让每个原段落内容自动换行
2. 清除剩余标签：删除所有转义后的非段落标签（如<span>、<br>）
3. 替换特殊空格：把 转换为普通空格
4. 清理冗余空格：合并行内连续空格，过滤空行及行首尾多余空格

实现代码 #

import { useState, useEffect } from 'react';

function App() {
  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 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(() => {
    let processed = string;
    
    // 1. 处理段落标签，拆分内容为换行
    processed = processed.replace(/<\/p>/gi, '\n').replace(/<p>/gi, '');
    
    // 2. 移除所有其他转义HTML标签
    processed = processed.replace(/<[^>]+>/gi, '');
    
    // 3. 替换特殊空格实体
    processed = processed.replace(/ /gi, ' ');
    
    // 4. 清理多余空格与空行
    processed = processed.split('\n')
      .map(line => line.trim().replace(/\s+/g, ' '))
      .filter(line => line !== '')
      .join('\n');

    setString(processed);
  }, []);

  return (
    <pre>{string}</pre>
  );
}

export default App;

效果说明 #

处理后会得到符合预期的格式：

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
!

内容的提问来源于stack exchange，提问作者John Doe