React - dangerouslySetInnerHTML 被显示为纯文本

Question

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

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

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

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

这是一个没有被格式化的例子：

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

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

加入我们！ - 我们期待您通过“申请”表格提交申请您的联系人：Ralph Ullmann 电话：089/ 5511 333783 https://www.consorsfinanz.de/karrierClick here for the application form!"

^^ 甚至在 StackOverflow 上也能正常工作！但我无法让它在我的应用程序中运行！

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

Answer 1

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

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'))

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