【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);}