如何在 JavaScript 字符串中使用/解析 HTML 实体和 Unicode 字符

Question

我想在 JavaScipt 字符串中使用 &zwnj;、 、° 和 ℃，但这不起作用：

const str = `&zwnj; &nbsp; &#176; &#8451;`;

如果我这样做 console.log(str)，我希望看到这样的东西（注意 &zwnj; 将不可见，  看起来就像一个普通的 space):

   ° ℃

我看到 this other question 建议的解决方案是将这些实体更改为其等效的十六进制，但这是不可能的，因为此字符串来自后端，并且实体已经到位。

Answer 1

即使 HTML 实体已经在该字符串中，以某种方式，您也需要将它们替换为它们的实际字符或它们的 escape notation 等效字符。

如果它们不在字符串中，一种选择是查找它们：

&zwnj; - ZERO WIDTH NON-JOINER: 0x200C.
  - NO-BREAK SPACE: 0x00A0.

或计算它们：

° - DEGREE SIGN (°): 0x00B0（十进制的 176 是十六进制的 b0）。
℃ - DEGREE CELSIUS (℃): 0x2103（十进制的 8451 是十六进制的 2103）。

或者，如果您可以从其他地方键入或复制粘贴原始字符，则可以使用 String.prototype.charCodeAt(), which returns the UTF-16 decimal code unit at the given index, and Number.prototype.toString() 获取其十进制 Unicode 代码，使用其 radix 参数将该十进制转换为十六进制:

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

然后用escape notation来代表他们的Unicode码。请注意，根据代码，我们使用 \uXXXX 或 \xXX 表示法：

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

console.log(str);

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

在您的情况下，您需要解析该字符串，提取实体并将它们替换为它们代表的实际字符。

我制作了这个片段，这样您就可以粘贴字符或编写 HTML 实体并获取它们的 Unicode 代码，但这也可以作为一个示例，说明如何动态解析这些 [=81] =] 实体：

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>

如何在 JavaScript 字符串中使用/解析 HTML 实体和 Unicode 字符

How to use / parse HTML entities and Unicode characters in a JavaScript string

html

javascript

unicode

encoding

html-entities