vue如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的
更新時(shí)間：2023年10月09日 14:29:53 作者：妍崽崽@
這篇文章主要介紹了vue如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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)文章
這篇文章主要介紹了vite中如何使用@?配置路徑別名，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要介紹了在vscode里使用.vue代碼模板的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
vue服務(wù)端渲染頁面緩存和組件緩存的實(shí)例詳解
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于vue服務(wù)端渲染頁面緩存和組件緩存的介紹（代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下2018-09-09
vue 接口請求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue3 源碼解讀之 time slicing的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
使用Vue Router進(jìn)行路由組件傳參的實(shí)現(xiàn)方式
Vue Router 為 Vue.js 應(yīng)用提供了完整的路由解決方案,其中包括了組件間的數(shù)據(jù)傳遞功能,通過路由組件傳參,我們可以輕松地在導(dǎo)航到新頁面時(shí)傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進(jìn)行路由組件間的傳參,并通過多個(gè)示例來展示其實(shí)現(xiàn)方式2024-09-09
Vue源碼學(xué)習(xí)記錄之手寫vm.$mount方法
在我們開發(fā)中，經(jīng)常要用到Vue.extend創(chuàng)建出Vue的子類來構(gòu)造函數(shù)，通過new 得到子類的實(shí)例，然后通過$mount掛載到節(jié)點(diǎn)，今天通過本文給大家講解手寫vm.$mount方法 ，感興趣的朋友一起看看吧2022-11-11
Ant Design Vue全局對話確認(rèn)框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對話確認(rèn)框(confirm)的回調(diào)不觸發(fā)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue中使用console.log打印的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用console.log打印的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04