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

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

用作领域

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

  • 现有n条数据,文本框输入时模糊过滤
<template><inputtype="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到fliterDataif (res !== null) fliterData.push(it);});// 最后返回过滤的数组return fliterData;
};
</script>

效果图

t1

在这里插入图片描述

t2

在这里插入图片描述

t3

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/743085.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud Gateway 新一代网关

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第六篇&#xff0c;即介绍 Gateway 新一代网关。 二、概述 2.1 Gateway 是什么 Gateway 是在 Spring 生…

基于SSM的协同过滤算法的电影推荐系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的协同过滤算法的电影推荐系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:TextArea)

多行文本输入框组件&#xff0c;当输入的文本内容超过组件宽度时会自动换行显示。 高度未设置时&#xff0c;组件无默认高度&#xff0c;自适应内容高度。宽度未设置时&#xff0c;默认撑满最大宽度。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&…

Elastic random_score的使用

random_score的使用 在Elasticsearch中&#xff0c;random_score查询可以用来随机排序搜索结果&#xff0c;这对于实现诸如轮播、随机推荐等功能非常有用。 random_score的语法 GET /<索引名>/_search {"query": {"function_score": {"query…

【Docker】APISIX Ingress Controller部署

APISIX Ingress Controller环境标准软件基于Bitnami apisix-ingress-controller:构建。当前版本为1.8.0 你可以通过轻云UC部署工具直接安装部署&#xff0c;也可以手动按如下文档操作&#xff0c;该项目已经全面开源&#xff0c;可以从如下环境获取 配置文件地址: https://git…

前端面试 ===> 【Vue2】

Vue2 相关面试题总结 1. 谈谈对Vue的理解 Vue是一种用于构建用户页面的渐进式JavaScript框架&#xff0c;也是一个创建SPA单页面应用的Web应用框架&#xff0c;Vue的核心是 数据驱动试图&#xff0c;通过组件内特定的方法实现视图和模型的交互&#xff1b;特性&#xff1a;&a…

选型|匠芯创工业级显示控制MCU

D13x系列微控制器 匠芯创D13x系列是一款基于RISC-V架构的高性能、国产自主、工业级跨界MCU&#xff0c;配备强大的2D图形加速、PNG解码、JPEG编解码引擎&#xff0c;具有丰富的屏接口&#xff0c;具有工业宽温、高可靠性、高开放性&#xff0c;可广泛应用于工业HMI、网关、串口…

解决vue2+elementUI的下拉框出现自动校验的问题

问题&#xff1a; 总结原因是因为新增的时候&#xff0c;传了空值进去 可以这样子解决 this.formData.value && this.$set(this.model, this.formData.key, this.formData.value)这种是只有值存在的时候才会给他赋值&#xff0c;但是这只解决单选下拉框&#xff0c;…

【华为OD机试】爱吃蟠桃的孙悟空【C卷|200分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 孙悟空爱吃蟠桃,有一天趁着蟠桃园守卫不在来偷吃。已知蟠桃园有 N 棵桃树, 每颗树上都有桃子,守卫将在 H 小时后回来。 孙悟空可以决定他吃蟠桃的速度K(个/小时),每个小时选一颗桃树…

办公DevOps:即时消息是其他系统的最后一公里

DevOps的理念可以落实到办公领域。办公DevOps的关键点是: 即时消息成为其他系统的最后一公里。其他系统的条目可以作为卡片通过即时消息发送&#xff0c;也可以在即时消息系统中点开卡片进行后续处理&#xff0c;而不需要打开其他系统。 其他系统的条目在即时消息中以类似“小程…

Rust 的 inline 内联编译策略

在 Rust 中&#xff0c;与 C 或 C 中的 inline 关键字不同&#xff0c;Rust 没有一个直接的 inline 编译指示。然而&#xff0c;Rust 编译器在编译时会进行一系列的优化&#xff0c;包括函数内联&#xff0c;这是为了提高代码的执行效率。 Rust 的编译器&#xff08;rustc&…

隧道技术和代理技术(三)

隧道技术 知识点 -隧道技术&#xff1a;解决不出网协议上线的问题&#xff08;利用出网协议进行封装出网&#xff09; -代理技术&#xff1a;解决网络通讯不通的问题&#xff08;利用跳板机建立节点后续操作&#xff09; 内环境示意图&#xff0c;方便理解 思路&#xff1a;…

【Mac】鼠标控制\移动\调整窗口大小BBT|边缘触发调整音量\切换桌面

一直在 win 习惯了通过鼠标的侧键来控制窗口的位置、大小&#xff0c;现在找到心的解决方案了&#xff0c;通过 BBT 设置侧键按下\抬起几颗。 以下解决方案的截图&#xff0c;其中还包括了其他操作优化方案&#xff1b; 滚轮配合 cmd 键调节页面大小&#xff1b;配合 option 键…

Android 卫星通信计算方位角,仰角,极化角

需求描述: 已知手机的经纬度和高度信息&#xff0c;需要通过公式计算出手机收星的最优方位和仰角&#xff0c;用以调整UI界面显示&#xff0c;以便引导用户实现和当前卫星方位和仰角的对准&#xff0c;达到快速入网的目的。 术语说明 术语说明方位角手机天线在所处位置针对北极…

鸿蒙开发面试真题分享~

1. 在鸿蒙应用开发中&#xff0c;有哪些常用的性能优化策略和技术手段&#xff0c;如启动速度优化、内存管理优化、功耗控制等&#xff1f; 参考答案&#xff1a; 2. 鸿蒙系统强调跨平台特性&#xff0c;你会如何利用这一特性来优化多端部署和适配&#xff1f; 参考答案&…

Nuxt3 初学,基础配置,页面结构搭建,引入element

1.下载Nuxt框架 Nuxt 中文站 - 直观的Web框架 Nuxt3文档 NuxtNuxt是一个开源框架&#xff0c;它使web开发直观而强大。自信地创建高性能和生产级全栈web应用程序和网站。https://www.nuxt.com.cn/根据官方文档进行配置 2.配置页面 1.主要页面结构 导航栏内容底部 1.在comp…

YOLOv8独家改进:backbone改进 | TransXNet:聚合全局和局部信息的全新CNN-Transformer视觉主干| CVPR2024

💡💡💡本文独家改进:CVPR2024 TransXNet助力检测,代替YOLOv8 Backbone 改进结构图如下: 收录 YOLOv8原创自研 https://blog.csdn.net/m0_63774211/category_12511737.html?spm=1001.2014.3001.5482 💡💡💡全网独家首发创新(原创),适合paper !!! 💡…

安装yocto过程中遇到的问题记录

步骤我是参考以下链接&#xff1a; https://blog.csdn.net/zz2633105/article/details/126076286 过程中的坑&#xff1a; 一&#xff0c; Please make sure locale en_US.UTF-8 is available on your system解决&#xff1a; To ensure that the locale ‘en_US.UTF-8’ is…

Vcenter esxi web界面访问提示权限被拒绝

一、问题现象 原因 应该是在vCenter中添加主机的时候&#xff0c;将锁定模式设置成了严格。 二、解决过程 2.1 方式一 BMC登录主机&#xff0c;连接显示器和键盘。 输入账号密码&#xff0c;按F2进行设置&#xff0c;将会打开一个界面&#xff0c;第一个选项是设置密码&…

一台服务器部署两个独立的mysql实例

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…