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

生活、追梦者2024-10-25 18:57

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

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

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

js 复制代码

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

js 复制代码

	/**
     * @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);
    }

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