0

我创建了一个显示招聘信息的 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/karrier 点击此处获取申请表！"

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

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

4

1 回答 1

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

如果您需要任何澄清，请告诉我。

于 2021-02-17T21:19:06.707 回答