1

I want to use ‌,  , ° and ℃ in a JavaScipt string, but this doesn't work:

const str = `‌   ° ℃`;

If I do console.log(str), I would expect to see something like this (note the ‌ would not be visible and the   would just look like a regular space):

   ° ℃

I've seen this other question where the suggested solution is to change these entities to their hexadecimal equivalent, but that's not possible as this string comes from the backend with the entities already in place.

Danziger
  • 19,628
  • 4
  • 53
  • 83
  • 1
    HTML entities are syntax for the HTML parser, not JavaScript. They're two completely different language systems. JavaScript has its own syntax for expressing Unicode characters outside the basic Latin set. – Pointy Dec 25 '19 at 01:58
  • Exactly. I created this question because I see some other ones about similar issues for specific characters that get answers like "Use `\xXX` instead", but don't explain how to get that value or how to do it dynamically, as one might need when consuming content from a CMS using an API, for example. – Danziger Dec 25 '19 at 02:09

1 Answers1

4

Even if the HTML entities are already in that string, one way or another, you need to replace them with their actual character or their escape notation equivalent.

If they were not in the string already, one option would be to just look them up:

Or calculate them:

Or, if you can type or copy-paste the original character from somewhere else, you can get its decimal Unicode code using String.prototype.charCodeAt(), which returns the UTF-16 decimal code unit at the given index, and Number.prototype.toString(), using its radix parameter to convert that decimal to hexadecimal:

'°'.charCodeAt(0); // 176
'°'.charCodeAt(0).toString(16); // "b0"

And then use the escape notation to represent them with their Unicode code. Note that depending on the code, we use the \uXXXX or the \xXX notation:

const str = `\u200C \xA0 \xB0 \u2103`;

console.log(str);

console.log(str.split(' ').map(s => `${ s.charCodeAt(0) } = ${ s.charCodeAt(0).toString(16) }`));

In your case, you need to parse that string, extract the entities and replace them with the actual character they represent.

I've made this snippet so that you can just paste characters or write HTML entities and get their Unicode codes, but this will also serve you as an example on how to dynamically parse those HTML entities:

const sandbox = document.getElementById('sandbox');
const input = document.getElementById('input');
const list = document.getElementById('list');

function parseInput() {
  let text = input.value;
  
  (text.match(/&.+;/ig) || []).forEach(entity => {
    // Insert the HTML entity as HTML in an HTML element:
    sandbox.innerHTML = entity;
    
    // Retrieve the HTML elements innerText to get the parsed entity (the actual character):
    text = text.replace(entity, sandbox.innerText);
  });
  
  list.innerHTML = text.split('').map(char => {
    const dec = char.charCodeAt(0);
    const hex = dec.toString(16).toUpperCase();
    const code = hex.length === 2 ? `\\x${ hex }` : `\\u${ hex }`;
    const link = `0000${ code }`.slice(-Math.min(4, hex.length ));
  
    return `
      <li>
        <div>${ char }</div>
        <div>${ dec }</div>
        <div>${ hex }</div>
        <div><a href="http://www.fileformat.info/info/unicode/char/${ link }">${ code }</a></div>
      </li>
    `;
  }).join('');  
}

input.value = '&zwnj;&nbsp;°℃';

input.oninput = parseInput;

parseInput();
body {
  margin: 0;
  padding: 8px;
  font-family: monospace;
}

#input {
  margin-bottom: 16px;
  border-radius: 2px;
  border: 0;
  padding: 8px;
  font-family: monospace;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 0 32px rgba(0, 0, 0, .25);
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  outline: none;
}

#sandbox {
  display: none;
}

#list {
  list-style: none;
  margin: 0; 
  padding: 0;
  border-top: 1px solid #EEE;
}

#list > li {
  display: flex;
  border-bottom: 1px solid #EEE;
}

#list > li > div {
  width: 25%;
  box-sizing: border-box;
  padding: 8px;
}

#list > li > div + div {
  border-left: 1px solid #EEE;
}
<div id="sandbox"></div>

<input type="text" id="input" />

<ul id="list"></ul>
Danziger
  • 19,628
  • 4
  • 53
  • 83