我正在从 Twitter 中提取推文并想在网页上显示它们，但我看到的不是表情符号，而是 ? 和 ? 等字符的框。我怎样才能像 Twitter 那样将它们显示为图像，或者如果这不可能，则将它们全部删除？

我试过:

item["text"] = item["text"].replace('?', ""); 

但是它抛出 js 错误。

最佳答案

拜托，拜托，永远不要盲目地删除大块文本，尤其是不要仅仅因为您看不到或理解它们；它破坏了信息。有人出于某种原因将它们放在那里；如果没有表情符号，包含表情符号的推文通常没有任何意义。

就其值(value)而言，您所看到的并不是真正的“二元”；它很可能是一个用十六进制拼写的 Unicode 代码点的小方 block 。对于?，那是 U+1F49C，所以你可能会看到 0 1 F 4 9 C .当您安装的字体都没有字形时，这就是 Unicode 字符的呈现方式。

要真正看到字符，您有多种选择。

1. 从 here 获取 Symbola , 并安装它。现在你可以看到表情符号了。但没有其他人可以。

2. 获取 Symbola，并使用 @font-face 将其添加到您的网站像这样阻止:

   @font-face {
       font-family: Symbola;
       src: url('Symbola.ttf') format('truetype');
       unicode-range: U+1F???;
   }
   

   然后用font-family: Symbola, "your preferred font", sans-serif;设置你的页面字体.

   这样做的缺点是，据我所知，CSS 的 font-family选择第一个存在的字体，不指定 Unicode 后备。所以在不支持 unicode-range 的浏览器中( Firefox )，这将在不是特别漂亮的 Symbola 中呈现您的整个页面。

   你可以通过找到所有表情符号并将它们包装在 <span class="emoji"> 中来解决这个问题。 , 然后只对 .emoji 使用 Symbola元素。

3. 找到所有表情符号并将它们替换为 <img>标签，就像 Twitter 那样。 Twitter 的图像都在包含代码点的 URL 中，例如https://abs.twimg.com/emoji/v1/72x72/1f43e.png ，因此只需重用它们就足够了。 (我有点惊讶 Twitter API 实际上不会为你做这件事。)

如果您想查找并替换所有表情符号，您可能只想查找所有星体层字符，即那些不在现代人类语言所在的基本多语言层中的字符。这些都是代码点为 U+10000 及以上的字符。

在 JavaScript 中，字符串并不是真正的字符串；它们是 16 位数字的数组。 16 位是四个十六进制数字，因此具有五个十六进制数字的 Unicode 代码点不适合单个 16 位数字。相反，JavaScript 使用可怕的 UTF-16 编码对它们进行编码，它使用两个 16 位数字:一个在 0xD800 到 0xDBFF 范围内，一个在 0xDC00 到 0xDFFF 范围内。两个数字一起称为“代理对”。这些数字都不是真正的 Unicode 代码点；整个 block 都保留用于此编码。

要找到所有的星界字符，你实际上是想找到所有的代理对:

/[\uD800-\uDBFF][\uDC00-\uDFFF]/

因此，Twitter 图像替换的实现可能如下所示:

var text = "hey babe  ?  how you doin";

// Split on surrogate pairs, and preserve the surrogates; this will give
// you an array that alternates between BMP text and a single surrogate
// pair: [text, emoji, text, emoji, text...]
var chunks = text.split(/([\uD800-\uDBFF][\uDC00-\uDFFF])/);

// A DocumentFragment is a DOM tree that can be manipulated freely without
// causing a reflow, so it's more performant for heavy tree-building and a
// good habit to get into
var frag = document.createDocumentFragment();

for (var i = 0, l = chunks.length; i < l; i++) {
    if (i % 2 == 0) {
        // Even-numbered chunks are plain text
        frag.appendChild(document.createTextNode(chunks[i]));
    }
    else {
        // Odd-numbered chunks are surrogate pairs
        // We have TWO characters, but we want one codepoint; this is how
        // you decode UTF-16  :(
        var pair = chunks[i];
        var codepoint = (
            0x10000
            | ((pair.charCodeAt(0) - 0xD800) << 10)
            | (pair.charCodeAt(1) - 0xDC00)
        );
        var hex = codepoint.toString(16);  // now it's in hex
        var img = document.createElement('img');
        img.src = "https://abs.twimg.com/emoji/v1/72x72/" + hex + ".png";
        // Twitter uses pretty big images and just scales them down
        // clientside; you could change these to whatever you want, or add
        // a class here and use CSS to set the width/height to 1em to
        // match the current font size
        img.height = 16;
        img.width = 16;
        frag.appendChild(img);
    }
}

// Now just stick it into the page somewhere
var el = document.createElement('p');
el.appendChild(frag);
document.body.appendChild(el);

这会创建一个 <img>根据选项 3，但您也可以轻松添加 <span class="emoji">然后选择选项 2。或者做任何你想做的事情，比如用它们的 Unicode 名称替换表情符号。 (Twitter 在每张图片上的 Unicode 名称为 title，但这里没有这样做，因为它需要包含一个巨大的列表，将代码点映射到名称 ☺)

关于javascript - 渲染或删除表情符号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24070515/