React项目中如何去除TVmaze API返回summary的HTML标签仅显示文本

从TVmaze API获取的数据中，summary字段的文本被<p>等HTML标签包裹，需要在React组件渲染时仅展示纯文本内容，而非HTML标签。现有Home组件代码如下：

const Home = () => {    
  const [movies, setMovies] = useState([]);  

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { data } = await axios.get("https://api.tvmaze.com/search/shows?q=all");
        setMovies(data);
        console.log(data);
      } catch {}
    };
    fetchData();
  }, []);

  return (
    <div className="movieCards-container ">
      <h1 className="heading"> Recommended Movies</h1>
      <div className=" container-custom d-flex align-items-center justify-content-center pb-5 ">
        <div className="row justify-content-center">
          {movies.map((item, index) => {
            return (
              <div className=" col-12 col-md-6 col-lg-4 d-flex align-items-center justify-content-center ">
                <MovieCard 
                  key={item.show.id}
                  id={item.show.id} 
                  name={item.show.name} 
                  image={item.show.image.original}
                  summary={item.show.summary}
                  showday={item.show.schedule.days}
                  showtime={item.show.schedule.time}
                />
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

以下几种方法可以实现提取HTML中的纯文本：

方法1：正则表达式移除HTML标签 #

实现一个简单的工具函数，用正则匹配并移除所有HTML标签：

// 工具函数：移除所有HTML标签
const stripHtmlTags = (html) => {
  if (!html) return '';
  return html.replace(/<[^>]*>/g, '');
};

在组件中调用该函数处理summary：

<MovieCard 
  // 其他props不变
  summary={stripHtmlTags(item.show.summary)}
/>

该方法轻量高效，适合处理结构简单的HTML内容，但若遇到特殊嵌套标签或转义字符可能存在局限性。

方法2：使用浏览器原生DOMParser解析 #

利用浏览器的DOMParser API解析HTML，提取纯文本内容，这种方法更可靠，能处理复杂HTML结构：

// 工具函数：解析HTML并提取纯文本
const stripHtmlTags = (html) => {
  if (!html) return '';
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  return doc.body.textContent || '';
};

同样在组件中调用该函数处理summary即可。注意：如果你的项目涉及服务器端渲染（SSR），需要额外引入jsdom等库模拟浏览器环境。

方法3：使用第三方库（可选） #

若需要更灵活的HTML处理，可使用html-react-parser库，它能将HTML转换为React元素，也可提取纯文本：

首先安装依赖：

npm install html-react-parser

然后编写工具函数：

import parse from 'html-react-parser';

const getPlainText = (html) => {
  if (!html) return '';
  return parse(html, {
    replace: ({ children }) => children.join('')
  });
};

在组件中调用getPlainText处理summary即可。

内容的提问来源于stack exchange，提问作者Jayita Deb