在 Next.js 中，当变量（如 storeDetail?.translation?.description）包含带 HTML 标签的字符串（例如 Tenis）时，可使用 DOM 解析方式提取纯文本，避免直接渲染 HTML 导致的安全与样式问题。
在 next.js 中，当变量（如 `storedetail?.translation?.description`）包含带 html 标签的字符串（例如 `
tenis
`）时，可使用 DOM 解析方式提取纯文本，避免直接渲染 HTML 导致的安全与样式问题。在服务端渲染（SSR）或静态生成（SSG）场景下，直接使用 document.createElement 可能引发“ReferenceError: document is not defined”错误，因为服务端环境无 DOM。因此，需确保该逻辑仅在客户端执行，或采用更健壮的跨环境方案。
推荐做法是封装一个安全的纯文本提取函数，并配合 React 的 useEffect 或 useClient（Next.js 13.4+）确保运行于浏览器环境：
// utils/html.ts
export const stripHtmlTags = (htmlString: string | null | undefined): string => {
if (!htmlString) return '';
// 客户端安全处理：利用 DOM API
if (typeof window !== 'undefined') {
const div = document.createElement('div');
div.innerHTML = htmlString;
return div.textContent || div.innerText || '';
}
// 服务端降级：使用正则（仅适用于简单标签，不推荐用于不可信输入）
// ⚠️ 注意：正则无法完全替代 DOM 解析，存在 XSS 风险，仅作兜底
return htmlString.replace(/<[^>]*>/g, '');
};
// 在组件中使用
import { stripHtmlTags } from '@/utils/html';
function StoreDetail({ storeDetail }) {
const plainDescription = stripHtmlTags(storeDetail?.translation?.description);
return (
<div>
<h2>Description</h2>
<p>{plainDescription}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11098" title="Node.js 可靠编程"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="Node.js 可靠编程" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11098" title="Node.js 可靠编程">Node.js 可靠编程</a>
<p>Node.js 可靠编程技能。避免事件循环阻塞、异步陷阱、ESM 兼容问题和内存泄漏。触发词：Node.js 开发、async/await、流处理、性能优化、安全编码。</p>
</div>
<a href="/xiazai/skill11098" title="Node.js 可靠编程" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> {/* 安全显示 "Tenis" */}
</div>
);
}✅ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 永远不要用 dangerouslySetInnerHTML 渲染未经处理的富文本字段，否则将暴露 XSS 漏洞；
- 若数据来源可信且结构简单，可考虑服务端预处理（如 API 返回前剥离标签），提升首屏性能与安全性；
- 对于复杂 HTML（含 script、style、iframe 等），务必依赖 DOM 解析而非正则，以保证语义正确性与安全性；
- Next.js App Router 中，若组件为 Client Component（显式使用 'use client'），可放心调用 document 相关 API。
综上，stripHtmlTags 函数兼顾了兼容性、安全性与可维护性，是 Next.js 应用中处理带标签文本的推荐实践。
