Как я могу преобразовать строку эмодзи в иконку во время записи?

Question

Я сейчас занимаюсь разработкой собственного чата. Теперь я хочу расширить ввод чата, чтобы при вводе, например, :-), он мгновенно менялся на ?, когда я пишу внутри моего contenteditable div (что делает его более сложным).

Я пытался выяснить, как WhatsApp Web делает это, но я не собираюсь идти вперед. Это мой код:

jQuery( document ).ready( function ( $ ) {
	$( "#input" ).keypress( function ( e ) {
		if ( e.which === 13 && !e.shiftKey ) {
			$( "#messages" ).scrollTop( $( "#messages" ).prop( "scrollHeight" ) );
			$( "#messages" ).append( "<div class=\"message right\">" + $( this ).html() + "</div>" );
			$( this ).html( "" );
      e.preventDefault();
		}
	} );
  
  $( "#input" ).on( "input", function () {
	  console.log( $( this ).html() );
  } );
} );

#messages {
  border: 1px solid;
  max-height: 200px;
  overflow-y: scroll;
}

#messages > div { 
  margin-bottom: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

.message.right {
  text-align: right;
}

.divider span {
  padding: 6px 12px;
  text-align: center;
  line-height: 1;
  background: gray;
  color: #fff;
  border-radius: 6px;
}

.date-area {
  margin-top: -35px;
}

.spacer {
  height: 35px;
}

#input {
  border: 1px solid;
  margin-top: 10px;
  width: 100%;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block;
    color: #aaaaaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
</div>
<div id="input" contenteditable="true" placeholder="Enter a message"></div>

Интересная вещь в WhatsApp Web заключается в том, что когда я нажимаю клавишу удаления, смайлик возвращается к :-). Как они это делают? Есть ли расширение? Было бы здорово, если бы мне не нужно расширение.

Обновление

Я обновил свой код и добавил функцию ввода.

Answer 1

Это мой подход.

Создание массива с объектами следующего класса.

class Emoji {
    constructor(emojiSymbol, textCode) {

        this.symbol = symbol; // :-)
        this.textCode = textCode; // &#1F60A
    }
}

Я предполагаю, что текст пользователя будет сохранен в виде строки при его вводе.

Относительно ---> Теперь я хочу расширить вход в чат, чтобы при вводе, например :-), он мгновенно изменился на ?

Вы должны отслеживать ввод пользователя. Чтобы быть более точным c, вы должны создать функцию, которая будет проверять каждое слово , которое пишет пользователь. Если он найден внутри массива символов Emoji , он удалит символ 1019 * и заменит его на текстовый код .

- функция будет включена, если слово содержит 3 или более символов.

- функция перестанет работать после нажатия пользователем пробела или если будет более 5 или 6 последовательных символов, зависит от размера символов для смайликов.

Пример строки -> Я собираюсь работать :-)

1) Будет проверено I .

Поскольку слово меньше трех символов, функция не будет включена

2) Будет проверено am . То же, что и 1.

3) Будет проверяться идущий .

Когда пользователь введет третий символ " i ", функция будет включен. Это сохранит индекс символа «g». Индекс можно рассчитать: Общая длина текущего текстового сообщения - 3.

. Он займет goi и начнет искать внутри массива объектов Emoji символ , если он находит соответствующий, он заменит его textCode внутри класса Emoji.

Пользователь вводит четвертый символ, который начнет искать "goin" ......

4) Он проверит от до .

То же, что 1 и 2.

5) Будет проверено работа

Так же, как 3.

6) Будет проверено : -)

То же, что и 3, с той разницей, что он найдет объект внутри массива с соответствующим символом и заменит его на textCode .

Относительно -> Интересная вещь в WhatsApp Web заключается в том, что когда я нажимаю клавишу удаления, смайлик возвращается к :-). Как они это делают? Есть ли расширение? Было бы здорово, если бы мне не нужно расширение.

Когда пользователь нажимает кнопку удаления, вы должны проверить назад до указанного c количества последовательных символов. если они соответствуют смайликам, вы заменяете textCode символом.

Пример String -> Я собираюсь работать F60A

Я предполагаю, что :-) соответствует к этому текстовому коду -> F60A.

Функция будет искать в обратном направлении. Он сохранит конечный индекс, который будет индексом " A " (F60A), а начальный индекс будет "&". Если он найдет объект с тем же textCode , он заменит его на символ .

Answer 2

Я не пробовал этого, но вот общая идея:

Поддерживать словарь (ie, JS объект), который отображает все текстовые эмодзи в шестнадцатеричный код действующего смайлика. Шестнадцатеричный код, соответствующий наиболее распространенным смайликам, доступен здесь: https://www.w3schools.com/charsets/ref_emoji_smileys.asp

 const emojiMap = {
                        ":-)" : "&#1F60A", //happy face
                        ":-(" :  "&#1F641", //sad face
                        /**...and so on...**/
                     }

Теперь вы можете проверить, соответствует ли ваша строка ввода чему-либо из этой карты, а затем отобразить соответствующий HTML шестнадцатеричный код для DOM, например:

//Just some pseudo code, please change implementation as per your need.

if(inputString.includes(':-)')){
                render(emojiMap[':-)']);
         }