如何从 MongoDB 中的字符串解析 HTML 标签？

Question

作为练习，我正在从头开始构建博客。我将我的帖子正文存储在 MongoDB 中，它存储为一个巨大的字符串。我在该字符串中添加了一些随机的 html 标签以进行测试。解析那个长字符串以便读取然后使用 html 标记的通常方法是什么？堆栈是：JavaScript / React / Express / MongoDB一些代码：    function Posts({ posts }) {  const postLis = posts.map((post) => {    return (      <li key={post._id}>        <h1>{post.title}</h1>        <p>{post.body}</p>      </li>    );  });  return <ul>{postLis}</ul>;}我的测试 JSON：{"posts": [{"_id": "5f7af2f468478387e792a522","title": "Welcome to Explore Edinburgh(express test 1)","featuredPhoto": "/432425521","date": "10th September 2020, 14:25","tags": ["edinburgh","explore edinburgh"],"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum, quam vel<br>porta porta, elit mauris viverra diam, et pharetra nisl lorem<br>eget neque."},

Answer 1

您可以执行以下操作：

function Posts({ posts }) {

  const postLis = posts.map((post) => {

    return (

      <li key={post._id}>

        <h1>{post.title}</h1>

        <p dangerouslySetInnerHTML={{ __html: post.body }}></p>

      </li>

    );

  });

  return <ul>{postLis}</ul>;

}

如果因为无法确保内容安全而要解析它，可以使用html-react-parser：

use { parse } from 'html-react-parser';

function Posts({ posts }) {

  const postLis = posts.map((post) => {

    return (

      <li key={post._id}>

        <h1>{post.title}</h1>

        <p>{parse(post.body)}></p>

      </li>

    );

  });

  return <ul>{postLis}</ul>;

}