I am a WeChat official account developer, and I found that some messages sent by users contain emoji expressions, and then they can't be displayed correctly when they are stored in the database, and they are all "mouthed" when they are read. This question asked me, I am a front-end novice , For this kind of problem, I am very distressed. I found a lot of information on the Internet and found that it still doesn't work, so I can write it myself.
First of all, you need to clarify your own ideas, that is, the emoji expressions in the front-end messages must first be converted into unicode format, and then the corresponding files can be referenced according to the emoji codes. In the middle, html <img> tags should be added to the emoji expressions to display normally, okay Don't talk nonsense anymore, let's talk about the code;
$datajs = json_encode($data,true);//Convert to json format
$datajs = preg_replace_callback("/(\\\u[ed][0-9a-f]{3})/i",function($arr){
return addslashes($arr[0]);
},$datajs); //Add "\\" to the expression
$datajs = preg_replace_callback("/(\\\u[ed][0-9a-f]{3})/i",function($arr){
$num = count($arr);
$arr[$num-1] = stripslashes($arr[$num-1]);
$result ="\<img src = '../../../emoji/{$arr[$num-1]}.png' height =32px,width =32px;></img>";
return $result;},$datajs);//Add labels to emoji expressions to facilitate volist display;
$datajs=json_decode($datajs,true); //Convert to original data, and html tags have been added to the expressions at this time
$num = count($datajs);
for($i=0;$i<$num;$i++){
$datajs[$i]['usermsg']= stripslashes($datajs[$i]['usermsg']);
}
The specific introduction is also in the comments, the main one is preg_replace_callback(), this function uses regular expressions to match unicode codes. As we all know, emoji expressions start with ue after conversion, so match this character, and then add more before this character A backslash, this is to facilitate the normal display of unicode when json transcoding, add a backslash for the first time
$datajs = preg_replace_callback("/(\\\u[ed][0-9a-f]{3})/i",function($arr){
return addslashes($arr[0]);},$datajs); //Add "\\" to the expression ,
Add img tag for the second time, $datajs = preg_replace_callback("/(\\u[ed][0-9a-f]{3})/i",function($arr){
$num = count($arr); $arr[$num-1]= stripslashes($arr[$num-1]); $result ="\<img src = '../../../emoji/{$arr[$num-1]}.png' height =32px,width =32px;></img>";return $result;},$datajs);
Finally, when the json is turned back, it can be displayed normally. At this time, because an extra backslash is added for the first time, it leads to an extra backslash in the output expression, which is "\emoji", so we re-transcode it. Remove the backslashes and use stripslashes(), then take out the backslashes again, and the emoji expressions can be displayed normally. Remember that the path added in the img tag must be correct, and you need to name each emoji image. Modifying the corresponding unicode encoding format can be displayed normally. Modifying the image name is a huge project;
The rest is the display problem of the volist tag in html: the following is the code
{volist name="data" id="dt"}
<div id = "usermessage"style = "border-bottom: 1px solid #e5e5e5;padding-top:5px;clear:both;">
<{$dt.usermsg}
</div>
{/ volist}
For convenience, a div is added, and finally, please see the following picture for the effect:
See if it is displayed normally~!
If you have any questions, please leave a message to discuss~!