Javascript 将保存为文本的html发送回数据库并发送回浏览器？

所以我正在尝试建立一种博客网站。用户可以通过所见即所得（wysiwyg）保存博客，并以文本字符串的形式保存到数据库中。不过我遇到了一个问题。 当我将其转储回浏览器时，它将全部转义并呈现为一个巨大的字符串。为了解决这个问题，我做了以下几点：

renderContent = () => {
  if (this.props.content_type === "blog") {
    let parser = new DOMParser();
    let title = parser.parseFromString(this.props.title, "text/html");
    let decoded_title = title.body.textContent;

    let content = parser.parseFromString(this.props.content, "text/html");
    let decoded_content = content.body.textContent;

    return (
      <div>
        <div>
          <img src={this.props.hero_image} alt="hero image" />
        </div>
        <div>
          <button onClick={this.props.handleClose}>Back</button>
        </div>
        <div>{decoded_title}</div>
        <div>{decoded_content}</div>
      </div>
    );
  }
};

renderContent=（）=>{
如果（this.props.content_type==“blog”）{
让parser=newdomparser（）；
让title=parser.parseFromString（this.props.title，“text/html”）；
让解码的标题=title.body.textContent；
让content=parser.parseFromString（this.props.content，“text/html”）；
让解码内容=content.body.textContent；
返回(
返回
{解码标题}
{解码内容}
);
}
};

我的问题是，这似乎使任何断行消失，所有链接消失，而内容中的图像现在根本不显示

解码前的原始内容如下所示：

<p>
  <img
    src="https://img.aws.livestrongcdn.com/ls-article-image-673/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/a6e0848c23aa4d46820e944e24c4b7f2.jpg"
    alt="Your dog wants to help when you're upset, and here's proof"
  />
</p>
<section class="subsection article__section__step article_module_section">
  <p class="article-section__content" data-dmc="section">
    Can dogs understand when we are distressed and respond accordingly?
    According to new research, man&rsquo;s best friend not only notices when
    you (or other humans) are upset, but will actually adapt their behavior as
    a result. What a good boy!
  </p>
  <p class="article-section__content" data-dmc="section">
    The study, published in the journal&nbsp;
    <a
      class="markdown-anchor"
      href="https://link.springer.com/article/10.3758%2Fs13420-018-0332-3"
      target="_blank"
      rel="nofollow noopener"
    >
      Learning &amp; Behavior
    </a>
    , found that canines were faster to respond to humans who sounded upset
    versus humans who sounded calm.
  </p>
  <p class="article-section__content" data-dmc="section">
    &ldquo;It&rsquo;s really cool for us to know that dogs are so sensitive to
    human emotional states,&rdquo; Emily Sanford, a graduate student in
    psychological and brain sciences at Johns Hopkins University and co-author
    of the study, explained to&nbsp;
  </p>
</section>

狗能理解我们的痛苦并做出相应的反应吗？
根据最新研究，男性；她最好的朋友不仅注意到
你（或其他人）很沮丧，但实际上会随着时间的推移改变他们的行为
结果。多好的孩子啊！


这项研究发表在《华尔街日报》上
，发现犬科动物对听起来不安的人反应更快
对那些听起来很平静的人。


&ldquo；It&rsquo；It’知道狗对狗很敏感，这对我们来说真是太酷了
人类的情感状态，&rdquo；艾米莉·桑福德，一名美国的研究生
约翰·霍普金斯大学的心理学和脑科学，合著者
研究的结果，解释给

在到达客户端之前，是否有一种方法可以在节点端执行此操作？

您可以使用该方法从字符串呈现HTML

示例

const content=`



狗能理解我们的痛苦并做出相应的反应吗？
根据最新研究，男性；她最好的朋友不仅注意到
你（或其他人）很沮丧，但实际上会随着时间的推移改变他们的行为
结果。多好的孩子啊！


这项研究发表在《华尔街日报》上
，发现犬科动物对听起来不安的人反应更快
对那些听起来很平静的人。


&ldquo；It&rsquo；It’知道狗对狗很敏感，这对我们来说真是太酷了
人类的情感状态，&rdquo；艾米莉·桑福德，一名美国的研究生
约翰·霍普金斯大学的心理学和脑科学，合著者
研究的结果，解释给

`
函数App（）{
返回(
);
}
render（，document.getElementById（“根”））
您只需将其放入危险的HTML道具：

<div dangerouslySetInnerHTML={{__html: this.props.title}}/>
<div dangerouslySetInnerHTML={{__html: this.props.content}}/>

谢谢。博客只能由高级用户（如管理员）输入，但我仍然会研究这个清理包，因为你永远不知道人们将要做什么。这是真的。即使是你的编辑也没有恶意。当他们从其他来源复制内容而没有注意到时，可能会出现问题。
const cleanTitle = sanitizeHtml(this.props.title, {
  allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
  allowedAttributes: {
    'a': [ 'href' ]
  },
  allowedIframeHostnames: ['www.youtube.com']
});