Возможно ли сгенерировать все смайлики и добавить их в выпадающий список выбора?

#javascript #jquery #emoji

#javascript #jquery #смайлики

Вопрос:

Есть ли какие-либо возможные способы сгенерировать все смайлики и добавить их в один выпадающий список выбора с помощью JavaScript? Или я должен вводить каждый из них вручную?

 <select>
    <option>🍰</option>
    <option>🐲</option>
<select>

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

Комментарии:

1. поместите их в массив и выполните цикл по массиву, а затем добавьте его в select

2. Извините, мой вопрос может ввести вас в заблуждение, я пытаюсь получить все смайлики и добавить их в <select> .

3. @YamiOdymel когда вы говорите «все смайлики», вы имеете в виду все текущие смайлики в Юникоде ? Редактировать: на сегодняшний день их 1791 — это долго <select> .

Ответ №1:

Вы можете определить начальные и конечные значения для разных диапазонов смайликов. Затем вы можете перебирать каждый диапазон и добавлять смайлики к тегу option.

 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 = "amp;#"   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 = "amp;#"   x   ";";
    mySelect.appendChild(newOption);
  }

}  
 option {
  font-size:50px;
}  
 <select id="mySelect">
</select>  

Ответ №2:

Я загрузил символы из полных данных смайликов версии v3.0 и поместил их в библиотеку JavaScript, размещенную на Github, выпущенную под лицензией unlicense.

Используя это, вы можете написать код следующим образом:

 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 для фильтрации списка только для тех смайликов, у которых нет модификатора.

Я скопирую README, который я написал для проекта, в Github ниже:


Смайлики

Список всех смайликов для JavaScript

Используйте следующим образом:

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

Список смайликов был получен из полных данных смайликов, версия v3.0

Примечание 1: Некоторые смайлики состоят из двух символов Юникода. Они используют модификаторы смайликов и могут отображаться некорректно.

Примечание 2. Поддержка может отличаться в зависимости от браузера и платформы, рекомендуется использовать шрифт emoji.

Ответ №3:

Если ваши смайлики являются символами Юникода, поместите их все в массив и выполните цикл, чтобы создать раскрывающийся список select, как показано ниже :

 var myEmojis = ['amp;#9786', 'amp;#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);