JavaScript Regex over CSS:如何处理错误的类

JavaScript Regex over CSS: How to deal with erroneous classes?

本文关键字：处理 错误 何处理 over Regex CSS JavaScript      更新时间：2023-09-26

我正在使用nodejs，其中读取了一个css文件，并读出了类名/idname及其相关属性。为此，我使用了以下正则表达式（数据是我从回调函数接收的文件内容）：

  data = data.replace(/'}/gm,"}'n")
  data = data.replace(/['r'n|'n|'r]*'}['r'n|'n|'r]*/gm,"}~")
  data = data.split("~")
  regex = /['.#a-z][a-z0-9'-]*'{.*'}/gi
  results = []
  for(i = 0;i<data.length;i++)
  {
    data[i] = data[i].replace(/(['r'n|'n|'r|'s]*)/gm,"")
    while ( (result = regex.exec(data[i])) ) {
      results.push(result[0]);
  }

读取以下文件内容：

@color:#ffeedd;
.circle{
background:red;
}
#big-circle{color:green;}#small-circle{
color:yellow;
}
mango{
  color:brown;
}

并将输出作为

[ '.circle{background:red;}',
  '#big-circle{color:green;}',
  '#small-circle{color:yellow;}',
  'mango{color:brown;}' ]

简要介绍我所做的事情：

  1. 我根据 } 的存在（即类的右括号）划分了整个 CSS 文件，并在每个 } data = data.replace(/'}/gm,"}'n")之后添加了 '
  2. 我使用正则表达式替换了换行符的每个实例，
    3. 后跟 } 后跟换行符，后跟换行符，带有 } 和 ~ data = data.replace(/['r'n|'n|'r]*'}['r'n|'n|'r]*/gm,"}~")
  3. 然后我按照 }~ 拆分数据，给我一个类/ID 数组data = data.split("~")
  4. 然后我在内部从每个类中删除了空格data[i] = data[i].replace(/(['r'n|'n|'r|'s]*)/gm,"")

但是，有一个问题。 如果类正确以 } 结尾，则确实运行良好。如果出现错误，这将无法正常工作。我的问题是，我可以应用什么正则表达式或步骤来确保捕获此类错误并将其显示给用户（很像lessc编译器）？我想这不仅仅是一个简单的括号匹配（可以使用堆栈实现）

例如：

@color:#ffeedd;
.circle{
background:red;
}
#big-circle{color:green;}#small-circle{
color:yellow;

mango{
  color:brown;
}

给出以下错误：

ParseError: Unrecognised input. Possibly missing something in /less/style.less on line 13, column 1:
12 }
13

谢谢

采取简单的方法...使用 LESS 解析器，而不是尝试自己滚动一个。

正则表达式对于匹配众所周知的文本格式很有用。匹配未知格式很糟糕。事实上，这是不可能的。您已经注意到一个特定的错误，并希望使您的临时解析器随之滚动，但是其他可能的错误呢？你要尝试抓住所有这些吗？

括号太多

.circle{{
    background:red;
}

或

.circle{
    background:red;
}
}

被遗忘的分号

.circle{
    background:red
    color: yellow
}

被遗忘的冒号

.circle{
    background red
}

混杂的程序员

.circle{
    background=red
}

或

.circle(
    background:red
)

可能的错误列表几乎是无穷无尽的，但您的正则表达式永远不会足够聪明来捕获它们。使用适当的 LESS 解析器（可能是打开了错误报告的客户端内版本）。

相关文章：