Next.js中去除HTML标签显示变量内容的实现方法

嘿，我完全懂你遇到的困扰——从接口拿到的描述字段带着HTML标签，直接渲染的话连标签一起显示出来了，确实很影响体验！这里有两个实用的方法帮你解决这个问题：

方法一：正则表达式快速去除标签（通用所有组件类型） #

如果你的HTML结构比较简单（比如只有<p>这种单层标签），用正则表达式就能快速搞定。先写一个工具函数来剥离标签：

const stripHtmlTags = (html) => {
  // 先判断是否有值，避免空值报错
  if (!html) return '';
  // 匹配所有尖括号包裹的内容并替换为空
  return html.replace(/<[^>]*>/g, '');
};

然后在组件里直接调用这个函数就行：

<p>{stripHtmlTags(storeDetail?.translation?.description)}</p>

这个方法的好处是轻量，不管是服务器组件还是客户端组件都能用，对付简单的标签完全足够。不过如果遇到嵌套复杂的HTML，正则可能会有遗漏，这时候可以试试下面的方法。

方法二：用DOMParser解析获取纯文本（仅客户端组件） #

如果你的HTML结构比较复杂，或者想更稳妥地提取纯文本，可以用浏览器的DOMParser API。不过这个API只能在客户端环境使用，所以要给组件加上'use client'指令：

'use client';

const stripHtmlTags = (html) => {
  if (!html) return '';
  const parser = new DOMParser();
  // 把HTML字符串解析成DOM文档
  const doc = parser.parseFromString(html, 'text/html');
  // 获取body的纯文本内容
  return doc.body.textContent || '';
};

// 使用方式和上面一样
<p>{stripHtmlTags(storeDetail?.translation?.description)}</p>

这个方法会把HTML真正解析成DOM结构，再提取文本，比正则更可靠，能处理各种复杂的HTML嵌套、特殊字符等情况。

备注：内容来源于stack exchange，提问作者dibase