该文章介绍了如何在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 = 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>
扫一扫
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
