能否生成所有的表情符号并添加到下拉选择框中？

Question

有没有可能使用JavaScript生成所有表情符号并将它们附加到一个单独的下拉菜单中？还是我必须手动输入每一个表情符号？

<select>
    <option></option>
    <option></option>
<select>

<script>
function()
{
    // How do I put all the emojis into the select dropdown..?
}
</script>

- Yami Odymel

---

将它们放入数组中，然后循环遍历该数组，然后将其附加到选择器中。 - guradio

抱歉我的问题可能会让你产生误解，我想做的是获取所有表情符号并将它们附加到<select>中。 - Yami Odymel

@YamiOdymel 当你说“所有表情符号”时，你是指当前Unicode表情符号吗？编辑：截至目前，共有1791个 - 这是一个很长的<select>。 - Theraot

Answer 1

您可以定义不同表情符号范围的起始和结束值。然后，您可以循环遍历每个范围并将表情符号附加到选项标签中。

var mySelect = document.getElementById('mySelect')
var newOption;
var emojRange = [
  [128513, 128591], [9986, 10160], [128640, 128704]
];
//inside emojRange 2d array , define range arrays (start number,end number).
//1st array : Emoticons icons
//2nd range : Dingbats.
//3rd range : Transport and map symbols
for (var i = 0; i < emojRange.length; i++) {
  var range = emojRange[i];
  for (var x = range[0]; x < range[1]; x++) {

    newOption = document.createElement('option');
    newOption.value = x;
    newOption.innerHTML = "&#" + x + ";";
    mySelect.appendChild(newOption);
  }

}

我从这个网站上获取了十六进制范围：http://apps.timwhitlock.info/emoji/tables/unicode。

var mySelect = document.getElementById('mySelect')
var newOption;
var emojRange = [
  [128513, 128591] ,[9986,10160],[128640,128704]
];
//inside array define range arrays.
//1st array : Emoticons icons
//2nd range : Dingbats.
//3rd range : Transport and map symbols
for (var i = 0; i < emojRange.length; i++) {
  var range = emojRange[i];
  for (var x = range[0]; x < range[1]; x++) {

    newOption = document.createElement('option');
    newOption.value = x;
    newOption.innerHTML = "&#" + x + ";";
    mySelect.appendChild(newOption);
  }

}

option {
  font-size:50px;
}

<select id="mySelect">
</select>

- Madhawa Priyashantha

Answer 2

我从Full Emoji Data, v3.0下载了表情符号，并将它们放在一个托管在Github上的JavaScript库中，该库使用无许可证发布。

使用该库，您可以编写以下代码：

var target = document.getElementById("target");
var emojiCount = emoji.length;

for(var index = 0; index < emojiCount; index++)
{
  addEmoji(emoji[index]);
}

function addEmoji(code)
{
  var option = document.createElement('option');
  option.innerHTML =  code;
  target.appendChild(option);
}

<script src="https://rawgit.com/theraot/emoji/master/emoji.js" charset="utf-8"></script>
<select id ="target">
<select>

你可以使用JavaScript来过滤列表，只保留没有修饰符的表情符号。

下面是我在Github项目中编写的README副本：

---

表情符号

JavaScript所支持的所有表情符号列表

使用方法如下：

<script src="https://rawgit.com/theraot/emoji/master/emoji.js" charset="utf-8"></script>

表情符号列表是从完整的表情符号数据v3.0中检索出来的。

注1：一些表情符号由两个Unicode字符组成。这些使用了表情符号修饰符，可能无法正确显示。

注2：支持因浏览器和平台而异，建议使用表情符号字体。

- Theraot

Answer 3

如果你的表情符号是Unicode字符，将它们全部放入一个数组中，并通过循环来构建下拉选择框，如下所示：

var myEmojis = ['&#9786', '&#9785']; //put all your emojis in this array
var selectOptions = "<option>select</option>";
for(var i = 0; i < myEmojis.length; i++){
  selectOptions += "<option>" + myEmojis[i] + "</option>"
}
$('select').html(selectOptions);

- Supradeep