How to display html tag in string?

Question

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."

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, Mar 29 '19 at 04:59
@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, Mar 29 '19 at 05:10

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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;

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 29 '19 at 05:00

Maheer Ali

35,834
5
42
73

1

"*from the backend*" templates are useless. – Kaiido Mar 29 '19 at 05:05
@Kaiido He can just interpolate that string from backend to inside template literals – Maheer Ali Mar 29 '19 at 05:07
Ah.. that's how you interpreted this. For me it was coming from an AJAX request => already a string, no need for templates. But I now realize this question is even less clear than I first though. – Kaiido Mar 29 '19 at 05:08
1

Using `document.body.innerHTML += str` is a terrible way to add something to the DOM. It will often cause the JavaScript that works with the page to stop working, as it destroys the current DOM and recreates it. If you want to append some HTML text to the `document.body` then you should use [`document.body.insertAdjacentHTML('beforeend', str);`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML). If you want more information, see [In-page JavaScript stops when I use document.body.innerHTML += newHtmlText](https://stackoverflow.com/q/45215006/3773011). – Makyen Mar 29 '19 at 06:03

Thanthu · Answer 2 · 2019-03-29T05:11:44.657

0

You can use innerHTML for this.

Example:

document.getElementById(id).innerHTML  = yourTextWithHtml

edited Mar 29 '19 at 05:11

answered Mar 29 '19 at 05:01

Thanthu

4,399
34
43

Where did he mentioned that he is not using `innerHTML` – Maheer Ali Mar 29 '19 at 05:03
_You should use `innerHTML` for this_. How do you know he is not using innerHTML – Maheer Ali Mar 29 '19 at 05:08
Nothing bro have fun – Maheer Ali Mar 29 '19 at 05:10

score 0 · Answer 3 · answered Mar 29 '19 at 05:08

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

score 0 · Answer 4 · answered Mar 29 '19 at 05:09

0

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 \" \" ")

answered Mar 29 '19 at 05:09

Charlie

22,886
11
59
90

How to display html tag in string?

4 Answers4

Wrong Display

Right Display