【正则表达式】正则表达式里使用变量

js 复制代码
const shuai = 'No'
'My Name Is ShuaiGe'.match(new RegExp(shuai, 'gi'));
//↑↑↑↑↑↑↑↑
//等同于
//↓↓↓↓↓↓↓↓
/No/gi.test('My Name Is ShuaiGe')

用作领域

  • 搜索的字符动态改变,例如↓
  • 模糊搜索
  • 例:
    • 一个文本宽,输入文本模糊搜索用户

  • 现有n条数据,文本框输入时模糊过滤
js 复制代码
<template>
    <input
      type="text"
      @input="inputEv"
      v-model="search"
      placeholder="输入用户昵称"
    />
    <h5 style="border-bottom: dashed 1px black" v-for="i in renderList">
      {{ i.name }}
    </h5>
</template>
<script setup>
import { ref } from "vue";

// 假如这里有很多数据
const data = [
  {
    name: "abcsjddhfjkfkfedkfdjf",
  },
  {
    name: "dfefea",
  },
  {
    name: "fefefee",
  },
  {
    name: "dddwd",
  },
  {
    name: "dwdwd",
  },
  {
    name: "2233",
  },
  {
    name: "ewe34",
  },
  {
    name: "dwdw",
  },
  {
    name: "343dw",
  },
  {
    name: "2343w",
  },
  {
    name: "343ewd",
  },
  {
    name: "2344wd",
  },
  {
    name: "343edwd",
  },
  {
    name: "343wd",
  },
  {
    name: "e2432ew",
  },
  {
    name: "22ewd",
  },
  {
    name: "ewe243",
  },
];
const renderList = ref([]);
const search = ref("");

/**
 * input事件触发
 */
const inputEv = _ =>  renderList.value = filterArr(search.value, data)//开始调用过滤方法

/**
 * 数据过滤器
 * @param {String} filterStr 过滤的字符串
 * @param {Array} arr 查询的数组
 * @returns Array 过滤返回的数组
 */
const filterArr = (filterStr, arr) => {
  // 若传入空值,返回空数组
  if (filterStr === "") return [];

  const fliterData = [];
  arr.forEach((it) => {
    // 正则表达式 -> 相当于 -> /xxxx/.test(it.name) -> xxxx表示动态正则 ↓
    const reg = new RegExp(filterStr, "gi");
    const res = it.name.match(reg); //开始模糊搜索

    // 搜索到,push到fliterData
    if (res !== null) fliterData.push(it);
  });

  // 最后返回过滤的数组
  return fliterData;
};
</script>

效果图

t1

t2

t3

相关推荐
浪里行舟30 分钟前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder1 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233402 小时前
React Hooks完全指南
前端·javascript·react.js
Moment2 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead2 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js