如何在Next.js中移除WordPress文章渲染文本的HTML标签

我是Next.js新手，正在尝试在Next.js应用中获取WordPress博客内容，但返回的内容中带有HTML标签，请问该如何移除这些标签？以下是我的实现代码：

import React from 'react';

const SingleBlog = (data) => {
    return (
        <>
            {console.log(data.data)}
            {data.data.map((e, index) => {
                return (
                    <>
                        <div>
                            <h1 key={index}>{e.title.rendered}</h1>
                            <p>{e.content.rendered}</p>
                        </div>
                    </>
                )
            })}
        </>
    );
};

export default SingleBlog;
export async function getStaticProps() {
    const res = await fetch(`http://spyonmobiles.com/wp-json/wp/v2/posts`)
    const data = await res.json()

    if (!data) {
        return {
            notFound: true,
        }
    }
    return {
        props: { data } // will be passed to the page component as props
    }
}

问题效果截图：

解决方案 #

方法1：正确渲染HTML内容（保留原格式） #

如果想保留WordPress内容里的排版格式（比如段落、加粗、列表等），可以用React的dangerouslySetInnerHTML属性直接渲染HTML代码，这是处理可信HTML内容的常用方式。

修改组件代码，将原有的<p>{e.content.rendered}</p>替换为：

<div dangerouslySetInnerHTML={{ __html: e.content.rendered }} />

完整修改后的组件示例：

import React from 'react';

const SingleBlog = ({ data }) => { // 解构props让代码更简洁规范
    return (
        <>
            {data.map((e, index) => {
                return (
                    <div key={index}> {/* key要绑定在外层容器上 */}
                        <h1>{e.title.rendered}</h1>
                        <div dangerouslySetInnerHTML={{ __html: e.content.rendered }} />
                    </div>
                )
            })}
        </>
    );
};

export default SingleBlog;

export async function getStaticProps() {
    const res = await fetch(`http://spyonmobiles.com/wp-json/wp/v2/posts`)
    const data = await res.json()

    if (!data) {
        return {
            notFound: true,
        }
    }
    return {
        props: { data }
    }
}

方法2：完全移除HTML标签，只保留纯文本 #

如果不需要任何格式，只想提取纯文本内容，可以写一个简单的工具函数，用正则表达式剥离所有HTML标签：

// 定义剥离HTML标签的工具函数
const stripHtmlTags = (html) => {
    return html.replace(/<[^>]*>/g, '');
};

然后在组件中调用这个函数处理内容：

<p>{stripHtmlTags(e.content.rendered)}</p>

完整示例：

import React from 'react';

const stripHtmlTags = (html) => {
    return html.replace(/<[^>]*>/g, '');
};

const SingleBlog = ({ data }) => {
    return (
        <>
            {data.map((e, index) => {
                return (
                    <div key={index}>
                        <h1>{e.title.rendered}</h1>
                        <p>{stripHtmlTags(e.content.rendered)}</p>
                    </div>
                )
            })}
        </>
    );
};

export default SingleBlog;

export async function getStaticProps() {
    const res = await fetch(`http://spyonmobiles.com/wp-json/wp/v2/posts`)
    const data = await res.json()

    if (!data) {
        return {
            notFound: true,
        }
    }
    return {
        props: { data }
    }
}

注意事项 #

• 使用dangerouslySetInnerHTML时，确保你的WordPress内容是可信的（比如自己发布的内容），避免XSS攻击风险。
• 正则表达式剥离标签的方法适合常规博客内容，若遇到嵌套复杂的HTML结构，可能需要更严谨的处理逻辑，但大部分场景下足够用。

内容的提问来源于stack exchange，提问作者Shoaib Dev