渲染或删除表情符号

Question

我正在从推特上发送推文并希望在网页上显示它们,但是我只看到像和等字符的盒子,而不是表情符号.我如何将这些显示为像Twitter这样的图像,或者如果不可能,将它们全部删除？

我试过了:

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

但它正在抛出js错误.

Answer 1

请,请不要盲目删除文本块,特别是因为你看不到或不了解它们; 它破坏了信息.有人把它们放在那里是有原因的; 如果没有表情符号,包含表情符号的推文通常没有任何意义.

对于它的价值,你所看到的并不是真正的"二元"; 它很可能是一个小方块,其中Unicode代码点用十六进制表示.因为那是U + 1F49C,所以你可能会看到0 1 F 4 9 C.当您安装的任何字体都没有字形时,这就是Unicode字符的呈现方式.

要实际查看字符,您有几个选项.

1. 从这里获取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">,然后只使用Symbola .emoji元素来解决这个问题.

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代码点; 整个块保留用于此编码.

要查找所有星界平面字符,您实际上想要找到所有代理对:

/[\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.或者执行其他任何操作,例如将emoji替换为其Unicode名称.(Twitter title在每个图像上都有Unicode名称,但这里没有完成,因为它需要包含一个巨大的列表,将代码点映射到名称☺)