vue如何把字符串中的所有@内容,替换成带标签的
作者：妍崽崽@
这篇文章主要介绍了vue如何把字符串中的所有@内容,替换成带标签的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue把字符串中的所有@内容,替换成带标签的
目前有个需求是，要把输入框里面的@还有姓名高亮。
要求：
1、必须用 v-html ,带标签的给他渲染
2、把字符串中的@全部查找出来，替换掉，注意要过滤已经替换好的，不然就是无限循环了
实现方法：
// 消息展示中处理@样式
const textPointTo = (content:any) => {
let index = value.indexOf('@');
while (index !== -1) {
const endIndex = value.indexOf(' ', index);
const replaceStr = value.substring(index, endIndex !== -1 ? endIndex : undefined);
value = value.replace(replaceStr, `<span class='replyPointTo'>${replaceStr.split('@')[1]}</span> `);
index = value.indexOf('@', index + 1);
}
return value.replace(/PointTo'>/g, "PointTo'>@")
};字符串中各类字符标签过滤
1、替换字符串中的所有特殊字符（包含空格）
trimSpecial(string) {
//替换字符串中的所有特殊字符（包含空格）
if (string != '') {
const pattern = /[`~!@#$^\- *()=|{}':;',\\\[\]\.<>
\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g
string = string.replace(pattern, '')
}
return string
}2、过滤字符串中的img标签元素
removeImg(v) {
let data = v.replace(/<img.*>/gi, '')
return data
},3、过滤转义符、p标签
removeP(v) {
if (v != '') {
v = v.replace(/ /gi, ' ')
v = v.replace(/
/gi, '')
v = v.replace(/</gi, '<')
v = v.replace(/>/gi, '>')
v = v.replace(/<br \/>/g, '')
v = v.replace(/<\/?p[^>]*>/gi, '')
}
return v
},4、过滤掉html标签
delHtmlTag(str) {
let a = str
var converter = document.createElement('DIV')
converter.innerHTML = a
var b = converter.innerText
converter = null
var c = b.replace(/[&\|\\\*^\-]/g, '')
return c.replace(/\s*/g, '')
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。