Placeholder text set by javascript not decoding HTML encoded special characters

Question

When setting placeholder text via javascript, special characters are not displaying properly.

function myFunction() {
    document.getElementById("myText").placeholder = "&#201;v&#233;nement";
}

<input type="text" id="myText" placeholder="&#201;v&#233;nement">

<p>Click the button to change the placeholder text of the text field.</p>

<button onclick="myFunction()">Try it</button>

Output is: "Événement"

Expected output: "Événement"

Looking for a javascript solution where I can convert any text containing any encoded character.

Does this answer your question? https://stackoverflow.com/questions/3700326/decode-amp-back-to-in-javascript — Calaris, Oct 26 '17 at 13:18
Is there a reason you can't just do `document.getElementById("myText").placeholder = "Événement";`? — Walk, Oct 26 '17 at 13:21
@Calaris Don't mix string escape in HTML and string escape in JS. — RainingChain, Oct 26 '17 at 13:21
@Walk I'd assume the HTML file he's serving is not encoded in UTF8. — RainingChain, Oct 26 '17 at 13:22

score 4 · Answer 1 · answered Oct 26 '17 at 13:26

4

In HTML, special characters are encoded with &#XXX (Like &#201).

In Javascript, special characters are encoded with \uXXXX (Like \u00C9)

Check https://en.wikipedia.org/wiki/List_of_Unicode_characters for the list of escape code.

In your case, it would be

document.getElementById("myText").placeholder = "\u00C9v\u00E8nement";

answered Oct 26 '17 at 13:26

RainingChain

7,397
10
36
68

I don't control the string, I'm looking for a way to convert what I'm given. – Richard Medeiros Oct 26 '17 at 13:28
In my case I could control the string, but not the method used to display it as a placeholder, so this was the solution. – Marc Levesque Jul 12 '18 at 15:46

score 2 · Accepted Answer · edited Sep 08 '20 at 15:40

The most straightforward way to convert is to create an element, set your HTML entity as innerHTML and get textContent, something like this:

function myFunction() {
  let a = document.createElement('span');
  a.innerHTML = '&#201;v&#233;nement from JS';
  document.getElementById("myText").placeholder = a.textContent;
}

<input type="text" id="myText" placeholder="&#201;v&#233;nement">

<p>Click the button to change the placeholder text of the text field.</p>

<button onclick="myFunction()">Try it</button>

Placeholder text set by javascript not decoding HTML encoded special characters

2 Answers2