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

需求

在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 = this
				uni.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, //地址id

				index: 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.id
			if (e.id) {
				this.addressInfo(e.id)
			}
		},
		methods: {
			//点击识别收货信息
			autoParse() {
				var that = this
				if (!this.infos) {
					return uni.showToast({
						title: '请粘贴您需要识别的信息',
						icon: 'none'
					})
				}
				const infos = this.infos
				const 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~