Как заменить смайлики еще после того, как пользователь написал текст и нажмите пробел

Если пользователь пишет текст, например: :), 🙁 ect. На textarea, я хочу, чтобы он заменил этот текст смайликом сразу после нажатия пользователем клавиатуры. (Например, facebook заменит смайлик).

В моем ниже php-коде замените смайлик после нажатия submit. Но я хочу, он будет заменять также смайлик с помощью java-скрипта на стороне Clint.

• Вставка столбца индекса jquery tablesorter
• Передать значение переменной из JS в PHP
• передача нескольких параметров с помощью $ .ajax по POST в php-функцию
• Выбор региона страны с открытым исходным кодом в JS
• Как показать предварительный просмотр изображения с помощью jquery перед формой submit в div

мой php:

function smileys($text){ // Smiley to image $smileys = array( ':)' => '<img src="smilies/smile.gif" border="0" alt="" />', ':-)' => '<img src="smilies/smile.gif" border="0" alt="" />', ':D' => '<img src="smilies/smile.gif" border="0" alt="" />', ':-(' => '<img src="smilies/angry.gif" border="0" alt="" />', ':-D' => '<img src="smilies/biggrin.gif" border="0" alt="" />', 'lol' => '<img src="smilies/biggrin.gif" border="0" alt="" />', ':-|' => '<img src="smilies/undecided.gif" border="0" alt="" />', ';-)' => '<img src="smilies/wink.gif" border="0" alt="" />', ); // Now you need find and replace foreach($smileys as $search => $replace){ $text = preg_replace("#(?<=\s|^)" . preg_quote($search) . "#", $replace, $text); return $text; } } // My others code echo ''.smileys($description).''; 

Я собрал этот JavaScript, который начинает работать после нажатия клавиши пробела, но я не могу представить, как написать этот полный скрипт для текущей работы, которую нужно заменить.

  $('#comment').keypress(function(e) { if(e.keyCode == 32) { var comment = $('#comment').val() //What will be here, I can't understand !!! } }); 

моя текстовая реклама

• Почему я получаю сообщение «undefined», переданное в db? jquery php plupload
• Как предотвратить диалоговое окно «Подтверждение повторной формы формы»?
• Загрузка файла Blueimp jQuery, передача данных дополнительной формы
• Скребок на стороне клиента на основе браузера
• Загрузка изображения с помощью Ajax, но PHP не видит файл

 <textarea name="comment" id="comment"></textarea> 

Related of "Как заменить смайлики еще после того, как пользователь написал текст и нажмите пробел"

 var smileys = { ':)': '<img src="smilies/smile.gif" border="0" alt="" />', ':-)': '<img src="smilies/smile.gif" border="0" alt="" />', ':D': '<img src="smilies/smile.gif" border="0" alt="" />', ':-(': '<img src="smilies/angry.gif" border="0" alt="" />', ':-D': '<img src="smilies/biggrin.gif" border="0" alt="" />', 'lol': '<img src="smilies/biggrin.gif" border="0" alt="" />', ':-|': '<img src="smilies/undecided.gif" border="0" alt="" />', ';-)': '<img src="smilies/wink.gif" border="0" alt="" />', }; $(document).ready(function() { $(".chat > textarea").attr("disabled", false); //enable the box on page load $(".chat > textarea").keypress(function(e) { $(".chat > div").html(smilyMe($(".chat > textarea").val())); }); }) function smilyMe(msg) { //smiley replace return msg.replace(/(\:\)|\:-\)|\:D|\:-D|\blol\b|\:-\||\:-\(|\;-\))/g, function(all) { return smileys[all] || all; }); } 

 div.chat { width: 400px; height: 200px; border: 1px solid grey; } div.chat > div { height: calc(100% - 50px); width: 100%; border-bottom: 1px dashed #939393; padding: 2px 10px 10px 10px; } div.chat > div > div { color: #939393; font-size: 9px; } div.chat > textarea { height: 50px; width: 100%; box-sizing: border-box; border: 0px; padding: 5px; } div { box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="chat"> <div> <div>Preview</div> </div> <textarea disabled placeholder="Type your message here..."></textarea> </div>