0

0

JS如何提取字符串内容

小老鼠

小老鼠

发布时间:2025-08-24 12:10:01

|

332人浏览过

|

来源于php中文网

原创

答案:JS中提取特定模式字符串的最佳实践是使用正则表达式,因其能高效处理复杂模式匹配。对于结构化字符串,优先采用JSON.parse()等解析方法;面对嵌套结构,可结合栈或递归实现精准提取。

js如何提取字符串内容

JavaScript里要从字符串里抠出想要的那部分内容,方法其实挺多的,核心无非就是定个范围、找个标志,或者干脆用模式匹配。最常用的就是

substring
slice
substr
这几个直接截取的,还有
indexOf
配合截取,再就是强大的正则表达式了。

说实话,每次遇到字符串提取,我脑子里首先跳出来的就是那几个老伙计。

  • substring(startIndex, endIndex)
    slice(startIndex, endIndex)
    : 这俩兄弟功能很像,都是从
    startIndex
    开始,到
    endIndex
    结束(不包含
    endIndex
    那个字符)。区别在于,
    substring
    对参数的容错性更好,比如你给它负数或者
    endIndex
    小于
    startIndex
    ,它会自己调整。而
    slice
    对负数有特殊处理,负数索引是从字符串末尾开始算的。我个人更倾向于
    slice
    ,因为它处理负数索引时,有时能省点事,比如
    str.slice(-5)
    直接拿到最后5个字符,多省心。

    const text = "Hello, JavaScript World!";
    console.log(text.substring(7, 17)); // Output: JavaScript
    console.log(text.slice(7, 17));     // Output: JavaScript
    console.log(text.slice(-6, -1));    // Output: World (从倒数第6个到倒数第2个)
  • substr(startIndex, length)
    : 这个方法就直接多了,从
    startIndex
    开始,然后取
    length
    长度的字符。不过,MDN 已经把它标记为“不推荐使用”了,未来可能会被移除。虽然现在用起来没啥问题,但出于代码未来的健壮性考虑,我尽量避免用它。

    const text = "Hello, JavaScript World!";
    console.log(text.substr(7, 10)); // Output: JavaScript
  • indexOf()
    /
    lastIndexOf()
    配合截取
    : 当你需要根据某个分隔符来提取内容时,这招就特别管用。先用
    indexOf
    找到起始位置,再用
    lastIndexOf
    找到结束位置,然后把中间那段
    slice
    出来。这在处理像 XML 标签、URL 参数这类结构化字符串时,非常实用。

    const url = "https://example.com/path?id=123&name=test";
    const idStart = url.indexOf("id=") + 3;
    const idEnd = url.indexOf("&", idStart);
    let idValue = "";
    if (idStart !== -1) { // 确保找到了id=
        if (idEnd !== -1) {
            idValue = url.substring(idStart, idEnd);
        } else { // id是最后一个参数
            idValue = url.substring(idStart);
        }
    }
    console.log(idValue); // Output: 123
  • split(delimiter)
    : 如果你的字符串内容是用某个字符明确分隔开的,比如 CSV 数据,
    split
    简直是神来之笔。它直接把字符串劈成一个数组,每个元素就是分隔符之间的内容。

    const tags = "js,html,css,web";
    const tagArray = tags.split(',');
    console.log(tagArray); // Output: ["js", "html", "css", "web"]
    console.log(tagArray[0]); // Output: js
  • 正则表达式 (RegExp): 这是处理复杂模式匹配的终极武器。无论是提取邮箱、电话号码,还是解析复杂的日志行,正则表达式都能搞定。

    String.prototype.match()
    RegExp.prototype.exec()
    都是它的常用搭档。上手可能有点门槛,但一旦掌握,你会发现它能解决很多看似无解的问题。

    const emailText = "我的邮箱是 test@example.com,联系我。";
    const emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/;
    const foundEmail = emailText.match(emailRegex);
    console.log(foundEmail ? foundEmail[0] : "未找到"); // Output: test@example.com

JS中提取特定模式字符串的最佳实践是什么?

说起特定模式的字符串提取,我的首选,也是强烈推荐的,就是正则表达式。这玩意儿虽然初看有点像天书,但它的表达能力和效率在处理模式匹配上,几乎是无敌的。比如,你要从一段文本里找出所有日期格式(比如 "YYYY-MM-DD"),或者所有的 URL,手写

indexOf
substring
会让你崩溃,而且容易出错。

用正则表达式,你定义一个模式,然后让它去匹配。它能帮你处理各种变体、可选部分、重复出现等等。比如,要提取所有被双引号包裹的内容,简单的

/"(.*?)"/g
就能搞定,
g
标志表示全局匹配,
*?
表示非贪婪匹配,这样就不会把两个双引号之间的所有内容都抓进去。

Open Voice OS
Open Voice OS

OpenVoiceOS是一个社区驱动的开源语音AI平台

下载
const textWithQuotes = '这是一个"被引用"的文本,还有"另一个"引用。';
const regex = /"(.*?)"/g;
let matches = [];
let match;
while ((match = regex.exec(textWithQuotes)) !== null) {
    matches.push(match[1]); // match[0]是整个匹配,match[1]是捕获组
}
console.log(matches); // Output: ["被引用", "另一个"]

再比如,你需要从HTML标签中提取属性值,或者从日志行中解析出时间戳和错误码,正则表达式的捕获组功能(用括号

()
定义)简直是神器。它能让你在一次匹配中,把字符串里不同部分的内容都“抓”出来,然后以数组的形式返回。

不过,写正则表达式需要一些练习和经验。有时候一个看似简单的需求,可能需要一个很复杂的正则。这时候,多查查 MDN,或者用一些在线的正则表达式测试工具(比如 regex101.com)来调试,会事半功倍。记住,好的正则不仅要能匹配,还要考虑性能,避免回溯陷阱。

处理复杂或多层嵌套字符串时,JS有哪些高效策略?

遇到那种层层包裹、结构复杂的字符串,比如一个 JSON 字符串被当成普通字符串传过来,或者一个自定义格式的配置文件,单纯的

indexOf
slice
组合可能就有点力不从心了,或者说,写起来会非常痛苦且容易出错。

我的经验是,对于这类问题,首先要看这个“复杂”有没有规律可循。

  1. 结构化数据,但以字符串形式存在:如果它本质上是 JSON、XML 这种标准格式,但却以字符串形式出现,最直接高效的办法就是解析它。比如 JSON,直接

    JSON.parse()
    。如果解析失败,那说明字符串格式有问题,你需要处理异常。解析成对象后,提取数据就变成了对象属性访问,那可比字符串操作简单多了。

    const jsonString = '{"user": {"id": 123, "name": "Alice", "details": {"age": 30, "city": "New York"}}}';
    try {
        const data = JSON.parse(jsonString);
        console.log(data.user.details.city); // Output: New York
    } catch (e) {
        console.error("JSON解析失败:", e.message);
    }
  2. 自定义的嵌套格式:如果不是标准格式,但有明确的开始/结束标记,比如

    [outer[inner]]
    这种,正则表达式可能也能派上用场,但会变得非常复杂,特别是当嵌套层级不确定时。这时候,你可能需要考虑更“编程”一点的解决方案,比如:

    • 栈(Stack)或计数器:遍历字符串,遇到开括号就入栈或计数器加一,遇到闭括号就出栈或计数器减一。当计数器归零时,表示一个完整的块结束。这种方法在解析编程语言的括号、HTML 标签匹配时很常见。
    • 递归函数:如果嵌套结构是递归定义的,那么用递归函数来解析会非常自然。比如解析一个像
      (A (B C) (D))
      这样的表达式树。

    这两种方法,相比简单的字符串截取,代码量会大一些,但鲁棒性强,能处理任意深度的嵌套。当然,这取决于你的具体需求,如果

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

553

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

6

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 19.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号