Convert string to link - javascript

Question

I have a json response

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

I need to convert the value of content to link. Right now it is in string. how to make it a href the actual link

Unfortunately the below code isn't working

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

tried `wrapper.innerHTML= content;` ? and use that wrapper directly ? — Jeffin, Jan 02 '18 at 07:28
Please show all relevant code and proper data structure. What is shown has mismatched quotes and is not runnable. See [mcve] — charlietfl, Jan 02 '18 at 07:30
Duplicate of [**Render HTML string as real HTML in a React component**](https://stackoverflow.com/questions/39758136/render-html-string-as-real-html-in-a-react-component.) — Mayank Shukla, Jan 02 '18 at 07:31

raksheetbhat · Accepted Answer · 2018-01-02T08:38:02.480

1

You can use dangerouslySetInnerHTML to directly render HTML code in React.

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);
}

Edit: This is a React.js specific example.

edited Jan 02 '18 at 08:38

answered Jan 02 '18 at 07:33

raksheetbhat

850
2
11
25

@raksheetbhat Where are you passing the content inside `createMarkup()`? – Matarishvan Jan 02 '18 at 07:42
The OP is not using React, so I think this is not relevant – Patrick Hund Jan 02 '18 at 08:03

score 1 · Answer 2 · edited Jan 02 '18 at 08:15

1

The reason is the quotation symbols. your string ends at target. You should put the somelink and the _blank inside quotation marks different from what you put the entire content in ex:

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

or

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

EDIT: some people have misunderstood me as to saying its because he didn't put quotes outside of somelink. its not that. look at target. why is _blank black while the rest of content is reddish? It's the type of quotes used that matter here.

edited Jan 02 '18 at 08:15

theAlexandrian

870
6
18

answered Jan 02 '18 at 07:33

Ashwin K Joseph

371
2
4
14

No, Thats not the point.. the link quotation has nothing to do. – Matarishvan Jan 02 '18 at 07:37
it does, after all the string actually ends at target and resumes after blank so the part in between is treated as not string and that causes the problems – Ashwin K Joseph Jan 02 '18 at 07:39
the string is long.. for that sake, i've put it short – Matarishvan Jan 02 '18 at 07:41
so how does the quototion marks affect the length? were u thinking I was talking about you putting somelink instead of the actual link? im not please read the answer again – Ashwin K Joseph Jan 02 '18 at 07:42
`somelink` is dummy text i've put.. which has the essential link with quotes.. so this is out of context – Matarishvan Jan 02 '18 at 07:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162319/discussion-between-ashwin-k-joseph-and-matarishvan). – Ashwin K Joseph Jan 02 '18 at 07:48
I understand that its dummy and actually it will have value... but look at the target value you put. I dont think you understand what I'm saying here.. its the quote types like " or ' that matter here . ln simpler words, why isnt the _blank reddish like the rest of the string in content? – Ashwin K Joseph Jan 02 '18 at 07:52
I pulled my dv but I really think that typos are supposed to be a comment. – vibhor1997a Jan 02 '18 at 08:00
@Matarishvan , Joseph is right about the link. `content:"Click here to open your message"` is not that correct, either it is a typo here, or it is the cause of your problem. The Js parser is taking only `" – theAlexandrian Jan 02 '18 at 08:02
The thing is , the whole link i'm getting it as a value of json.. So how do you take control over that part? – Matarishvan Jan 02 '18 at 08:17
In theory, when parsing the JSON, escape the inner quotes. – theAlexandrian Jan 02 '18 at 08:34

score 1 · Answer 3 · answered Jan 02 '18 at 10:23

use dangerouslySetInnerHtml prop to convert any html stored inside string into actual html markup.

for e.g.

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

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

score -1 · Answer 4 · answered Jan 02 '18 at 07:42

-1

or can be escaped

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

please install Prettier for editor help.

answered Jan 02 '18 at 07:42

rajeev

64
5

2

This is not an answer to the question, it should be a comment – Patrick Hund Jan 02 '18 at 08:01

score -1 · Answer 5 · answered Jan 02 '18 at 07:48

I find your code pretty working, As in the following snippet.

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

Convert string to link - javascript

5 Answers5