vue基础-JS正则表达式获取字符串中的特定字符如id=“123“

---

---

前言

vue基础，最近做项目需要到一套icon图标，然后能够取到远程的js文件，需要通过解析远程的js文件中取到全部的id字段后的数据。如 </symbol><symbol id="bingxieskates" viewBox="0 0 48 48" fill="none">能拿到bingxieskates

---

一、链接如下

1、远程js链接
远程js链接

2、js内容

!function(e){var t,n,d,o,i,a,r='<svg><symbol id="beixinvest" viewBox="0 0 48 48" fill="none"><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#333" d="M36 4h-5l-7 20v20h16V19l-4-6V4ZM12 4h5l7 20v20H8V19l4-6V4Z" data-follow-stroke="#333"/></symbol><symbol id="bingxieskates" viewBox="0 0 48 48" fill="none"><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#333" d="M5 5h26v8H5V5Zm4 31V13h18v10c14 0 14 9 14 13H9Zm-2 0h36v6H7z" data-follow-stroke="#333"/></symbol><symbol **id="bendilocal-pin"** viewBox="0 0 48 48" fill="none">
<path stroke-linejoin="round" stroke-width="3" stroke="#333" d="M24 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" data-follow-stroke="#333"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#333" d="M24 20v18m-8-6h-4L4 44h40l-8-12h-4" data-follow-stroke="#333"/></symbol><symbol id="chuangyicreative" viewBox="0 0 48 48" fill="none">
<path stroke-linejoin="round" stroke-width="3" stroke="#333" d="M42 39V9a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3Z" data-follow-stroke="#333"/><path stroke-linejoin="round" stroke-width="3" stroke="#333" d="m24 18.316-2.896 5.91-6.578.954 4.765 4.658-1.139 6.478L24 33.199l5.849 3.117-1.13-6.478 4.756-4.658-6.541-.954L24 18.316Z" data-follow-stroke="#333"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#333" d="M18.316 12.632h11.368" data-follow-stroke="#333"/>
</symbol><symbol id="tiaosepanplatte" viewBox="0 0 48 48" fill="none"><path stroke-linejoin="round" stroke-width="3" stroke="#333" d="M24 44c5.96 0 2.336-8.864 6-13 3.126-3.53 14-1.914 14-7 0-11.046-8.954-20-20-20S4 12.954 4 24s8.954 20 20 20Z" data-follow-stroke="#333"/><path stroke-linejoin="round" stroke-width="3" stroke="#333" d="M28 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-12 4a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm1 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" data-follow-stroke="#333"/></symbol><symbol id="beibaobackpack" viewBox="0 0 48 48" fill="none"><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#333" d="M19 9.556V4h-6v10m16-4.444V4h6v10" data-follow-stroke="#333"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#333" d="M11 20c0-

二、在vue3中通过正则表达式的id字符

1、添加配置

import axios from 'axios'
onMounted(() => {
  axios.get('https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_27009_38.f639a2a509c555764c62d5165cbf442e.js').then((response) => {
    console.log('打印解析数据==', response.data)
    const reg = /id="((\w|-|\s)+)/ig
    const arr = []
    response.data.replace(reg, function () {
      arr.push(arguments[1])
    })
    console.log('打印一下数组===', arr)
  })
})

2、拿到的数组如下：

['beixinvest', 'bingxieskates', 'bendilocal-pin', 'chuangyicreative', 'tiaosepanplatte', 'beibaobackpack', 'baobiaotable-report', 'bizhongduihuanpayment-method', 'dayinjiprinter-two', 'boshimao1bachelor-cap-one', 'bangqiumaobaseball-cap', 'daohangnavigation', 'celiangscale-one', 'biaojimark', 'bofangjinduplayback-progress', 'caomaostraw-hat', 'dianbowaves', 'changpianjirecord', 'diantaifm', 'diqiuyiearth', '3Dyanjingthree-d-glasses', 'Txut-shirt', 'banshouspanner', 'chukuoutbound', 'chaopiaopaper-money-two', 'chakainsert-card', 'dianzuanelectric-drill', 'dianyingmovie', 'dakaiopen-one', 'biaogetable-file', 'anquanmaohelmet-one', 'chaopiaopaper-money', 'cidaitape', 'APIyingyongapi-app', 'daochuexport', 'danjianbaothe-single-shoulder-bag', 'chengjiaotransaction', 'danjianbaoshoulder-bag']

总结

这就是JS正则表达式获取字符串中的特定字符的方法，希望帮助到你。