How to replace all @ content in a string with labeled

vue replaces all @ content in the string with labeled

There is currently a requirement to highlight the @ and name in the input box.

Require:

1. You must use v-html and render it with labels.

2. Find out all @ in the string and replace it. Be careful to filter the replaced ones, otherwise it will be an infinite loop.

Implementation method:

// Process @ styles in message displayconst textPointTo = (content:any) =&gt; {
  let index = ('@');
  while (index !== -1) {
    const endIndex = (' ', index);
    const replaceStr = (index, endIndex !== -1 ? endIndex : undefined);
    value = (replaceStr, `&lt;span class='replyPointTo'&gt;${('@')[1]}&lt;/span&gt;&amp;nbsp;`);
    index = ('@', index + 1);
 }
 return (/PointTo'&gt;/g, "PointTo'&gt;@")
};

Filtering of various characters in strings

1. Replace all special characters in the string (including spaces)

trimSpecial(string) {
 //Replace all special characters in the string (including spaces) if (string != '') {
 const pattern = /[`~!@#$^\-&amp;nbsp*()=|{}':;',\\\[\]\.&lt;&gt;
\/?~！@#￥……&amp;*（）——|{}【】'；：""'。，、？\s]/g
 string = (pattern, '')
 }
 return string
 }

2. Filter the img tag elements in the string

 removeImg(v) {
 let data = (/<img.*>/gi, '')
 return data
 },

3. Filter escape characters and p tags

 removeP(v) {
 if (v != '') {
 v = (/ /gi, ' ')
 v = (/
/gi, '')
 v = (/</gi, '<')
 v = (/>/gi, '>')
 v = (/<br \/>/g, '')
 v = (/<\/?p[^>]*>/gi, '')
 }
 return v
 },

4. Filter out html tags

 delHtmlTag(str) {
 let a = str
 var converter = ('DIV')
  = a
 var b = 
 converter = null
 var c = (/[&\|\\\*^\-]/g, '')
 return (/\s*/g, '')
 },

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.