【vuejs】富文本框输入的字符串按规则解析填充表单

今天遇到一个批量添加信息的需求,按照格式要求解析后填充到表单中,不符合规则的直接过滤掉

在这里插入图片描述

在这里插入图片描述

注:添加的信息都是随机生成,不用于实际用途

这是弹框输入的文本解析代码

export const editValToArr = (value, bankArr) => {return new Promise((res, rej) => {setTimeout(() => {value = replaceBRwithP(value);let val = value.replace(/(<p><br\/><\/p>)/gi, '');// 获取包含<p>标签的父元素var parentElement = document.createElement('div');parentElement.innerHTML = val;// 获取所有的<p>标签var pElements = parentElement.getElementsByTagName('p');// 将文本内容转换为数组var arr = Array.from(pElements).map(function (p) {return p.innerText;});// 定义临时存储乘机人信息的数组let passengerArr = [];for (let index = 0; index < arr.length; index++) {const element = arr[index];if (sumStr(element, '/') === 2) {let arrStr = element.split('/');let obj = {PassengerName: filterInput(arrStr[0].trim().toUpperCase()),CertificateType: 1,IdNumber: filterInput(arrStr[1].trim().toUpperCase()),CardBin: findBankId(bankArr, arrStr[2].trim()),};obj.CardBin !== '' && passengerArr.push(obj);}}res(passengerArr);}, 20);});
};// 替换所有的 <br/> 标签为 <p></p>
function replaceBRwithP(htmlContent) {return htmlContent.replace(/<br\s*\/?>/gi, '<br/></p><p>');
}// 过滤输入字符串的特殊字符
function filterInput(input) {return input.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s\r\n\\/]/g, '');
}function findBankId(arr, name) {let index = arr.findIndex(item => item.nameArr.includes(name));return index === -1 ? '' : arr[index].CardBin;
}
	/*** @desc 确定按钮事件*/async confim() {// // 验证是否输入了乘机人信息if (isNull(this.info_)) return (this.errorStr = '请输入信息');if (StrToArr(this.info_).length > 100) return (this.errorStr = '最多可添加100行');this.btnLoading = true;let data = await editValToArr(this.info_, this.bankArr);this.cancel();this.btnLoading = false;this.$emit('setValue', data);}

如果这篇文章对你有所帮助,欢迎点赞、分享和留言,让更多的人受益。感谢你的细心阅读,如果你发现了任何错误或需要补充的地方,请随时告诉我,我会尽快处理。

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

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

相关文章

vue2-render:vue2项目使用render / 基础使用

一、本文内容 本文内容记录render常用的一些属性和方法的配置&#xff0c;以作参考 export default { data() {return { modelValue: ,key: 0,}; }, render(h) { return h(div, [ h(input, {class: input,attrs: { type: text }, key: this.key,props: { value: thi…

【mysql进阶】2-4. mysql 系统库

mysql System Schema (mysql系统库) Mysql Schema是⼀个系统库&#xff0c;表中存储了MySQL服务器运⾏时所需的信息。⼴义上&#xff0c;mysqlschema包含存储数据库对象元数据的数据字典和⽤于其他操作⽬的的系统表。数据字典表和系统表位于数据⽬录下⼀个名为 mysql.ibd 的表…

“声音”音源设置和音效播放

学习如何使用音效系统&#xff0c;背景音乐和其他特别的音效&#xff0c;跳跃攻击等等 学习如何在unity当中使用整套的音效系统&#xff0c;使用之前&#xff0c;我们先来确定一下我们要使用的音乐和音效&#xff0c;在Unity Asset Store当中搜索&#xff0c;添加到我们的unit…

详解Oracle审计(二)

题记&#xff1a; 本文将承接上篇详细介绍oracle的审计功能&#xff0c;基于11g版本&#xff0c;但对12c&#xff0c;19c也同样适用。 1. 语句审计实操演示实例 sqlplus / as sysdba show parameter audit_trail alter system set audit_traildb_extended scopespfile; star…

OpenCV和HALCON

OpenCV和HALCON是两种广泛用于图像处理和计算机视觉的开发库&#xff0c;它们各有优缺点&#xff0c;适合不同的应用场景。以下是两者的比较&#xff1a; 1. 开发背景与定位 OpenCV (Open Source Computer Vision Library)&#xff1a; 开源库&#xff0c;最初由Intel开发&…

Gitlab 完全卸载–亲测可行

1、停止gitlab gitlab-ctl stop2.卸载gitlab&#xff08;注意这里写的是gitlab-ce&#xff09; rpm -e gitlab-ce 3、查看gitlab进程 ps aux | grep gitlab 4、杀掉第一个进程&#xff08;就是带有好多.............的进程&#xff09; 5、删除所有包含gitlab文件 find / …

【计网】深入理解网络通信:端口号、Socket编程及编程接口

目录 1.端口号 1.1.理解源 IP 地址和目的 IP 地址 1.2.认识端口号 1.3.端口号范围划分 1.4理解 "端口号" 和 "进程 ID" 2.socket编程 2.1.理解 socket 2.2.socket编程的概念 2.3. 传输层的典型代表 认识 TCP 协议 认识 UDP 协议 2.3 网络字节序…

基于Multisim的水位测量电路设计与仿真

1.利用LED指示灯显示水位&#xff08;最低水位、1/4、1/2、3/4、最高水位&#xff09;。 2.达到最高水位时&#xff0c;自动报警。

探索Python与Excel的无缝对接:xlwings库的神秘面纱

文章目录 探索Python与Excel的无缝对接&#xff1a;xlwings库的神秘面纱1. 背景介绍&#xff1a;为何选择xlwings&#xff1f;2. xlwings是什么&#xff1f;3. 如何安装xlwings&#xff1f;4. 简单的库函数使用方法打开工作簿创建工作簿读取单元格数据写入单元格数据保存并关闭…

消息会话—发送消息自动滚动到最底部

背景 在项目开发中&#xff0c;实现用户友好的输入交互是提升用户体验的关键之一。例如&#xff0c;在消息会话页面中&#xff0c;为了确保用户在发送新消息后页面能自动滚动到最底部&#xff0c;从而始终保持最新消息的可见性&#xff0c;需要实现自动滚动功能。这不仅提升了…

Spring Boot集成:高效论坛网站的构建

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理论坛网站的相关信息成为必然。开发合适的论…

【GISBox使用指南】免费实现影像切片的工具,还支持多种格式服务发布!

一、什么是影像数据&#xff1f; 在地理信息系统中&#xff0c;影像数据是指通过遥感技术、摄影测量或其他成像手段获取的&#xff0c;以数字形式存储的地理空间图像信息。这些数据涵盖了从卫星遥感影像、航空摄影影像到地面摄影影像等多种类型&#xff0c;在GIS中的应用广泛而…

知乎付费投流怎么做?如何投放知乎广告?

知识经济背景下&#xff0c;知乎凭借其高质量的内容和精准的用户群体&#xff0c;成为了品牌营销的新蓝海。作为国内领先的知识分享平台&#xff0c;知乎汇聚了大量高学历、高收入、高消费能力的用户&#xff0c;他们对新知识、新产品有着强烈的好奇心和探索欲&#xff0c;是品…

成功解决pycharm软件中按住Ctrl+点击指定函数却不能跳转到对应库中的源代码

成功解决pycharm软件中按住Ctrl点击指定函数却不能跳转到对应库中的源代码 目录 解决问题 解决方法 解决问题 在pycharm软件中按住Ctrl点击指定函数却不能跳转到对应库中的源代码 解决方法

github pages + hugo 搭建静态博客网站

体验地址 1. 起因&#xff0c; 目的: 其实6年前&#xff0c;我就写过这个。 项目代码 博客地址 最近想改写一下。 github 推荐的主题是 Jekyll&#xff0c; 我当时用的就是这个&#xff0c;感觉很麻烦。尤其是文章命名。 新的主题 hugo 用起来还行。 2.过程: 过程记录&am…

比较相同机器上 redis和mysql分别单独承载的 最大连接数量

在相同的机器上&#xff0c;Redis 和 MySQL 的最大连接数量会受到硬件配置&#xff08;如 CPU、内存、网络等&#xff09;、配置参数和应用场景的影响。以下是对 Redis 和 MySQL 在单机环境下最大连接数的比较&#xff1a; Redis 最大连接数量 默认配置&#xff1a; Redis 默…

轻松掌握Win10录屏技巧:四大神器推荐!

在Win10系统中&#xff0c;录屏功能的应用越来越广泛&#xff0c;无论是用于工作演示、在线教学还是游戏分享&#xff0c;一款好用的录屏软件都是必不可少的。今天&#xff0c;我们将推荐四款录屏工具&#xff01; 福昕录屏大师 直达链接&#xff1a;www.foxitsoftware.cn/RE…

iOS--利用UITableViewDataSourcePrefetching实现平滑如丝的无限滚动

前言&#xff1a; 相信大家在网络不好的时候使用列表分页的App会获得非常不好的体验&#xff0c;由于网络的问题&#xff0c;会有明显的卡顿&#xff0c;就像抖音等App&#xff0c;那么我们是否能使用一些手段来优化这个体验呢&#xff1f;这里可以用到UITableView中另一个协议…

Linux Debian12基于ImageMagick图像处理工具编写shell脚本用于常见图片png、jpg、jpeg、tiff格式批量转webp格式

在Linux系统中&#xff0c;使用ImageMagick可以图片格式转换&#xff0c;其中最常用的是通过命令行工具进行。 ImageMagick是一个非常强大的图像处理工具集&#xff0c;它包含了许多用于图像转换的命令。 一、安装ImageMagick&#xff08;如果尚未安装&#xff09;&#xff1…

蓝牙资讯|iOS 18.1 正式版下周推送,AirPods Pro 2耳机将带来助听器功能

苹果公司宣布将在下周发布 iOS 18.1 正式版&#xff0c;同时确认该更新将为 AirPods Pro 2 耳机带来新增“临床级”助听器功能。在启用功能后&#xff0c;用户首先需要使用 AirPods 和 iPhone 进行简短的听力测试&#xff0c;如果检测到听力损失&#xff0c;系统将创建一项“个…