返回顶部
首页 > 资讯 > 移动开发 >【uniapp开发小程序】实现粘贴一段文字后,自动识别到姓名/手机号/收货地址
  • 273
分享到

【uniapp开发小程序】实现粘贴一段文字后,自动识别到姓名/手机号/收货地址

uni-app小程序 2023-09-03 12:09:17 273人浏览 薄情痞子
摘要

需求 在uni-app中开发小程序,实现粘贴一段文字后自动识别到手机号,并将手机号前面的内容作为姓名,手机号后面的内容作为收货地址,并去除其中的特殊字符和前缀标识。 一、实现效果: 二、实现方式:

需求

在uni-app中开发小程序,实现粘贴一段文字后自动识别到手机号,并将手机号前面的内容作为姓名,手机号后面的内容作为收货地址,并去除其中的特殊字符和前缀标识。

一、实现效果:

在这里插入图片描述
在这里插入图片描述

二、实现方式:(两种方式)

2.1第一种方式:前端通过使用正则的方式,对获取的数据进行判断

弊端:1.对于粘贴的内容,有局限性。2.复制的省市区不会渲染上。

<template><view class=""><view  @click="pasteContent()">试试粘贴收件人姓名/手机号/收货地址,可快速识别 您的收货信息view>view>template><script>export default {data() {return {addressData: {name: '',phone: '',details: '', //详细地址},}},methods: {//获取到剪切板的内容,快速识别收货地址pasteContent() {var that = thisuni.getClipboardData({success: (res) => {const text = res.data;const phoneNumber = this.extractPhoneNumber(text);const name = this.extractName(text, phoneNumber);const address = this.extractAddress(text, phoneNumber);// 去除特殊字符和前缀标识const cleanedName = this.cleanText(name);const cleanedPhoneNumber = this.cleanText(phoneNumber);const cleanedAddress = this.cleanText(address);// 在这里可以对姓名、手机号和收货地址进行处理// 例如,将提取到的信息填充到表单中console.log('姓名:', cleanedName);console.log('手机号:', cleanedPhoneNumber);console.log('收货地址:', cleanedAddress);if (cleanedName != '') {that.addressData.name = cleanedName}if (cleanedPhoneNumber != '') {that.addressData.phone = cleanedPhoneNumber}if (cleanedAddress != '') {that.addressData.details = cleanedAddress}}});},//1姓名extractPhoneNumber(text) {const reg = /\d{11}/;const match = text.match(reg);const phoneNumber = match ? match[0] : '';return phoneNumber;},//2手机号extractName(text, phoneNumber) {const index = text.indexOf(phoneNumber);const name = index > 0 ? text.substring(0, index).trim() : '';return name;},//3地址extractAddress(text, phoneNumber) {const index = text.indexOf(phoneNumber);const address = index > 0 ? text.substring(index + phoneNumber.length).trim() : '';return address;},// 4去除特殊字符和前缀标识cleanText(text) {const cleanedText = text.replace(/\/|姓名:|手机号:|收货地址:|地址:/g, '');return cleanedText;},}}script>
分割线
分割线
分割线

2.2第二种方式:后台来进行判断,前端只负责展示。

其中收货地址是通过引用了Winglau14-address-auto-parse插件来处理的。
插件地址:https://ext.dcloud.net.cn/plugin?id=12080

效果图:在这里插入图片描述

插件导入后:在这里插入图片描述

具体代码:

<template><view class=""><view class="onebox"><view class="item"><view class="lef">收货人view><input type="text" placeholder="请填写收货人姓名" v-model="addressData.name">view><view class="item"><view class="lef">手机号码view><view class="number"><view><picker @change="bindPickerChange" :value="index" :range="topArray"><view class="uni-input">{{topArray[index]}}<image class="pickerimg" src="../../static/images/icon_jt@2x.png">image>view>picker>view><input type="digit" placeholder="请填写收货人手机号" v-model="addressData.phone">view>view><view class="item"><picker mode="multiSelector" @columnchange="addressPickerColumnChange" @change="addressChange":value="addressIndex" :range="addressArray" range-key="name"><view class="addressbox"><view class="lef">所在地区view><input type="text" v-model="addressData.address" placeholder="请选择省市区县"placeholder-style="color: #9EA1A3;" :disabled="true">view>picker>view><view class="item"><view class="lef">详细地址view><input class="details_input" type="text" placeholder="街道、楼牌号等" v-model="addressData.details"><view class="dingwei" @click="getMapLocation()"><image src="../../static/images/icon_dw@2x(1).png">image>定位view>view><view class="lastitem"><view class="lasttext"><textarea placeholder="试试点击识别按钮,可快速识别 您的收货信息(收件人姓名、手机号、收货地址)" @change="autoParse"v-model="infos">textarea><image class="shibie" @click="autoParse" src="../../static/images/icon_sb@2x.png">image>view><view class="copy">地址粘贴板<image src="../../static/images/icon_jt@2x.png">image>view>view>view><view class="saveBtn" @click="submit()" v-if="addId == -1">保存view><view class="saveBtn" @click="editFun()" v-else>保存修改view>view>template><script>//一定要引入这个插件,确保省市区可以识别到import {parse,parseArea} from '../../uni_modules/Winglau14-address-auto-parse/components/Winglau14-address-auto-parse/lib/address-parse.js'export default {data() {return {baseUrl: this.$api.hostImages,topArray: ['+86'],addId: -1, //地址idindex: 0,//省市区选择addressArray: [[],[],[]],addressIndex: [],is_default: false,addressData: {id: '',name: '',phone: '',span: '',is_default: 0, //0:正常   1:默认收获地址longitude: '118.06637', //经度latitude: '37.665928', //纬度province_id: '',city_id: '',area_id: '',address: '', //省-市-区details: '', //详细地址},value: '',infos: ''}},onShow() {this.getprovinceList()},onLoad(e) {console.log(e)this.addId = e.idif (e.id) {this.addressInfo(e.id)}},methods: {//点击识别收货信息autoParse() {var that = thisif (!this.infos) {return uni.showToast({title: '请粘贴您需要识别的信息',icon: 'none'})}const infos = this.infosconst result = parse(infos)console.log('打印一下获取到的信息', result)if(result.name != ''){that.addressData.name = result.name}if(result.mobile != ''){that.addressData.phone = result.mobile}if(result.province != ''){that.addressData.province = result.province  //省}if(result.city != ''){that.addressData.city = result.city //市}if(result.area != ''){that.addressData.area = result.area //区}if(result.addr != ''){that.addressData.details = result.addr  //详细地址}console.log('打印一下addr', that.addressData.details)if(result.province != ''){that.addressData.address = result.province + '-' + result.city + '-' + result.area}},}}script>

OK~

来源地址:https://blog.csdn.net/weixin_48596030/article/details/131476856

--结束END--

本文标题: 【uniapp开发小程序】实现粘贴一段文字后,自动识别到姓名/手机号/收货地址

本文链接: https://lsjlt.com/news/392128.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作