js定位分割省市区

<template>
    <view class="content">
        <navbars></navbars>
        <view class="main">
            <form class="formtext">
                <view class="item">
                    <label>所在地区</label>
                    <view class="map" @click="changeLocation">
                        <span>地图</span>
                        <text class="iconfont icon-daosanjiao-"></text>
                    </view>
                    <input placeholder="省市县区" placeholder-class="color-cccccc" disabled @click="changeLocation"
                        v-model="locationText" />
                </view>
                <view class="item">
                    <label>详细地址</label>
                    <textarea placeholder="详细地址" placeholder-class="color-cccccc" v-model="detailedAddress"
                        auto-height />
                </view>
            </form>
        </view>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    const locationText = ref('')
    const detailedAddress = ref('')

    const changeLocation = () => {
        uni.chooseLocation({
            success: (res) => {
                if (res.address) {
                    const addressArray = res.address.match(/^(.*?省|.*?自治区)(.*?市)?(.*?区|.*?县)?(.*)/)
                    let locationString = ''
                    if (addressArray[1]) {
                        locationString += addressArray[1]
                    }
                    if (addressArray[2]) {
                        locationString += ' ' + addressArray[2]
                    }
                    if (addressArray[3]) {
                        locationString += ' ' + addressArray[3]
                    }
                    locationText.value = locationString.trim()

                    const detailedAddressText = addressArray[4].trim()
                    detailedAddress.value = detailedAddressText
                }
            }
        })
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #f5f5f5;
    }

    .main {
        height: 100%;

        .formtext {
            .item {
                position: relative;
                padding: 30rpx;
                border-bottom: 1px solid #f0f0f0;

                label {
                    color: #333;
                    font-size: 34rpx;
                    width: 150rpx;
                    display: inline-block;
                }

                input {
                    flex: 1;
                    font-size: 28rpx;
                    color: #666;
                    padding-right: 60rpx;
                }

                textarea {
                    flex: 1;
                    font-size: 28rpx;
                    color: #666;
                }

                .map {
                    position: absolute;
                    right: 10rpx;
                    width: 120rpx;
                    top: 35%;
                    display: flex;
                    align-items: center;
                    font-size: 28rpx;

                    .iconfont {
                        font-size: 32rpx;
                        margin-right: 10rpx;
                    }
                }
            }
        }
    }
</style>