如何在用户写入文本和按空格后替换表情符号

How to replace emoticons yet after user write text and press space

本文关键字：空格 替换 符号 用户 文本      更新时间：2023-09-26

如果用户像:)一样编写文本，:(等。在文本区域上，我希望它将在用户按键盘空间后用表情符号替换此文本。（如Facebook替换表情符号）。

在我下面的 php 代码中，按提交后替换表情符号。但我想，它将是带有克林特端 java 脚本的表情符号。

我的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 !!!
    }
});

我的文本区域

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


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>

使用我的smilyMe功能。

但是，您无法将图像附加到文本区域。所以我实现了一个预览功能。

相关文章：