简体   繁体   English

如何将表情符号字符写入文本区域

[英]How can I write emoji characters to a textarea

I'm trying to setup an emoji picker control for a form that will post to various social media networks. 我正在尝试为将要发布到各种社交媒体网络的表单设置表情符号选择器控件。 I am trying to implement emojione-picker ( https://github.com/tommoor/emojione-picker ) which provides a data object that looks like this when you click on an emoji icon: 我正在尝试实现emojione-pickerhttps://github.com/tommoor/emojione-picker ),当您单击emoji表情图标时,它提供的data对象如下所示:

{
    "unicode":"1f600",
    "unicode_alternates":"",
    "name":"grinning face",
    "shortname":":grinning:",
    ...
}

I don't want to use the shortname property, but rather the unicode value for the actual emoji. 我不想使用shortname属性,而是使用实际表情符号的unicode值。 I want to insert the unicode value at the current cursor position of a <textarea> on the page. 我想在页面上<textarea>的当前光标位置插入unicode值。 I'm using the form value to post to Twitter which expect the actual emoji character (not :smile: or \ὠ0 ) 我正在使用表单值发布到需要实际表情符号字符的Twitter(不是:smile:或\\ u1f600)

After reading this article ( http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript ), I found that I can use a findSerrogatePair method to convert the unicode value into the escape sequence (?) Like this: 阅读本文( http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript )后,我发现可以使用findSerrogatePair方法将unicode值转换为转义序列(?),如下所示:

function findSurrogatePair(point) {
  // assumes point > 0xffff
  var offset = point - 0x10000,
      lead = 0xd800 + (offset >> 10),
      trail = 0xdc00 + (offset & 0x3ff); 
  return [lead.toString(16), trail.toString(16)];
}

Then I tried this: foo = findSurrogatePair('0x1f600') => ["d83d", "de00"] 然后我尝试了这个: foo = findSurrogatePair('0x1f600') => ["d83d", "de00"]

Using these values, I can see the actual smiley face character log to the console: 使用这些值,我可以看到实际的笑脸字符记录到控制台:

console.log("\?\?") => (actual smily emoji) console.log("\?\?") =>(实际的笑脸表情符号)

But if I try to read the values from foo and add the \\u, I see the character code: 但是,如果我尝试从foo读取值并添加\\ u,则会看到字符代码:

console.log("\\\\u\u0026quot; + foo[0] + "\\\\u\u0026quot; + foo[1]) => "\?\?" console.log("\\\\u\u0026quot; + foo[0] + "\\\\u\u0026quot; + foo[1]) =>“ \\ ud83d \\ ude00”

If I just use a single backslash: 如果我只使用一个反斜杠:

console.log("\\u\u0026quot; + foo[0] + "\\u\u0026quot; + foo[1])

I get this error: Uncaught SyntaxError: Unexpected token ILLEGAL(…) 我收到此错误: Uncaught SyntaxError: Unexpected token ILLEGAL(…)

Use String.fromCharCode: 使用String.fromCharCode:

findSurrogatePair(0x1f600)
.map((el) => parseInt(el, 16))
.map((el) => String.fromCharCode(el))
.join('')

But then you're converting number to string in findSurrogatePair and the n back to number here with parseInt .. 但是然后您要在findSurrogatePair中将数字转换为字符串,并使用parseInt将n转换回数字。

More concise way: 更简洁的方法:

function findSurrogatePair(point) {
  var offset = point - 0x10000,
      lead = 0xd800 + (offset >> 10),
      trail = 0xdc00 + (offset & 0x3ff); 
  return String.fromCharCode(lead) + String.fromCharCode(trail);
}

credit to: jnes 归功于:jnes

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM