找到相关@用户 内容并重新组装thml
orderMsgMemberArr: [{ username: 'leibo2' }, { username: 'leibo' }]// 聊天室的对应账号
// let txt = '@leibo2 '
// let txt = '11 @leibo2 (雷波公安2) 来看看 @leibo 123'
// let txt = '@leibo2 (雷波公安2) 来看看 @leibo 123'
// let txt = JSON.parse('"11\\n22\"')
let txt = '@leibo 1 @leibo2 2\n@leibo3 3 @leibo4 4'let txt = '@leibo 1 @leibo2 2\n@leibo3 3 @leibo4 4'
let html = this.atFilter(txt.replace(/\n/g, "<br/>"))// 换行替换成br
console.log(html) // <span>leibo</span> 1 <span>leibo2</span> 2<br/> <span>leibo3</span> 3 <span>leibo4</span> 4
/** 找到相关@用户 内容并重新组装thml */
atFilter(txt) {
let htmlTxt = ''
let index1 = null; let index2 = null;
let size = 0
/** 递归 */
let htmlFun = (txt, index1, index2) => {
// console.log(size, txt, index1, index2)
if (size == 0 && txt.indexOf('@') == 0 || txt.indexOf(' @') == 0) {
// 首次并且第一个是@
size++
index1 = txt.indexOf('@')
index2 = txt.indexOf(' ', index1 + 1)
if (index2 != -1) {
let userTxt = txt.slice(index1 + 1, index2)
// console.log(userTxt)
if (this.orderMsgMemberArr.some((v) => (v.username == userTxt))) {
htmlTxt = `<span>${txt.slice(index1 + 1, index2)}</span>`
// console.log(htmlTxt)
if (index2 != txt.length - 1) {
htmlFun(txt.slice(index2), index1, index2)
}
} else {
htmlTxt = `${txt.slice(index1, index2 + 1)}`
// console.log(htmlTxt)
if (index2 != txt.length - 1) {
htmlFun(txt.slice(index2), index1, index2)
}
}
} else {
htmlTxt = txt
}
} else {
size++
if (index2 == null) {
index1 = txt.indexOf(' @')
index2 = txt.indexOf(' ', index1 + 2)
// console.log(txt)
// console.log(index1, index2)
if (index1 == -1) {
htmlTxt = txt
} else if (index2 > 0 && index2 == txt.length - 1) {
let userTxt = txt.slice(index1 + 2, index2)
if (this.orderMsgMemberArr.some((v) => (v.username == userTxt))) {
htmlTxt += `${txt.slice(0, index1)} <span>${txt.slice(index1 + 2, index2)}</span>`
} else {
htmlTxt += `${txt.slice(0, index1)} ${txt.slice(index1 + 2, index2)}`
}
} else {
let userTxt = txt.slice(index1 + 2, index2)
// console.log(userTxt)
if (this.orderMsgMemberArr.some((v) => (v.username == userTxt))) {
htmlTxt += `${txt.slice(0, index1)} <span>${txt.slice(index1 + 2, index2)}</span>`
} else {
htmlTxt += `${txt.slice(0, index1)} ${txt.slice(index1 + 2, index2)}`
}
htmlFun(txt.slice(index2), index1, index2)
}
} else {
let index0 = txt.indexOf('<br/>@')
index1 = txt.indexOf(' @')
// console.log(index0, index1)
if (index0 != -1 && index0 < index1) {
index1 = index0 + 4
index2 = txt.indexOf(' ', index1 + 2)
if (index1 == -1) {
htmlTxt += txt
// console.log(htmlTxt)
} else {
let userTxt = txt.slice(index1 + 2, index2)
// console.log(userTxt)
// console.log(txt)
// console.log(txt.slice(0, index1 + 1))
if (this.orderMsgMemberArr.some((v) => (v.username == userTxt))) {
htmlTxt += `${txt.slice(0, index1 + 1)} <span>${txt.slice(index1 + 2, index2)}</span>`
} else {
htmlTxt += `${txt.slice(0, index1 + 1)} <span>${txt.slice(index1 + 2, index2)}</span>`
}
// console.log(htmlTxt)
htmlFun(txt.slice(index2), index1, index2)
}
} else {
index2 = txt.indexOf(' ', index1 + 2)
// console.log(index1, index2)
if (index1 == -1) {
htmlTxt += txt
// console.log(htmlTxt)
} else {
let userTxt = txt.slice(index1 + 2, index2)
// console.log(userTxt)
// console.log(txt)
// console.log(txt.slice(0, index1 + 1))
if (this.orderMsgMemberArr.some((v) => (v.username == userTxt))) {
htmlTxt += `${txt.slice(0, index1)} <span>${txt.slice(index1 + 2, index2)}</span>`
} else {
htmlTxt += `${txt.slice(0, index1)} <span>${txt.slice(index1 + 2, index2)}</span>`
}
// console.log(htmlTxt)
htmlFun(txt.slice(index2), index1, index2)
}
}
}
}
// console.log(htmlTxt)
return htmlTxt
}
return htmlFun(txt, index1, index2)
}
网友评论