当前位置： 首页 > news >正文

关于前端常用的部分公共方法（三）

news 来源：原创 2025/6/12 20:42:44

1. 将wkt格式的空间数据转为geojson格式的空间数据

功能说明
该函数将WKT格式的空间数据转换为GeoJSON格式，支持直接转换或从对象属性中提取WKT字符串转换。

代码实现

/*** 将wkt格式的空间数据转为geojson格式的空间数据* @param item 数据对象或WKT字符串* @param key 可选的空间数据字段名*/
export const wktToGeojson = (item: any, key?: string) => {if (!key) {const geojson = WKT.parse(item); // 直接转换WKT字符串return geojson;} else if (!item[key]) {return null; // 字段不存在时返回null} else {const geojson = WKT.parse(item[key]); // 从对象属性转换return {type: "Feature",geometry: geojson,properties: item};}
};

参数说明

  • item: 接受两种输入类型
    • WKT字符串（当key参数未提供时）
    • 包含WKT属性的对象（需配合key参数使用）
  • key: 可选参数，指定对象中WKT字符串的属性名

返回值

  • 直接转换WKT时返回GeoJSON几何对象
  • 从对象属性转换时返回完整的GeoJSON Feature对象（包含原对象作为properties）
  • 目标字段不存在时返回null

使用示例

// 示例1：直接转换WKT字符串
const pointWKT = 'POINT(30 10)';
const geojson1 = wktToGeojson(pointWKT); // 示例2：从对象属性转换
const feature = { id: 1, geometry: 'LINESTRING(30 10, 40 40)' 
};
const geojson2 = wktToGeojson(feature, 'geometry');

注意事项

  1. 需确保已安装WKT解析库（如terraformer-wkt-parser）
  2. 输入WKT字符串需符合标准格式
  3. 当key参数提供但字段不存在时，函数会静默返回null

2. POINT字符串转数组函数

/** POINT转数组 */
export const isPointOrArray = (pointString: any) => {const coordinatesString = pointString.substring(6, pointString.length - 1)// 使用空格分割成数组const coordinatesArray = coordinatesString.split(" ")// 将字符串转换为浮点数const coordinatesNumericArray = coordinatesArray.map((coord: any) => parseFloat(coord))return coordinatesNumericArray
}

功能说明

该函数用于将POINT(x y)格式的地理坐标字符串转换为数字数组格式[x, y]。适用于WKT(Well-Known Text)格式的地理数据处理。

参数说明

  • pointString：输入参数，需为POINT(经度 纬度)格式的字符串，例如POINT(116.404 39.915)

处理流程

从字符串第6个字符（跳过POINT(）开始截取，到倒数第1个字符（跳过)）结束 用空格分割字符串得到两个坐标值的字符串数组 通过parseFloat将字符串坐标转为数字类型

返回值

返回包含两个数字元素的数组，示例： 输入"POINT(116.404 39.915)"，输出[116.404, 39.915]

注意事项

函数未对输入参数格式做严格校验 若输入非标准WKT格式可能导致错误 建议在实际使用时添加参数验证逻辑

3. 数组转POINT函数解析

该函数将坐标数组转换为PostGIS的POINT格式字符串，适用于地理空间数据处理。

函数定义：

export const isArrayOrPoint = (coordinatesArray: any) => {const x = coordinatesArray[0]const y = coordinatesArray[1]const pointString = `POINT(${x} ${y})`return pointString
}

参数说明：

  • coordinatesArray: 包含x和y坐标的数组，如[longitude, latitude]

返回值：

  • 返回PostGIS兼容的POINT格式字符串，例如POINT(116.404 39.915)

注意事项： 函数未做输入验证，建议添加数组长度检查 对于非数组输入，函数会抛出异常 考虑扩展支持三维坐标POINT Z(x y z)格式

4. 车牌号验证函数（兼容新能源车牌）

以下是判断字符串是否为合法车牌号（包括传统车牌和新能源车牌）的 TypeScript 函数实现：

/** * 车牌号验证（兼容新能源车牌）* @param str 待验证字符串* @returns 是否为合法车牌号*/
export const isLicensePlate = (str: string) => {const reg =/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/return reg.test(str)
}

正则表达式解析

该正则表达式分为以下几个部分：

  1. ^[京津沪渝冀豫云辽黑黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]
    匹配第一位汉字省份简称，包含所有省级行政区及"使领"字（使馆/领馆车牌）

  2. [A-HJ-NP-Z]
    第二位字母，排除I和O（避免与数字混淆）

  3. [A-HJ-NP-Z0-9]{4,5}
    中间4-5位字母数字组合（传统车牌5位，新能源车牌6位中的中间部分）

  4. [A-HJ-NP-Z0-9挂学警港澳]$
    最后一位字符，可以是数字、字母或特殊汉字（挂/学/警/港/澳）

  5. ^...$
    确保从开头到结尾完整匹配

注意事项

  1. 该正则匹配6位新能源车牌（如"京AD12345"）和7位传统车牌（如"京A12345"）

  2. 未包含2021年新推出的临时行驶车号牌格式（白底蓝字）

  3. 军车、警车等特殊车牌格式需要单独处理

  4. 实际应用中建议先执行trim()去除前后空格

5. 判断是否为 IPv4 地址

/*** 判断是否为 IPv4 地址* @param ip 待验证的字符串* @returns 是否为合法 IPv4 地址*/
export const isIPv4 = (ip: string) => {const reg =/^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/;return reg.test(ip);
};

该正则表达式具备以下验证特性：

  • 验证标准 IPv4 格式（xxx.xxx.xxx.xxx）
  • 每个数字段范围 0-255
  • 支持可选端口号检测（:xxxxx）
  • 端口号范围 0-65535

6. 判断是否为 MAC 地址

/*** 判断是否为 MAC 地址* @param mac 待检测的字符串* @returns 是否为有效的 MAC 地址格式*/
export const isMAC = (mac: string) => {const reg =/^(([a-f0-9][0,2,4,6,8,a,c,e]:([a-f0-9]{2}:){4})|([a-f0-9][0,2,4,6,8,a,c,e]-([a-f0-9]{2}-){4}))[a-f0-9]{2}$/i;return reg.test(mac);
};

正则表达式解析

正则表达式分为两部分，匹配两种常见 MAC 地址格式（冒号分隔或连字符分隔）：

  1. ([a-f0-9][0,2,4,6,8,a,c,e]:([a-f0-9]{2}:){4})

    • 匹配冒号分隔格式，如 01:23:45:67:89:ab
    • 首位字符需为偶数（符合 MAC 地址单播规范）

  2. ([a-f0-9][0,2,4,6,8,a,c,e]-([a-f0-9]{2}-){4})

    • 匹配连字符分隔格式，如 01-23-45-67-89-ab
    • 同样限制首位为偶数

末尾 [a-f0-9]{2}$ 确保最后两位是有效的十六进制字符，/i 标志忽略大小写。

使用示例

console.log(isMAC("01:23:45:67:89:AB")); // true
console.log(isMAC("01-23-45-67-89-ab")); // true
console.log(isMAC("00:1A:2B:3C:4D:5E")); // true
console.log(isMAC("gh:ij:kl:mn:op:qr")); // false（含无效字符）
console.log(isMAC("01:23:45:67:89"));    // false（长度不足）

6. 判断是否为 Email（支持中文邮箱）

正则表达式解析

/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

该正则表达式分为以下部分：

  • ^[A-Za-z0-9\u4e00-\u9fa5]+ 匹配开头的中英文、数字字符
  • @ 匹配邮箱分隔符
  • [a-zA-Z0-9_-]+ 匹配域名部分（不含后缀）
  • (\.[a-zA-Z0-9_-]+)+ 匹配一个或多个域名后缀

代码实现

/*** 判断是否为 Email（支持中文邮箱）* @param email 待验证的字符串* @returns 是否为合法邮箱格式*/
export const isEmail = (email: string) => {const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;return reg.test(email);
};

使用示例

console.log(isEmail("测试@test.com")); // true
console.log(isEmail("user@example.com")); // true
console.log(isEmail("invalid.email@com")); // false
console.log(isEmail("no@domain")); // false

注意事项

该正则表达式存在以下特点：

  • 支持中文作为邮箱用户名
  • 要求域名部分至少包含一个点号分隔的后缀
  • 不允许特殊符号出现在用户名或域名中
  • 未限制顶级域名的长度（如.com和.xyz都会匹配）

7. 判断是否为第二代身份证（18 位）

以下是判断中国第二代身份证（18位）的代码实现，采用 TypeScript 编写：

/*** 校验字符串是否符合中国第二代身份证（18位）格式规则* @param str 待校验的字符串* @returns 是否符合身份证格式*/
export const isChineseIdCard = (str: string) => {const reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;return reg.test(str);
};

正则表达式解析

^[1-9]\d{5}
匹配6位行政区划代码，首位不为0

(?:18|19|20)\d{2}
匹配年份范围（1800-2099）

(?:0[1-9]|10|11|12)
匹配月份（01-12）

(?:0[1-9]|[1-2]\d|30|31)
匹配日期（01-31），已考虑不同月份的天数差异

\d{3}
匹配顺序码（3位数字）

[\dXx]$
末位可能是数字或X（校验码）

该正则表达式覆盖了中国大陆第二代身份证的编号规则，包括行政区划代码、出生日期、顺序码和校验码的格式验证。

8. 判断时间格式是否为 24 小时制（HH:mm:ss）

/*** 判断时间格式是否为 24 小时制（HH:mm:ss）*/
export const is24H = (time: string) => {const reg = /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/;return reg.test(time);
};

9. 判断是否为外链

代码用途

该代码用于判断一个给定的路径是否为外部链接，即是否以 http:、https:、mailto: 或 tel: 开头。

代码解析

export const isExternal = (path: string) => {const reg = /^(https?:|mailto:|tel:)/return reg.test(path)
}
  • export const isExternal：定义并导出一个名为 isExternal 的常量函数，接收一个 path 参数。
  • const reg = /^(https?:|mailto:|tel:)/：定义一个正则表达式，匹配以 http:、https:、mailto: 或 tel: 开头的字符串。
  • return reg.test(path)：使用正则表达式测试 path，返回布尔值结果。

使用示例

// 测试外部链接
isExternal('https://example.com') // true
isExternal('mailto:user@example.com') // true
isExternal('tel:+123456789') // true// 测试非外部链接
isExternal('/about') // false
isExternal('../contact') // false

应用场景

  • 在路由或导航逻辑中区分内部路径和外部链接。
  • 在渲染链接时动态设置 target="_blank" 或处理跳转逻辑。

10. 判断是否为网址（带协议）

以下是符合要求的代码块格式和说明：

代码实现

/*** 判断字符串是否为合法网址（支持带协议的URL）* @param url 待检测的字符串* @returns 是否为合法网址*/
export const isUrl = (url: string) => {const reg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;return reg.test(url);
}

正则表达式解析

^(((ht|f)tps?):\/\/)? 匹配可选的http/https/ftp/ftps协议头
([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+ 匹配域名主体（限制特殊字符和长度）
[a-z]{2,6}\/?$ 匹配顶级域名和可选尾部斜杠

使用示例

isUrl("https://example.com")  // true
isUrl("ftp://sub.domain.org/path")  // true
isUrl("invalid.url")  // false

该实现考虑了常见URL格式，但实际应用中可能需要根据具体需求调整正则表达式。

11. 判断是否为网址或 IP（带端口）

代码解析：判断网址或 IP 是否包含端口

/** 判断是否为网址或 IP（带端口） */
export const isUrlPort = (url: string) => {const reg = /^((ht|f)tps?:\\/\\/)?[\\w-]+(\\.[\\w-]+)+:\\d{1,5}\\\/?$/return reg.test(url)
}

该正则表达式用于验证字符串是否为合法的网址或 IP 地址且包含端口号，具体匹配规则如下：

正则表达式分解

/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\\/?$/

  1. ^((ht|f)tps?:\/\/)?

    • 匹配可选协议头（http://、https://、ftp:// 或 ftps://），s? 表示 s 可选。

  2. [\w-]+

    • 匹配域名或 IP 的主体部分，\w 等价于 [A-Za-z0-9_]，- 允许连字符。

  3. (\.[\w-]+)+

    • 匹配域名后缀（如 .com、.org），至少出现一次。

  4. :\d{1,5}

    • 匹配冒号后的端口号，\d 为数字，限制 1-5 位（合法端口范围 0-65535，此处简化校验）。

  5. \/?$

    • 可选尾部斜杠，$ 表示字符串结束。

使用示例

isUrlPort("example.com:8080");    // true
isUrlPort("192.168.1.1:80");      // true
isUrlPort("https://api.site:443"); // true
isUrlPort("localhost:3000");      // false（需调整正则以支持无点分的域名）

注意事项

  • 该正则未覆盖无协议头的纯 IP 地址（如 127.0.0.1:8080），需调整正则中的 (\.[\w-]+)+ 部分。
  • 严格场景需进一步验证端口号是否在 0-65535 范围内。

12. 判断是否为域名（不带协议）

/*** 判断字符串是否为域名格式（不带协议）* @param domain 待检测的字符串* @returns 符合域名格式返回true，否则返回false*/
export const isDomain = (domain: string) => {const reg = /^([0-9a-zA-Z-]{1,}\.)+([a-zA-Z]{2,})$/return reg.test(domain)
}

正则表达式解析

^([0-9a-zA-Z-]{1,}\.)+([a-zA-Z]{2,})$

  • ^ 匹配字符串开头
  • ([0-9a-zA-Z-]{1,}\.)+ 匹配由字母、数字或横线组成的子域名（长度≥1），后跟一个点，可重复多次
  • ([a-zA-Z]{2,}) 匹配顶级域名（纯字母且长度≥2）
  • $ 匹配字符串结尾

测试用例

// 合法域名
isDomain("example.com")      // true
isDomain("sub.example.com")  // true
isDomain("a.cn")             // true// 非法域名
isDomain("example.")         // false（缺少顶级域名）
isDomain(".com")             // false（缺少子域名）
isDomain("example..com")     // false（连续点号）
isDomain("example_com")      // false（包含下划线）

相关文章：

  • Spring boot应用监控集成
  • 基于算法竞赛的c++编程（28）结构体的进阶应用
  • 渗透靶场PortSwigger Labs指南：规范链接的反射XSS
  • JavaScript 核心对象深度解析：Math、Date 与 String
  • CPP基础（2）
  • 在多云环境透析连接ngx_stream_proxy_protocol_vendor_module
  • 最新SpringBoot+SpringCloud+Nacos微服务框架分享
  • 72道Nginx高频题整理(附答案背诵版)
  • Vue.js教学第二十二章：vue实战项目商城项目
  • 实现安全、经济、节约、环保的智慧交通开源了
  • ceph集群调整pg数量实战（下）
  • Minktec 柔性弯曲传感器应用：3D 脊柱姿势追踪与人体活动识别
  • 股指期货的基差怎么衡量贴水率？
  • OpenLayers 获取地图状态
  • css~word-break属性
  • 数据结构-链表OJ-回文链表，如何将时间复杂度控制为O(N),空间复杂度控制为O(1)？
  • 增加Label Verified
  • Mac M4 芯片运行大模型指南，包括模型微调与推理
  • 一个完整的日志收集方案:Elasticsearch + Logstash + Kibana+Filebeat (三)
  • ＜6＞-MySQL表的增删查改
  • asp网站开发实训/网络营销的营销理念
  • 昆山外贸型网站制作/怎么提升关键词的质量度
  • 深圳燃气公司怎么样/百度关键词排名优化工具
  • 陕西营销型网站制作/百度投诉中心24小时电话
  • 设计一个网站报价/推广代理登录页面
  • 制定网站建设规划书/nba最新交易信息