javascript - How to display html tag in string? - Stack Overflow

admin管理员组

文章数量:1410737

There is a requirement that retrieving some msg including HTML tag from the back-end, how to rightly display HTML tag but not original tag character.

msg like below ( displays in quotation marks ) :

"This is a <a href="#">link</a>, for a test."

right display:

"This is a link, for a test."

There is a requirement that retrieving some msg including HTML tag from the back-end, how to rightly display HTML tag but not original tag character.

msg like below ( displays in quotation marks ) :

"This is a <a href="#">link</a>, for a test."

right display:

"This is a link, for a test."

• javascript
• html

Share Improve this question Follow asked Mar 29, 2019 at 4:57 licaomenglicaomeng 94722 gold badges1414 silver badges2828 bronze badges 6

• 2 Can you please show the snippet. – Maheer Ali Commented Mar 29, 2019 at 4:58
• 4 What exactly is the problem? – Aniket G Commented Mar 29, 2019 at 4:58
• 1 You have to bypass or escape the special characters.Here it is double quotes. Add a slash \ before it and you should be fine. – Krishna Prashatt Commented Mar 29, 2019 at 4:59
• What did you try? What gone wrong? – Kaiido Commented Mar 29, 2019 at 5:06
• @Francisaskquestion to attain what? There is simply no way to attain what it is to be attained. Proof: you are the only one who understood they wanted to keep the markup unparsed. – Kaiido Commented Mar 29, 2019 at 5:10

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 1

It seems you want display string as html. You just need to add it as innerHTML. Not innerText or textContent

Wrong Display

let str = `This is a <a href="#">link</a>, for a test.`
document.body.innerText += str;

Right Display

let str = `This is a <a href="#">link</a>, for a test.`
document.body.innerHTML += str;

If you want quotes around string use Template Strings

let str = `"This is a <a href="#">link</a>, for a test."`
document.body.innerHTML += str;

You can render HTML using document.write()

document.write(`This is a <a href="#">link</a>, for a test.`);`

But to append existing HTML string, you need to get the id of the node/tag under which you want to insert your HTML string.

There are two ways by which you can possibly achieve this:

Using DOM -

var tag_id = document.getElementById('tagid'); 
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode(`This is a <a href="#">link</a>, for a test.`)); 
node.appendChild(newNode);

Using innerHTML -

var tag_id = document.getElementById('tagid'); 
tag_id.innerHTML(`This is a <a href="#">link</a>, for a test.`);

Also You can use jQuery html parser to do that like this:

var html =  `This is a <a href="#">link</a>, for a test.`;
html = $.parseHTML( html);
$("#tagId").append(html);

I hope this would help you. Thanks

Escaping -

You should escape any quotes found within your string. Place the \ in front of them to escape.

console.log("This is my string with quotes \" \" ")

You can use innerHTML for this.

Example:

document.getElementById(id).innerHTML  = yourTextWithHtml

本文标签： javascriptHow to display html tag in stringStack Overflow