javascript - 使用模板将 https 链接替换为

Question

我在替换 api 的答案并正确格式化时遇到问题

answerFromAPI = "textword textword textword textword textword.\n\nFeel free to ask me questions from this site:\nhttps://google.com  \n"

我想按如下方式格式化和呈现它:

textword textword textword textword textword.


Feel free to ask me questions from this site:

https://google.com     /*this should be clickable link*/

为此，我创建了两个函数。第一个用于文本链接

 let textLink = answerFromAPI.replace(/(((https?\:\/\/)|(www\.))(\S+))/gi,
           function (x) {
             console.log(x)
            return '<a href="' + x + '" target="_blank">' + x + '</a>';
         })

第二个换行

let newLine = answerFromAPI.replace(/(\n?\\n)/ig, function(n) {
            console.log(n)
            return '<br />'
          })

我试图在将这些应用到函数之后将其插入数组让我们以测试链接为例

array= []
array.push(textLink)

之后我在 jsx 中渲染数组

render() {
let temp = []

this.array.map((a,index)=>{
temp.push(<p>{a}</p>)}
)}

并返回如下

return <div>
{temp}
</div>

如何在前端正确呈现我的消息。我尝试了多种方式，但我遇到了一个问题，比如函数的响应是作为字符串而不是 HTML 标记传递的。

我该怎么做？

Answer 1

您需要在元素上设置 innerHTML 属性以使其呈现 HTML 而不是字符串。

return <div innerHTML={temp} />;

参见 https://stenciljs.com/docs/templating-jsx#complex-template-content了解更多详情。