如何从 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>;}