欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>&nbsp;`);
    index = value.indexOf('@', index + 1);
 }
 return value.replace(/PointTo'>/g, "PointTo'>@")
};

字符串中各類字符標(biāo)簽過濾

1、替換字符串中的所有特殊字符（包含空格）

trimSpecial(string) {
 //替換字符串中的所有特殊字符（包含空格）
 if (string != '') {
 const pattern = /[`~!@#$^\-&nbsp*()=|{}':;',\\\[\]\.<>
\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\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,親測有效,避坑

    如何在Vue3中正確使用ElementPlus,親測有效,避坑

    這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測有效,避坑！具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue 如何實(shí)現(xiàn)配置@絕對路徑

    vue 如何實(shí)現(xiàn)配置@絕對路徑

    這篇文章主要介紹了vue 如何實(shí)現(xiàn)配置@絕對路徑，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目

    詳解如何使用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í)踐思路詳解

    這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2018-05-05
  • Vue頁面首次載入優(yōu)化的全過程

    Vue頁面首次載入優(yōu)化的全過程

    凡是做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組件的幾種方法匯總

    這篇文章主要介紹了html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
    2020-11-11
  • 淺析 Vue 3.0 的組裝式 API（一）

    淺析 Vue 3.0 的組裝式 API（一）

    這篇文章主要介紹了 Vue 3.0 的組裝式 API的部分資料，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
    2020-08-08
  • vue實(shí)現(xiàn)頂部菜單欄

    vue實(shí)現(xiàn)頂部菜單欄

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頂部菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • Vue3-KeepAlive,多個(gè)頁面使用keepalive方式

    Vue3-KeepAlive,多個(gè)頁面使用keepalive方式

    這篇文章主要介紹了Vue3-KeepAlive，多個(gè)頁面使用keepalive方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解

    Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解

    這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03

最新評論