Question

我有一个json回复

Indicator:true
content:"<a href=somelink target="_blank">Click here to open your message</a>"

我需要将content的值转换为链接。现在它是在字符串中。如何使a href成为实际链接

不幸的是，以下代码无效

let content = res.content
var wrapper= document.createElement('div');
wrapper.innerHTML= '<div>'+content+'</div>';
var div2 = wrapper.firstChild;

Answer 1

您可以使用dangerouslySetInnerHTML直接在React中呈现HTML代码。

createMarkup(content) {
  return {__html: content};
}

convertFn(content) {
  return <div dangerouslySetInnerHTML={createMarkup(content)} />;
}

getLink(){
   ... get json response ...
   let content = res.content;
   let linkContent = this.convertFn(content);
}

编辑：这是React.js的具体示例。

Answer 2

原因是引号。你的字符串以目标结束。您应该将somelink和_blank内部引号与放置整个内容的内容区分开来例如：

content='<a href="somelink" target="_blank"></a>'

或

content="<a href='somelink' target='_blank'></a>"

修改有些人误解了我的说法，因为他没有在 somelink 之外加上引号。这并不是说。 查看目标。为什么_blank为黑色，而其余内容为红色？ 此处使用的引用类型非常重要。

Answer 3

使用dangerouslySetInnerHtml prop将存储在字符串中的任何html转换为实际的html标记。

例如。

htmlToText(content) {
  return {__html: content};
}

render() {
    return (
        <div dangerouslySetInnertml={this.htmlToText(yourHtmlString)} />
    )
}

Answer 4

或可以转义

content = "<a href=\"somelink\" target=\"_blank\">Click here to open your message</a>"

请安装Prettier以获得编辑帮助。

Answer 5

我发现您的代码非常有效，如下面的代码段所示。

let content = '<a href=somelink target="_blank">Click here to open your message</a>';
var wrapper = document.createElement('div');
wrapper.innerHTML = '<div>' + content + '</div>'; //No need to put in div
let div2 = wrapper.firstChild;
let a = div2.firstChild;
console.log(a.innerText)
console.log(a.getAttribute('href'), a.getAttribute('target'));

将字符串转换为链接 - javascript

5 个答案: