问题描述
我创建了一个显示招聘信息的 React 应用。当我点击列表中的职位发布时,会显示该特定职位发布的详细信息。
我试图以与在源中格式化的方式相同的方式显示职位发布的正文。为此,我尝试使用以下代码:
<div id="apply-Now" className="apply-section">
<h3>How to apply.</h3>
<div dangerouslySetInnerHTML={{ __html: currentJob.description }}></div>
</div>
然而,当组件被渲染时,内容没有被格式化并且以没有适当格式的纯文本显示。
这是一个尚未格式化的示例:
__"Application"__
一词应为粗体,网站链接应为实际链接,“单击此处获取申请表”链接也应如此。
我从 API 调用中返回的数据与上述相同:
加入我们! - 我们期待通过“申请”表格收到您的申请 您的联系方式:拉尔夫·乌尔曼 电话:089/ 5511 333783 https://www.consorsfinanz.de/karrier Click here for the application form!”
^^ 即使在 StackOverflow 上面它也能工作!但我无法让它在我的应用中运行!
我已经折腾了几个小时试图解决这个问题,我什至不明白为什么它不起作用。
解决方法
这听起来像是一个算法挑战。抱歉,认为它可以以优雅的方式完成,但正则表达式将是更好的选择
- 使用正则表达式匹配两个下划线之间的任何内容
- 在每个匹配项中,替换删除下划线并将每个元素包裹在
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'))
如果您需要任何说明,请告诉我。