前端智能识别解析粘贴板内容

于 2025-02-10 13:59:09 发布
阅读量495 收藏 6
点赞数 10
分类专栏： web前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43682422/article/details/145548317
版权

原理分析

说白了就是解析特定格式的文字，并将处理好的内容回填到需要的表单中。
为了程序的健壮性，我们解析时需要考虑多种情况。

1、文字行数

单行和多行的解析可以分开
单行的情况如下面这种，

姓名: 七七 电话：788 邮箱：qiqi@qiqi.com 地址：啊啊啊

多行的情况可能是

姓名: 七七 
电话：788 
邮箱：qiqi@qiqi.com
地址：啊啊啊

多行用:const lines = text?.split('\n');分开解析即可

2、中英文冒号兼容

在填写地址时，用户可能打中文冒号或者英文冒号，我们需要兼容确保识别分割的时候程序不会出问题。
split(/[:：]/)即可
当然，这里也可以写正则去分割空格的情况。

3、移除文本信息前后的无用空格

用trim()没什么好说的

4、关键信息匹配

我们需要自定义一个关键词汇库去匹配剪贴板文本信息，我们可以考虑所有关键信息放进一个词汇库，也可以根据表单字段数量分开创建多个词汇库。
列如：
1、词汇库放在一起

const keywords = ['姓名','名字','电话','电话号码','号码','手机','手机号','手机号码','邮箱','邮箱地址','邮件','地址','详细地址'

使用这种放一起的关键字的匹配，优势就是词汇库放一起比较灵活，但是后期处理文本信息的时候略微繁琐，需要拿到一段信息后把这段信息移除，否则会干扰下一段信息的获取。

2、多个词汇库

const nameKeywords = ['姓名','名字','联系人']
const phoneKeywords = ['电话','电话号码','号码','手机','手机号','手机号码']
const emailKeywords = [ '邮箱','邮箱地址','邮件']
const addressKeywords = ['地址','详细地址']

缺点是每个关键字词库只能匹配特定的字段，有多少个字段就需要多少个词汇库。
优点，可以精准匹配，大大简化操作。

实践

我们这里用多个词汇库举例，单个词汇库代码太多了，懒得写，下次想起来再更新。

1、获取粘贴板内容
无论你用的那个技术栈，总有获取粘贴板内容的方法，自己用ai搜下就行，用框架的可以搜对应框架的api，原生的就搜js获取。

2、解析

  • 定义多个关键字库
	  const nameKeywords = ['姓名', '名字', '收件人']; // 匹配姓名关键字
	  const phoneKeywords = ['电话', '手机号码', '手机号', '手机', '联系电话']; // 匹配号码关键字
	  const provinceKeywords = ['所在地区', '省市区']; // 匹配省市区关键字
	  const addressKeywords = ['详细地址', '地址', '完整地址']; // 匹配详细地址关键字
  • 正则先匹配一遍关键字和值
 		let name = '';
        let phone = '';
        let provinceCode: string[] = [];
        let address = '';
        // 使用正则表达式匹配关键字和值
        const regex = new RegExp(
          `(${nameKeywords.join('|')})[:：](.*?)(${phoneKeywords.join(
            '|',
          )})[:：](.*?)(${provinceKeywords.join('|')})[:：](.*?)(${addressKeywords.join(
            '|',
          )})[:：](.*)`,
          'i',
        );

        const match = text.match(regex);
  • 区分单行和多行处理方式
     if (match) {
          // 动态解析关键字和值，处理一行格式的情况
          const parsedFields = {
            [match[1]]: match[2].trim(),
            [match[3]]: match[4].trim(),
            [match[5]]: match[6].trim(),
            [match[7]]: match[8].trim(),
          };

          name = nameKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[nameKeywords.find(keyword => keyword in parsedFields)!]
            : '';
          phone = phoneKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[phoneKeywords.find(keyword => keyword in parsedFields)!]
            : '';

          const provinceText = provinceKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[provinceKeywords.find(keyword => keyword in parsedFields)!]
            : '';
          address = addressKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[addressKeywords.find(keyword => keyword in parsedFields)!]
            : '';
          provinceCode = pareProvinceText(provinceText);
        }
        // 处理多行格式的情况
        else {
          let provinceText = '';
          const lines = text?.split('\n');
          lines.forEach(line => {
            const trimmedLine = line.trim();
            if (nameKeywords.some(keyword => trimmedLine.includes(keyword))) {
              name = trimmedLine.split(/[:：]/).pop()?.trim() || ''; // 中英文冒号处理
            } else if (phoneKeywords.some(keyword => trimmedLine.includes(keyword))) {
              phone = trimmedLine.split(/[:：]/).pop()?.trim() || '';
            } else if (provinceKeywords.some(keyword => trimmedLine.includes(keyword))) {
              provinceText = trimmedLine.split(/[:：]/).pop()?.trim() || '';
            } else if (addressKeywords.some(keyword => trimmedLine.includes(keyword))) {
              address = trimmedLine.split(/[:：]/).pop()?.trim() || '';
            }
          });
          provinceCode = pareProvinceText(provinceText);
        }

  • 上面这里pareProvinceText这个函数是我自己的业务函数，处理省市区的，你们不用管）

  • 将结果回填

		let name = '';
        let phone = '';
        let provinceCode: string[] = [];
        let address = '';

上面的变量是我们保存的结果，回填到需要的地方就行了。

完整示例（用的react-native)

import Clipboard from '@react-native-clipboard/clipboard';

  // 解析省市区粘贴板
  const pareProvinceText = (provinceText: string) => {
    const provinceCode: any[] = [];
    let cityList: any[] = []; // 某省下所有市
    let districtList: any[] = []; // 某省某区下所有区
    let provinceName = '';
    areaList?.some((item: any) => {
      if (provinceText.includes(item?.label)) {
        provinceName = item?.label;
        provinceCode.push(item?.value); // 获取匹配到的省code
        cityList = item?.children;
      }
    });
    cityList?.some((item: any) => {
      if (provinceText?.includes(item?.label)) {
        provinceCode.push(item?.value); // 获取匹配到的市code
        districtList = item?.children;
      }
    });
    districtList?.some((item: any) => {
      if (provinceText?.includes(item?.label)) {
        provinceCode.push(item?.value); // 获取匹配到的区code
        districtList = item?.children;
      }
    });
    return provinceCode;
  };
  // 识别剪切板
  const onCheckClipboard = () => {
    Clipboard.getString()
      .then(text => {
        console.log('text', text);
        if (!text) {
          return Toast.text('剪切板无内容');
        }
        const nameKeywords = ['姓名', '名字', '收件人']; // 匹配姓名关键字
        const phoneKeywords = ['电话', '手机号码', '手机号', '手机', '联系电话']; // 匹配号码关键字
        const provinceKeywords = ['所在地区', '省市区']; // 匹配省市区关键字
        const addressKeywords = ['详细地址', '地址', '完整地址']; // 匹配详细地址关键字
        let name = '';
        let phone = '';
        let provinceCode: string[] = [];
        let address = '';
        // 使用正则表达式匹配关键字和值
        const regex = new RegExp(
          `(${nameKeywords.join('|')})[:：](.*?)(${phoneKeywords.join(
            '|',
          )})[:：](.*?)(${provinceKeywords.join('|')})[:：](.*?)(${addressKeywords.join(
            '|',
          )})[:：](.*)`,
          'i',
        );

        const match = text.match(regex);
        if (match) {
          // 动态解析关键字和值，处理一行格式的情况
          const parsedFields = {
            [match[1]]: match[2].trim(),
            [match[3]]: match[4].trim(),
            [match[5]]: match[6].trim(),
            [match[7]]: match[8].trim(),
          };

          name = nameKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[nameKeywords.find(keyword => keyword in parsedFields)!]
            : '';
          phone = phoneKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[phoneKeywords.find(keyword => keyword in parsedFields)!]
            : '';

          const provinceText = provinceKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[provinceKeywords.find(keyword => keyword in parsedFields)!]
            : '';
          address = addressKeywords.some(keyword => keyword in parsedFields)
            ? parsedFields[addressKeywords.find(keyword => keyword in parsedFields)!]
            : '';
          provinceCode = pareProvinceText(provinceText);
        }
        // 处理多行格式的情况
        else {
          let provinceText = '';
          const lines = text?.split('\n');
          lines.forEach(line => {
            const trimmedLine = line.trim();
            if (nameKeywords.some(keyword => trimmedLine.includes(keyword))) {
              name = trimmedLine.split(/[:：]/).pop()?.trim() || ''; // 中英文冒号处理
            } else if (phoneKeywords.some(keyword => trimmedLine.includes(keyword))) {
              phone = trimmedLine.split(/[:：]/).pop()?.trim() || '';
            } else if (provinceKeywords.some(keyword => trimmedLine.includes(keyword))) {
              provinceText = trimmedLine.split(/[:：]/).pop()?.trim() || '';
            } else if (addressKeywords.some(keyword => trimmedLine.includes(keyword))) {
              address = trimmedLine.split(/[:：]/).pop()?.trim() || '';
            }
          });
          provinceCode = pareProvinceText(provinceText);
        }
        // 更新表单数据
        formRef.current?.setData({
          receiver: name,
          phone,
          addressCode: provinceCode,
          address,
        });
      })
      .catch(error => {
        console.log(error);
      });
  };

参考1、2就行，其他技术栈原理类似。

不懂得留言问。加呐！

vue2 - 详细实现用户收货地址识别解析“姓名/手机号/省市区/街道/乡镇村庄“关键字，用户复制粘贴一段含有姓名电话/详细地址的文字文本信息，vue3自动识别拆分并填入到对应表单字段中，详细示例代码
高级前端工程师
08-24 3041
vue2，nuxt2，快递地址读取，收货地址解析、快递地址解析、物流地址解析自动识别，收货地址解析，从发货地址中拆出姓名电话地址，根据粘贴的字符串提取姓名地址，vue地址信息自动识别，ts，vue2智能识别地址，提取姓名电话地址信息，自动识别出省市区街道姓名手机号等，根据文本自动解析出收货信息，怎么识别文本中的手机号，粘贴板地址识别，地址智能识别，如何识别收货地址中的关键字，粘贴一段文字后，自动识别到姓名/手机号/收货地址，vue仿淘宝地址智能识别解析实现，省市区街道智能解析，vue2收货地址，识别地址电话
vue3 - 详细实现用户收货地址识别解析“姓名/手机号/省市区/街道/乡镇村庄“关键字，用户复制粘贴一段含有姓名电话/详细地址的文字文本信息，vue3自动识别拆分并填入到对应表单字段中，详细示例代码
最新发布
高级前端工程师
08-23 4954
vue3，nuxt3，快递地址读取，收货地址解析、快递地址解析、物流地址解析自动识别，收货地址解析，从发货地址中拆出姓名电话地址，根据粘贴的字符串提取姓名地址，vue3地址信息自动识别，ts，vue3智能识别地址，提取姓名电话地址信息，自动识别出省市区街道姓名手机号等，根据文本自动解析出收货信息，怎么识别文本中的手机号，粘贴板地址识别，地址智能识别，如何识别收货地址中的关键字，粘贴一段文字后，自动识别到姓名/手机号/收货地址，vue3仿淘宝地址智能识别解析实现，省市区街道智能解析，vue3收货地址，识别地址
快递地址信息自动识别实例
07-27
快递地址信息识别实例，客户上传地址图片，识别图片内的内容，识别出，收件人，电话，地址等信息。客户上传地址图片，客户上传地址图片，
vue3地址信息自动识别
kanno的博客
06-07 989
vue3地址信息自动识别
微信小程序仿手机淘宝新增地址自动识别地址，姓名，手机号
热门推荐
qq_22400315的博客
09-15 1万+
代码比较简单，直接上代码吧//自动识别事件 autoDiscern: function () { //省 var province = [“广东”, “北京”, “浙江”, “福建”, “湖北”, “上海”, “江苏”, “天津”, “河北”, “山西”, “内蒙古”, “辽宁”, “吉林”, “黑龙江”, “安徽”, “江西”, “山东”, “河南
前端开发攻略---在页面上读取/修改剪切板内容、修改复制内容、复制图片、禁止复制。clipboard API详细介绍。
nibabaoo的博客
04-12 2861
Clipboard API允许网页通过JavaScript访问用户的剪贴板，从而实现复制和粘贴操作。简单来说，它允许你的网页应用程序与用户的剪贴板进行交互，使得用户可以方便地复制文本、图像或其他数据，并在需要时粘贴到其他地方。这为用户提供了更流畅的体验，同时也增强了网页应用程序的功能性。
【uniapp开发小程序】实现粘贴一段文字后，自动识别到姓名/手机号/收货地址
weixin_48596030的博客
06-30 7518
两种方式实现
uniapp地址粘贴自动识别功能
weixin_58573720的博客
06-04 691
首先我的省市区是一个选择框，在uniapp插件库中下载自动识别插件。下载后记得必须要引入。
vue文本域实现大批量粘贴数据自动识别IP地址，并自动换行
ZhaoGongZi_Y的博客
03-23 798
要求文本域支持用户大批量的粘贴数据（主要用于word，txt,excel数据复制），以逗号隔开，自动识别出其中的ip地址，并自动换行排列。
vue项目实现地址自动识别功能
weixin_46058007的博客
09-22 1937
vue项目实现地址自动识别功能，输入赋值过来的一长串地址，自动识别拆分
小程序智能识别快递收货地址,自动解析出省市区等信息,让地址标准化格式的实现(使用腾讯云api)AddressParseTest.zip
05-11
小程序智能识别快递收货地址,自动解析出省市区等信息,让地址标准化格式的实现(使用腾讯云api)已做好hmacsha1+base64编码细节,需要你自己写确认按钮的事件
JS 巧妙获取剪贴板数据 Excel数据的粘贴
01-19
发现google sheet实现了excel的纯文本的多数据格粘贴，没有安全限制的需要，没有使用flash。可能很多人都知道这种方法了，反正我一开始很惊讶的，但是无奈，google的js文件是处理过的，看起来太累了。然后又去找...
小程序智能粘贴.7z
05-31
对收货地址进行智能解析，提取关键数据 执行parse之前必须操作一次parseArea生成专用数据 parseArea的参数是area-list.js的数组
html5读取剪切板 内容,实践笔记：js解析剪切板里的excel内容
weixin_40001805的博客
06-05 877
这次记录的是昨晚一个想法：把excel内容复制到剪切板并转成自己想要的json格式，核心是要把excel内容转json，这部分主要看excel的格式和json如何业务的映射，不展开。倒是通过实践，收获了剪切板的一些知识点。注：因为只是为了自己的小工具实现，不考虑兼容，在chrome下实践整个步骤是：从一封有内容的excel里，选中内容，ctrl+c复制到剪切板(刚好我的内容就是整张表，ctrl+A...
前端模拟自动解析手机号姓名地址
weixin_50248346的博客
01-12 811
前端模拟自动解析手机号姓名地址 // An highlighted block //自动识别事件 autoDiscern: function (e) { const name = e // 传入的内容 //省 var province = ["广东", "北京", "浙江", "福建", "湖北", "上海", "江苏", "天津", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "安徽", "江西", "山东", "河南", "湖南", "广西", "海南
前端实现收获地址智能解析（vue），亲测好用
weixin_46631078的博客
06-29 933
/ resultarr.value为自定义的值。//text.value为双向数据绑定的值。
前端复制内容到剪贴板上
weixin_46504400的博客
04-25 533
在这个函数中，我们首先将传进来的数组转换为字符串。对于数组中的每个对象，我们将其materialName和activationCode属性用制表符分隔，然后将所有的字符串用换行符连接起来。最后，我们调用navigator.clipboard.writeText方法，将字符串写入到剪贴板。如果写入成功，我们会打印出"复制成功"的消息，否则，我们会打印出错误信息。这个API可以用来读取和写入剪贴板的内容。注意，这个API需要在HTTPS环境下才能工作，因为在HTTP环境下，浏览器会阻止访问剪贴板。
【uniapp小程序】获取粘贴板文字 识别出姓名、手机号、地址
weixin_69666355的博客
07-24 1075
【代码】【uniapp小程序】获取粘贴板文字 识别出姓名、手机号、地址。
前端插件clipboard 操作剪切板
秋来九月八
10-26 3239
本期介绍一个非常常用的前端插件 Clipboard.js，Clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七安安

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值