vue如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的
更新時(shí)間：2023年10月09日 14:29:53 作者：妍崽崽@
這篇文章主要介紹了vue如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的
目前有個(gè)需求是，要把輸入框里面的@還有姓名高亮。
要求：
1、必須用 v-html ,帶標(biāo)簽的給他渲染
2、把字符串中的@全部查找出來，替換掉，注意要過濾已經(jīng)替換好的，不然就是無限循環(huán)了
實(shí)現(xiàn)方法：
// 消息展示中處理@樣式
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'>@")
};字符串中各類字符標(biāo)簽過濾
1、替換字符串中的所有特殊字符（包含空格）
trimSpecial(string) {
//替換字符串中的所有特殊字符（包含空格）
if (string != '') {
const pattern = /[`~!@#$^\- *()=|{}':;',\\\[\]\.<>
\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g
string = string.replace(pattern, '')
}
return string
}2、過濾字符串中的img標(biāo)簽元素
removeImg(v) {
let data = v.replace(/<img.*>/gi, '')
return data
},3、過濾轉(zhuǎn)義符、p標(biāo)簽
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標(biāo)簽
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, '')
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑！具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue 如何實(shí)現(xiàn)配置@絕對(duì)路徑
這篇文章主要介紹了vue 如何實(shí)現(xiàn)配置@絕對(duì)路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目
這篇文章主要介紹了詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目 ,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
凡是做SPA的項(xiàng)目,特別是移動(dòng)端的SAP項(xiàng)目,首屏加載速度必定是一個(gè)繞不過去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12
html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總
這篇文章主要介紹了html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了 Vue 3.0 的組裝式 API的部分資料，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頂部菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue3-KeepAlive,多個(gè)頁面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive，多個(gè)頁面使用keepalive方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03