javascript - How is emoji parsed? ?

Question

This was seen by Changyan’s comment system

Click on Angry and you will see [/ Angry]

Then you see that the output is from the background image. Then rely on background-position to position

What I want to know is how the front end parses [/angry]? ?

Second, does it not need to be processed when the front end sends it to the back end? Send directly[/angry]?

Answer 1

• First of all, this actually does not require front-end analysis. You can check the code of these emoticons in the editor (as shown below). They should also have attribute values ​​similar to title="angry". When the front end clicks on these icons, it directly splices the title corresponding to the icon element into a string in the [/...] format, and writes it into the text editing box.
  

• Second, the front-end sends it to the back-end without processing, it is sent directly [/angry].

• Third, when getting other people’s comments (that is to say, not in the edit box but in the comment list), the data provided by the backend to the frontend is plain text like Comments Comments[/ Angry][/ Angry], The front-end replaces the text in the [/...] format with the <span... title="angry" class="face-item ..."></span> Emoji tags with pictures as background.