如何使用javascript检测表情符号

Question

我需要帮助如何检测输入是否包含日语表情符号/表情符号。

目前我的字符集是charset=utf-8。在输入文本时，用户可以输入日语字符/字母/符号，但如果他们插入表情符号，onsubmit JavaScript将检查是否有表情符号，错误消息将显示。

我不能让它工作，因为我不知道如何在JavaScript中检测表情符号？

Answer 1

答案可能是有效的，但很糟糕，因为它们依赖于unicode范围，这些范围不可读，而且有些“神奇”，因为人们并不总是清楚它们来自哪里，为什么它们有效，更不用说它们对添加到规范中的新表情符号没有弹性。

主要浏览器现在支持unicode property escape，它允许根据表情符号在Emoji unicode类别中的归属来匹配表情符号：\p{Emoji}匹配表情符号，\P{Emoji}匹配非表情符号。

注意，officially，0123456789#*和其他字符也是表情符号，所以你可能想要使用的属性转义不是Emoji，而是Extended_Pictographic，它表示所有通常被理解为表情符号的字符！

请确保在末尾包含the u flag。

​

console.log(
  /\p{Emoji}/u.test('flowers'), // false :)
  /\p{Emoji}/u.test('flowers '), // true :)
  /\p{Emoji}/u.test('flowers 123'), // true :( 
)
console.log(
  /\p{Extended_Pictographic}/u.test('flowers'), // false :)
  /\p{Extended_Pictographic}/u.test('flowers '), // true :)
  /\p{Extended_Pictographic}/u.test('flowers 123'), // false :)
)

​

这对于检测表情符号很有效，但是如果您想使用相同的正则表达式来提取它们，您可能会对它的行为感到惊讶，因为一些显示为一个字符的表情符号实际上是几个字符。它们就是我们所说的表情符号序列，更多关于它们的in this question

​

const regex = /\p{Extended_Pictographic}/ug
const family = '‍‍' // "family 
console.log(family.length) // not 1, but 8!
console.log(regex.test(family)) // true, as expected
console.log(family.match(regex)) // not [family], but [man, woman, girl]

​

Answer 2

您可以使用以下正则表达式：

/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g

如果你只是想把它从字符串中删除，你可以这样做。

function removeEmojis (string) {
  var regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;

  return string.replace(regex, '');
}

Answer 3

您可以使用此库emoji-regex中的正则表达式