How can I add @ username to a comment or article and receive notifications from @ users?

Add @ username to comments or articles. this username automatically adds a tag for the user's homepage address, and @ users can receive notifications. how can this function be implemented? Add @ username to comments or articles. this username automatically adds a tag for the user's homepage address, and @ users can receive notifications. how can this function be implemented? Reply content: after each comment and article is sent, it will match the group with the content after @, for example, to a rule like a separator, and then asynchronously press into a message queue.

Whether there are users in this queue, and broadcast messages to existing users.

The back-end logic is probably like this. There is no processing for the edit class, but it is only done in the insert step.

Here, we can abstract an interface for finding at users and abstract an interface for detecting at users.

I have done the same for the front-end. for the web, the change in the rich text is directly changed. after finding an, select the most recent at or separator character in the operation range and request this character key to list the prompts of Friends of the current user or the user like of the whole site, the presentation is the positioning calculation of the floating layer and the cursor position. After the mouse is selected, the text may be marked.

This step mainly increases the backend matching speed and eliminates text regex when detecting the mark. You can resolve the marked notification user at the front end and send it to the backend.

The implementation logic may be different for everyone here. The general steps should be the above. Come and come, let's take a look at how things are done.
First of all, when you try someone in the answer, the nickname is displayed, and the nickname can be repeated in Zhihu. Obviously, you cannot determine who at is based on this nickname.
We can try @ someone in the answer. First, we can see that the font color of the username section after @ has changed, which is different from that of the text style, note that at is surrounded by a tag. F12 enables browser debugging and locates the html code in @, for example:

Obviously, Zhihu uses a tag a to enclose @ and username. pay attention to the data-hash attribute circled in red and class = "member_mention ", the class attribute can change the style or indicate that someone is at the same time, while the data-hash attribute is PossibleIs used to identify the at user Unique IdentifierAfter the answers are submitted, Zhihu server can quickly identify your at users based on the member_mention and hash key attributes (of course, I am not an employee, this is just a personal guess, not necessarily the real implementation method, but this method is feasible), then you can send a notification to the corresponding user, after identifying the user, as for the function of displaying User business cards, it only gives simple js and css problems. Baidu post it directly @ someone and then parse it.
Zhihu selects a person after the input @, which is OK and does not need to be parsed. Directly submit the id of this person to the background.
This may be unique with the Baidu Post bar id. it also has a relationship between the nickname and the id. Add a parsing logic in the application layer to capture at from the content submitted by the user. considering that the Zhihu editor can also be displayed in real time, this indicates that an api in the background exposes this function. Parse the first valid username after @ and try to send notifications...
It can also be like Zhihu. as you are prompted for real-time typing, you can select regular expression matching to check whether the user name exists.
View the source code of Discuz.
If the content cannot be edited, you can do it as needed.
If you can, your business needs are not clear enough.