34

我想在我的 HTML 链接文本中显示“打开锁”字符。

如果我直接这样做，它会正确显示<a id="myId">&#x1f512;</a>，但我发现无法使用 jQuery.text()函数动态更改它，例如：

 $("#myID").text(openLockText);

我应该在 openLockText 中放什么？

4

4 回答 4

39

Javascript 内部仅支持 UTF-16。

因为这是一个扩展的 32 位 UTF 字符（不在“基本多语言平面”中），所以您需要插入“UTF-16 代理对”，它在您链接到的同一页面上很有帮助：

0xD83D 0xDD13

IE

$('#myId').text('\ud83d\udd13');

更多细节可以在RFC 4627中找到，严格来说是 JSON 的格式。

于 2012-06-18T16:35:13.477 回答
10

已编辑——如果它是一个可以用单个 UTF-16 字符表示的 Unicode 代码点，那么您可以在这种情况下使用 JavaScript 转义序列：

$('#foo').text('\uXXXX');

但是，因为您的角色需要更多位，所以这是行不通的。可能可以构建允许字符表示为 UTF-16 的字节序列，但这会很痛苦。我会去的.html()。

请注意，并非所有字体都为这样的“异国情调”代码点提供字形，并且根据我的经验，那些确实提供了令人难以置信的丑陋的字形。

于 2012-06-18T16:28:17.050 回答
8

您可以将字符直接放在那里，作为带引号的字符串，例如

$("#myID").text('');

前提是文件是 UTF-8 编码的并且您正确声明了字符编码。（理论上，您可以选择使用 UTF-16 甚至 UTF-32，但不应期望浏览器支持它们。）

尽管根据 ECMAScript 标准，直接在源文档中支持非 BMP 字符是可选的，但现代浏览器允许您使用它们。自然，您需要一个可以处理 UTF-8 的编辑器，并且您需要一些输入法；例如，请参阅我的完整 Unicode 输入实用程序。

该问题包含一些未被注意到的错误：由于id属性值区分大小写，因此myId需要将拼写固定为myID. 并且 OPEN LOCK 字符是 U+1F513，而不是 U+1F512，所以引用&#x1f512;会给出错误的字符。

此外，很少有字体包含OPEN LOCK，浏览器，尤其是IE，即使系统中的某些字体包含字形，也可能很难找到字形，所以你应该给浏览器帮助并声明一个已知包含该字符的字体列表，按优先顺序。例子：

<style>
#myID { font-family: Symbola, Quivira, Segoe UI Symbol; }
</style>
<a id="myID">stuff</a>
<script>
 $("#myID").text('');
</script>

非 BMP 字符在内部表示为代理对，并且可以使用代理对的组件的符号来编写\u，但这非常不直观

于 2012-12-10T07:38:45.753 回答
2

以下脚本应将 UTF32 十六进制值转换为 UTF16 对

function toUTF16Pair(hex) {
  hex = hex.replace(/[&#x;]/g,'');
    var x = parseInt(hex, 16);
    if (x >= 0x10000 && x <= 0x10FFFF) {
        var first = Math.floor((x - 0x10000) / 0x400) + 0xD800;
        var second = ((x - 0x10000) % 0x400) + 0xDC00;
        return {
            first: first.toString(16).toUpperCase(),
            second: second.toString(16).toUpperCase(),
          combined: '\\u'+first.toString(16).toUpperCase() + '\\u'+second.toString(16).toUpperCase()
        };
    } else {
        return {}
    }
}
<input type='text' id='in' />
<input type='button' value='Click' onclick="document.getElementById('result').innerHTML = toUTF16Pair(document.getElementById('in').value).combined" />
<p id='result'></p>

于 2016-06-02T10:13:07.507 回答