Write pure text using Javascript?

Question

Is there a way to write text (and not decode special characters) using Javascript? I have tried document.write() but it appears to convert characters like & back to &, while JQuery's .text() keeps &.

My code

<script>document.write('&amp;');</script>

What it returns

What I want it to return

&amp;

score 3 · Accepted Answer · edited May 23 '17 at 10:27

3

Just convert all the & to & and it should work for you:

stringToBeWritten = "Hi&Hi - Hi&amp;Hi";
stringToBeWritten = stringToBeWritten.replace(/(&)/gi, "&amp;");
document.write(stringToBeWritten);

<script>
  stringToBeWritten = "Hi&Hi - Hi&amp;Hi";
  stringToBeWritten = stringToBeWritten.replace(/(&)/gi, "&amp;");
  document.write(stringToBeWritten);
</script>

ps: Don't use document.write() as it is not good. See Why is document.write considered a "bad practice"?

Solution 2

We can actually use the browser itself to make this happen.

function escapeStuff (unescaped) {
  DiV = document.createElement("div");
  DiV.innerText = unescaped;
  return DiV.innerHTML;
}

<input type="text" id="un" value="& <>" /> <input onclick="res.innerText = escapeStuff (un.value);" value="Escape it!" type="button" />
<div id="res"></div>

edited May 23 '17 at 10:27

Community

1
1

answered Nov 29 '15 at 17:17

Praveen Kumar Purushothaman

154,660
22
177
226

1

thank you, this did work and i will accept it in 15 minutes when it allows me. Also what should I use instead of `document.write()`? – ZomoXYZ Nov 29 '15 at 17:19
Use `theID.innerHTML` or `theID.innerText` or `theID.textContent`. – Praveen Kumar Purushothaman Nov 29 '15 at 17:19
How does document.write's implementation differ in each browser? – JJJ Nov 29 '15 at 17:24
Have a look at: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/write). – Praveen Kumar Purushothaman Nov 29 '15 at 17:25
Writing to a document that has already loaded without calling document.open() will automatically perform a document.open call. Once you have finished writing, it is recommended to call document.close(), to tell the browser to finish loading the page. The text you write is parsed into the document's structure model. In the example above, the h1 element becomes a node in the document. – Praveen Kumar Purushothaman Nov 29 '15 at 17:25
@Juhana Please see this: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – Praveen Kumar Purushothaman Nov 29 '15 at 17:26
Can you point to a specific answer in that question about different browsers? I don't see any at a first glance. – JJJ Nov 29 '15 at 17:27
@ccjmne, I see that now, I guess I would have to do many `.replace()` functions unless someone else finds a way. – ZomoXYZ Nov 29 '15 at 17:34
@Jaketr00 You don't need to do many... That's one. `/g` will make it global. – Praveen Kumar Purushothaman Nov 29 '15 at 17:35
@PraveenKumar but to then replace other characters like ``, `"`, `'`. – ZomoXYZ Nov 29 '15 at 17:36
@Jaketr00 Or if you need a quickie, as I said you before, this will take care of everything. `element.innerText = escaped; escaped = element.innerHTML;` - Do you understand this? `:)` – Praveen Kumar Purushothaman Nov 29 '15 at 17:36
@Jaketr00 ^ That works for what you asked. `:)` Should I update in the answer? – Praveen Kumar Purushothaman Nov 29 '15 at 17:37
@PraveenKumar yeah you should. – ZomoXYZ Nov 29 '15 at 17:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/96481/discussion-between-praveen-kumar-and-jaketr00). – Praveen Kumar Purushothaman Nov 29 '15 at 17:41
@Juhana Who downvoted my answer? Is there anything I can do to make it better? – Praveen Kumar Purushothaman Nov 29 '15 at 17:48
How should I know who downvoted? I'm just waiting for a reference to the claim that document.write's behavior is browser-dependent. – JJJ Nov 29 '15 at 17:50
@Juhana I just gave it to you and also updated it in the answer man! Have a look! – Praveen Kumar Purushothaman Nov 29 '15 at 17:51
@Juhana No man, just worried. Sorry if I am bothering you. Really sorry. – Praveen Kumar Purushothaman Nov 29 '15 at 17:51
[This](http://stackoverflow.com/questions/33985583/write-pure-text-using-javascript/33985599#comment55726813_33985599) still stands – I don't see how your link has any relevance. – JJJ Nov 29 '15 at 17:52
Read this @Juhana: **http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice** – Praveen Kumar Purushothaman Nov 29 '15 at 17:53
I have read it **and none of its answers say that implementation differs in each browser**. Yes, there are many reasons why document.write should be avoided, but browser compatibility is not one of them. – JJJ Nov 29 '15 at 17:54
@Juhana *Updated the answer*. – Praveen Kumar Purushothaman Nov 29 '15 at 17:55

ccjmne · Answer 2 · 2015-11-29T20:03:07.560

3

Actually, simply use element.textContent instead of document.write :)

For example, check this JSFiddle link or the code snippet below:

document.getElementById('myspan').textContent= 'Click &lt;HERE&gt;';
document.write('Click &lt;HERE&gt;');

With element.textContent: <span id="myspan"></span>
<br />
With document.write():

Update: replaced usage of innerText by textContent as suggested by Leon Adler in the comments.

edited Nov 29 '15 at 20:03

answered Nov 29 '15 at 17:29

ccjmne

7,914
3
41
56

This still appears to display the ` – ZomoXYZ Nov 29 '15 at 17:35
1

No, only with `document.write()`, that I left here for comparison, but **not** with `element.innerText` :) – ccjmne Nov 29 '15 at 17:36
`innerText` is **non-standard** (Internet Explorer) property and was not supported in Firefox before version 45. Using *textContent* would be advised. – Leon Adler Nov 29 '15 at 19:59
Oh thank you, I didn't even know that actually! Updating my answer right away :) – ccjmne Nov 29 '15 at 20:01

Leon Adler · Answer 3 · 2015-11-29T19:58:00.110

There's a difference between html and text. You want to set text:

var myText = 'A &amp; B';

// Setting HTML: Result text will be "A & B"
document.write(myText);   // <- don't use document.write!
jQuery('#myElement').html(myText);
myElement.innerHTML = myText;

// Setting Text: Result text will be "A &amp; B"
document.write('A &amp; B'.replace(/&/g, '&amp;').replace(/</g, '&lt;'));   // <- don't use document.write!
jQuery('#myElement').text(myText);   // removes all children and sets the text of the element
myElement.textContent = myText;   // sets the text of the element
myElement.innerText = myText;   // removes all children and sets the text of the element

Note that document.write is usually a bad idea, since it only works when your page was not loaded completely, and using document.write later (like when clicking a button) will replace the entire content of your page.

I can also advise against using innerText. It is a non-standard property which was defined by Internet Explorer and later adapted by Chrome, but is not supported in Firefox (which is fine, seeing as it is not in the standards). You can use textContent instead.

Write pure text using Javascript?

3 Answers3