如何在长CSS字符串中提取最后一个body{}代码块？

嘿，我来帮你搞定这个问题～你的现有代码有两个关键问题导致没法正确提取目标内容，咱们先拆解问题，再给出靠谱的解决方案：

原代码的问题所在 #

1. 起始位置计算错误：str.lastIndexOf("body {") + 1 会跳过body {的第一个字符b，导致提取的内容开头就缺了字符，肯定不对。
2. 结束位置匹配不准确：直接用str.lastIndexOf("}")拿到的是整个CSS字符串的最后一个闭合大括号，但这个括号大概率属于最后一个自定义类选择器，不是你要的最后一个body块的闭合括号。

针对性解决方案 #

场景1：普通CSS（body规则内无嵌套大括号） #

绝大多数情况下，body的CSS规则里不会嵌套其他大括号，咱们可以精准定位最后一个body {的起始位置，然后从这个位置开始找第一个闭合大括号，这样就能拿到完整的body块：

var str = 'body { background: #fff; } .customClass{ font-size: 12px; } .anotherClass { color: #292929 } body { color : #fff }';

// 定位最后一个"body {"的起始索引
const lastBodyStart = str.lastIndexOf("body {");
// 从这个位置开始，找到对应的第一个闭合大括号
const bodyEnd = str.indexOf("}", lastBodyStart);
// 提取完整的body块（+1是为了把闭合}包含进去）
const lastBodyBlock = str.substring(lastBodyStart, bodyEnd + 1);

console.log(lastBodyBlock);
// 输出结果：body { color : #fff }

场景2：复杂CSS（body规则内有嵌套大括号） #

如果你的CSS里body块内部有嵌套的大括号（比如嵌套了@media或者其他嵌套规则，虽然这种情况不多见），咱们需要用计数器来匹配对应层级的闭合括号，避免被内部括号干扰：

var str = 'body { background: #fff; } .customClass{ font-size: 12px; } body { color: #fff; .nested { padding: 10px; } }';

const lastBodyStart = str.lastIndexOf("body {");
let bracketCount = 1; // 已经找到了一个"{"，初始计数为1
let bodyEnd = lastBodyStart + 6; // 跳过"body {"这6个字符，从下一位开始遍历

// 遍历字符串，匹配对应的闭合括号
while (bracketCount > 0 && bodyEnd < str.length) {
  if (str[bodyEnd] === "{") {
    bracketCount++;
  } else if (str[bodyEnd] === "}") {
    bracketCount--;
  }
  bodyEnd++;
}

// 提取完整的body块
const lastBodyBlock = str.substring(lastBodyStart, bodyEnd);
console.log(lastBodyBlock);
// 输出结果：body { color: #fff; .nested { padding: 10px; } }

额外优化：兼容空格差异 #

如果你的CSS里body和{之间有不定数量的空格（比如body {或者body\t{），可以用正则来匹配最后一个body规则的起始，适配各种格式：

// 用正则匹配所有符合格式的body起始，兼容任意空格
const bodyMatches = str.match(/body\s*{/g);
// 取最后一个匹配项的起始位置
const lastBodyStart = str.lastIndexOf(bodyMatches[bodyMatches.length - 1]);
// 后续逻辑和上面的方案一致即可

这样不管你的body选择器写得有多随意，都能精准定位啦～

内容的提问来源于stack exchange，提问作者Faizan Saiyed