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