【uniapp开发小程序】实现粘贴一段文字后，自动识别到姓名/手机号/收货地址_前端vue根据粘贴的字符串提取姓名地址等信息

需求

在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

OK~