JS如何提取字符串内容-js教程-PHP中文网

JS如何提取字符串内容

小老鼠

发布： 2025-08-24 12:10:01

原创

325人浏览过

答案：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

登录后复制

就能搞定，

登录后复制

标志表示全局匹配，

*?

登录后复制

表示非贪婪匹配，这样就不会把两个双引号之间的所有内容都抓进去。

如此AI写作

AI驱动的内容营销平台，提供一站式的AI智能写作、管理和分发数字化工具。

137

查看详情

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

登录后复制

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

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

结构化数据，但以字符串形式存在：如果它本质上是 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);
}
```
登录后复制
自定义的嵌套格式：如果不是标准格式，但有明确的开始/结束标记，比如
```
[outer[inner]]
```
登录后复制
这种，正则表达式可能也能派上用场，但会变得非常复杂，特别是当嵌套层级不确定时。这时候，你可能需要考虑更“编程”一点的解决方案，比如：
- 栈（Stack）或计数器：遍历字符串，遇到开括号就入栈或计数器加一，遇到闭括号就出栈或计数器减一。当计数器归零时，表示一个完整的块结束。这种方法在解析编程语言的括号、HTML 标签匹配时很常见。
- 递归函数：如果嵌套结构是递归定义的，那么用递归函数来解析会非常自然。比如解析一个像
```
(A (B C) (D))
```
  登录后复制
  这样的表达式树。
这两种方法，相比简单的字符串截取，代码量会大一些，但鲁棒性强，能处理任意深度的嵌套。当然，这取决于你的具体需求，如果