反应 - 危险地SetInnerHTML被显示为纯文本

如何解决反应 - 危险地SetInnerHTML被显示为纯文本

我创建了一个显示招聘信息的 React 应用。当我点击列表中的职位发布时，会显示该特定职位发布的详细信息。

我试图以与在源中格式化的方式相同的方式显示职位发布的正文。为此，我尝试使用以下代码：

<div id="apply-Now" className="apply-section">
    <h3>How to apply.</h3>
    <div dangerouslySetInnerHTML={{ __html: currentJob.description }}></div>
</div>

然而，当组件被渲染时，内容没有被格式化并且以没有适当格式的纯文本显示。

这是一个尚未格式化的示例：

__"Application"__ 一词应为粗体，网站链接应为实际链接，“单击此处获取申请表”链接也应如此。

我从 API 调用中返回的数据与上述相同：

加入我们！ - 我们期待通过“申请”表格收到您的申请 您的联系方式：拉尔夫·乌尔曼 电话：[phone] https://www.consorsfinanz.de/karrier Click here for the application form!”

^^ 即使在 StackOverflow 上面它也能工作！但我无法让它在我的应用中运行！

我已经折腾了几个小时试图解决这个问题，我什至不明白为什么它不起作用。

解决方法

这听起来像是一个算法挑战。抱歉，认为它可以以优雅的方式完成，但正则表达式将是更好的选择

1. 使用正则表达式匹配两个下划线之间的任何内容
2. 在每个匹配项中，替换删除下划线并将每个元素包裹在 strong 标签中

  const mdBoldToStrong = (text) => {
const surroundingUnderscores = new RegExp(/__(.*?)__/g)
return text
  .replace(surroundingUnderscores,(word) => {
    return `<strong>${word.replace(/__/g,'')}</strong>`
  })
  }

console.log(mdBoldToStrong('__Application__'))
console.log(mdBoldToStrong('Text__Application__Text__'))
console.log(mdBoldToStrong('__Text____Application__Text'))

如果您需要任何说明，请告诉我。