我想使用
、
、°
和 ℃
在 JavaScipt 字符串中,但这不起作用:
const str = `‌ ° ℃`;
如果我执行 console.log(str)
,我希望看到类似的内容(注意
将不可见,并且   ;
看起来就像一个常规空间):
° ℃
我见过this other question其中建议的解决方案是将这些实体更改为其十六进制等效值,但这是不可能的,因为该字符串来自实体已就位的后端。
最佳答案
即使 HTML 实体已经在该字符串中,无论怎样,您都需要将它们替换为它们的实际字符或其 escape notation等价。
如果它们不在字符串中,一种选择是查找它们:
-ZERO WIDTH NON-JOINER
:0x200C
。NO-BREAK SPACE
:0x00A0
。
或者计算它们:
°
-DEGREE SIGN (°)
:0x00B0
(十进制的176
是十六进制的b0
)。℃
-DEGREE CELSIUS (℃)
:0x2103
(十进制的8451
是十六进制的2103
)。
或者,如果您可以从其他地方键入或复制粘贴原始字符,则可以使用 String.prototype.charCodeAt()
获取其十进制 Unicode 代码。 ,它返回给定索引处的 UTF-16 十进制代码单元,以及 Number.prototype.toString()
,使用其 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 代码,但这也将为您提供如何动态解析这些 HTML 实体的示例:
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 = '‌ °℃';
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 - 如何使用/解析 JavaScript 字符串中的 HTML 实体和 Unicode 字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59474627/