Disable input from encoding html

Question

I have an input where I take the value and sets it as text

Javascript:

OverSkrift.innerHTML = document.getElementById("textOver").value;

HTML

<div class="input over">
       <a>Type</a>
       <input type="text" value="ZEUS" id="textOver" />
</div>

However, when a user types in, let's say

<b>Hey</b>

It gets outputted like : Hey

So how do I disable this? Can I make it output it in plain text so that it gets outputted like: <b>Hey</b>

While writing this, I realised that I need something that does the same as stack overflow, when you put stuff in back ticks: ` `

Given your description of the problem it seems likely that the element into which the input is entered would be a regular (non-``) element with a `contenteditable=true` attribute. Can you show the relevant HTML? — David Thomas, Apr 24 '17 at 11:12
You have to escape all HTML special character. This should help [https://stackoverflow.com/a/5406725/7845824](https://stackoverflow.com/a/5406725/7845824) — BinaryKung, Apr 24 '17 at 11:17

score 2 · Accepted Answer · answered Apr 24 '17 at 11:37

It gets outputted like : Hey

[..] Can i make it output it in plain text so that it gets outputted like: <b>Hey</b>

No need to do an HTML Encode here in this particular use-case. Just use textContent to dump the text as-is, instead of innerHTML.

Example:

var input = document.getElementById('textOver'), 
  result = document.getElementById('result') 
;

input.addEventListener('input', show);

function show(e) {
  result.textContent = e.target.value;
}

result.textContent = input.value;

<div class="input over">
  <a>Type</a>
  <input type="text" value="<b>Hello</b>" id="textOver" />
</div>
<hr>
<p id="result"></p>

score 1 · Answer 2 · answered Apr 24 '17 at 11:12

You just need to find/replace some strings in it before assigning to the innerHTML, to make sure it is rendered as text and not as HTML code, like so:

function htmlEntities(str) {
    return String(str)
             .replace(/&/g, '&amp;')   // & -> &amp;
             .replace(/</g, '&lt;')    // < -> &lt;
             .replace(/>/g, '&gt;')    // > -> &gt;
             .replace(/"/g, '&quot;'); // " -> &quot;
}

OverSkrift.innerHTML = htmlEntities(document.getElementById("textOver").value);

Snippet source: css-tricks

score 1 · Answer 3 · answered Apr 24 '17 at 11:25

There are few special characters, which make make your string appear like HTML element.

When you want to get some input from the user and directly display it, be always aware of this.

Try this,

    var value = document.getElementById("textOver").value;

    value = escapeHtml( value );

    OverSkrift.innerHTML = value;

    function escapeHtml(string) {
        return String(string).replace(/[&<>"'\/]/g, function (s) {
            return entityMap[s];
        });
    }

    var entityMap = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
    };

Disable input from encoding html

3 Answers3