地址识别（纯前端）

最近有一个需求，是要在前端做一个地址识别功能。。。确认不交给后台调接口去用ai识别吗？

看需求图：（识别出来的地址要给勾选上，这是个四级联动）

说一下解决方案：先将输入的地址格式化，去掉空格，统一把中文标点转换成英文，去掉换行符等。。。然后对字符串进行切割，进行强匹配，输出匹配上的数组。

地址识别组件：

import React, { FC, useState } from "react";
import { FormShape, createForm } from "@components/Form";
import { Textarea } from "@components/Input";
import Tooltip from "@components/Tooltip";
import { errorTip, successTip } from "@components/Tips";

type DistinguishProps = {
    form: FormShape;
    addressCheck?: (...args) => void;
    addressData: any;
};

const Distinguish: FC<DistinguishProps> = ({ form, addressCheck, addressData }) => {
    const [successAdd, setSuccessAdd] = useState([]);
    const [isSuccess, setIsSuccess] = useState("");
    const re1 = /[;]/;
    const re2 = /[:]/;

    // 处理识别数据
    const dealText = value => {
        if (!value) return;
        // 格式化，转换成英文字符，方便切割
        let str = value
            .replace(/：/g, ":")
            .replace(/；/g, ";")
            .replace(/[\r\n]/g, "")
            .replace(/\t/g, " ");
        let newData1 = [];
        let newData2 = [];
        let newData3 = [];
        try {
            if (re1.test(str)) {
                newData1 = str.split(";");
                newData1.forEach(item1 => {
                    item1 ? newData2.push(item1) : " ";
                });
                newData2.forEach(item2 => {
                    if (re2.test(item2)) {
                        newData3.push({
                            [item2.split(":")[0]]: item2.split(":")[1].split(" "),
                        });
                    } else {
                        newData3.push({ [item2]: [] });
                    }
                });
            } else {
                if (re2.test(str)) {
                    newData1 = str.split(":");
                    newData1.forEach(item1 => {
                        item1 ? newData2.push(item1) : " ";
                    });
                    newData3.push({
                        [newData2[0]]: newData2[1].split(" "),
                    });
                } else {
                    newData3.push({ [str]: [] });
                }
            }
            return newData3;
        } catch (e) {
            errorTip("地址识别失败！请按照提示的格式输入地址信息。");
            setSuccessAdd([]);
        }
    };

    // 数组对象去重，合并
    const mergeData = value => {
        let initArr = [];
        let initData = {};
        let data = xt.cloneDeep(value); //深拷贝
        if (data.length > 0) {
            data.forEach(item => {
                if (typeof item == "string") {
                    initArr.push(item);
                } else {
                    let map = item;
                    for (let k in map) {
                        if (k != null && k != "null") {
                            if (initData.hasOwnProperty(k)) {
                                initData[k] += "," + map[k];
                            } else {
                                initData[k] = map[k];
                            }
                        }
                    }
                }
            });
        }
        Object.keys(initData).forEach(key => {
            if (initData[key]) {
                let a = Array.from(new Set(initData[key].split(","))).join(",");
                initArr.push({ [key]: a });
            } else {
                initArr.push(key);
            }
        });
        return initArr;
    };

    // 地址匹配
    const addressPick = (val: any) => {
        let errAddress = []; // 识别失败地址
        let sucessAddress = []; // 识别成功地址
        let inputAddress = val; // 输入的地址
        let propsData = xt.cloneDeep(addressData); // 识别选中的地址
        try {
            inputAddress.forEach(item => {
                // @ts-ignore
                if (Object.values(item)?.flat().length) {
                    // 选中区下面的街道
                    Object.values(item)
                        // @ts-ignore
                        .flat()
                        .forEach(address => {
                            propsData.forEach(data => {
                                // @ts-ignore
                                if (data.nameCN == xt.nesGame(Object.keys(item)?.flat()[0])) {
                                    data?.childrenStreet.forEach(a => {
                                        if (a.nameCN == xt.nesGame(address)) {  // xt.nesGame去掉空格
                                            sucessAddress.push({ [data.nameCN]: address });
                                            a.choose = true;
                                        }
                                    });
                                }
                            });
                        });
                } else {
                    // 直接选中区以及下面所有的街道
                    propsData.forEach(data => {
                        // @ts-ignore
                        if (data.nameCN == xt.nesGame(Object.keys(item)?.flat()[0])) {
                            data.choose = true;
                            data?.childrenStreet.forEach(a => {
                                a.choose = true;
                            });
                            // @ts-ignore
                            sucessAddress.push(xt.nesGame(Object.keys(item)?.flat()[0]));
                        }
                    });
                }
            });
            if (sucessAddress.length > 0) {
                setIsSuccess("识别成功地址");
                successTip("识别成功");
                addressCheck(Array.from(new Set(sucessAddress)));
                setSuccessAdd(mergeData(sucessAddress)); // 识别成功地址
            } else {
                setIsSuccess("地址识别失败！请检查后再试");
                setSuccessAdd([]);
            }
        } catch (e) {
            errorTip("地址匹配失败！请检查后再试");
            setSuccessAdd([]);
        }
    };

    // 提交给父组件
    // 宝安区：福永街道 石岩街道  航城街道  福海街道 西乡街道 西乡街道；罗湖区
    const submit = () => {
        setIsSuccess("");
        form.validateFields((error, value: any) => {
            if (error) return;
            addressPick(dealText(value.note));
        });
    };

    const cancel = () => {
        form.resetFields();
        setSuccessAdd([]);
        setIsSuccess("");
    };

    return (
        <div
            className="pb-20"
            style={{ border: "1px solid #eaedf3", borderRadius: "4px", backgroundColor: "#fff" }}
        >
            <Textarea
                form={form}
                fieldName="note"
                textareaStyle={{ border: "none" }}
                placeholder={
                    "请粘贴文本至此处，自动识别区、县、街道名称并选中，若有多个街道请以区名或县名加冒号开头，多个街道以空格隔开，以分号结束，若需选中整个区或县所有街道则直接输入区名或县名以分号结束。\n例：坪山区：坪山街道 坑梓街道；南山区；"
                }
                style={{ width: "100%", border: "none" }}
                maxLength={300}
                showError="down"
                rules={false}
                normalize={(val, prev) => {
                    if (val.length > 300) return prev.trim();
                    if (!val.trim().length || val.length === 300) return val.trim();
                    return val;
                }}
            />
            <div className="mt-20  pr-20 flex-align-center" style={{ paddingLeft: "15px" }}>
                <button className="button-primary mr-20" onClick={submit}>
                    识别文本
                </button>
                <button className="button-default" onClick={cancel}>
                    清空
                </button>
                <div className="ml-30">
                    <span
                        className="mr-5 font12 c-606266"
                        style={{ color: isSuccess == "识别成功地址" ? "" : "#FF6666" }}
                    >
                        {isSuccess}
                    </span>
                    {!!successAdd.length && (
                        <Tooltip
                            overlay={
                                <>
                                    {successAdd.map((val, index) => {
                                        if (typeof val === "string") {
                                            return <p>{val};</p>;
                                        } else {
                                            return (
                                                <p>
                                                    {Object.keys(val)[0]}:
                                                    {Array.from(new Set(Object.values(val))).join(
                                                        ","
                                                    )}
                                                </p>
                                            );
                                        }
                                    })}
                                </>
                            }
                        >
                            <i className={"wsf-icon-question"} />
                        </Tooltip>
                    )}
                </div>
            </div>
        </div>
    );
};

export default createForm()(Distinguish);