如何在 Next.js 中安全地去除 HTML 标签并显示纯文本内容-html教程-PHP中文网

如何在 Next.js 中安全地去除 HTML 标签并显示纯文本内容

在 Next.js 中渲染富文本字段（如 Tenis）时，若需仅显示纯文本（如 “Tenis”），不可直接使用 dangerouslySetInnerHTML，而应通过 DOM 解析安全剥离 HTML 标签。本文介绍一种兼容服务端与客户端、零依赖的可靠方案。

在 next.js 中渲染富文本字段（如 `

tenis

`）时，若需仅显示纯文本（如 “Tenis”），不可直接使用 `dangerouslySetInnerHTML`，而应通过 DOM 解析安全剥离 HTML 标签。本文介绍一种兼容服务端与客户端、零依赖的可靠方案。

在 Next.js 应用中，常遇到后端返回带 HTML 标签的富文本内容（例如 storeDetail?.translation?.description 值为 "

Tenis

"），但 UI 要求仅展示纯文本——即去除所有标签，保留可读内容。直接使用 innerHTML 渲染存在 XSS 风险，且 SSR 环境下 document 不可用，因此需采用兼顾安全性与服务端渲染（SSR/SSG）的处理方式。

✅ 推荐做法：封装一个安全的 stripHtmlTags 工具函数，并做环境适配：

// utils/stripHtmlTags.ts
export const stripHtmlTags = (html: string | null | undefined): string => {
  if (!html || typeof html !== 'string') return '';

  // 客户端：使用 DOM API（最准确，支持嵌套、实体解码等）
  if (typeof window !== 'undefined') {
    const div = document.createElement('div');
    div.innerHTML = html;
    return div.textContent || div.innerText || '';
  }

  // 服务端（Node.js）：使用正则作为轻量 fallback（适用于简单标签）
  // ⚠️ 注意：正则无法处理复杂 HTML（如注释、script、属性中的 > 等），仅作降级
  return html.replace(/]*>/g, '').replace(/&[a-zA-Z#][a-zA-Z0-9;]*/g, (match) => {
    const decoded = match === ' ' ? ' ' : match;
    return decoded.replace(/&([a-z]+);/gi, (_, entity) => {
      const map: Record<string string> = { amp: '&', lt: '', quot: '"', apos: "'" };
      return map[entity.toLowerCase()] || match;
    });
  }).trim();
};</string>

在组件中使用（支持 SSR/CSR）：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

import { stripHtmlTags } from '@/utils/stripHtmlTags';

function StorePage({ storeDetail }: { storeDetail: Store }) {
  const cleanDescription = stripHtmlTags(storeDetail?.translation?.description);

  return (
    <div>
      <h2>Description</h2>
      <p>{cleanDescription}</p> {/* 渲染为纯文本 "Tenis" */}
    </div>
  );
}

? 关键注意事项：

✅ 安全优先：该方案不执行脚本、不解析 <script> 或事件属性，避免 XSS；</script>
✅ SSR 友好：通过 typeof window !== 'undefined' 判断运行环境，服务端使用稳健正则降级；
⚠️ 正则局限性：服务端正则仅适用于结构简单、无恶意嵌套的 HTML；若数据源可信且含复杂格式（如
Hello World
），建议在 API 层返回纯文本字段，或使用 DOMPurify + jsdom（仅限服务端）增强解析能力；
? 国际化兼容：自动处理 HTML 实体（如 ñ → ñ），确保多语言文本正确显示。

? 进阶建议：对于高频使用的富文本字段，可在 getServerSideProps 或 getStaticProps 中提前清洗，减少客户端计算开销；若项目已引入 react-html-parser 或 dompurify，也可结合其 getTextContent() 方法替代自定义逻辑。

最终效果：

Tenis

→ "Tenis"，干净、安全、可维护。