求教一个JavaScript正则表达式

Question

[code=javascript]
if ( content.match(/(?![^{]+})(?:.|#)([_a-zA-Z]+[_a-zA-Z0-9-]*)/) !== null && content.replace(content.match(/(?![^{]+})(?:.|#)([_a-zA-Z]+[_a-zA-Z0-9-]*)/)[0], "").replace(/ /g,"") === "" ) {
// use element
return {
"type" : "element",
"element" : content.match(/(?![^{]+})(?:.|#)([_a-zA-Z]+[_a-zA-Z0-9-]*)/)[0]
};
}
[/code]

第一个大概能看懂一部分，匹配#xx id选择器或.xx class选择器，但是第一个子项(?![^{]+})还有replace再replace用处不太明白，求大神指教[img=http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/2.gif][/img]

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这段代码使用了JavaScript的正则表达式来检查和替换HTML元素的选择器。下面是对这个代码的理解：

1. content.match(/(?![^{]+))：这行代码是使用正则表达式来查找并匹配所有不包含<div>标签开始标记（即</div>）的字符串。

   • (?![^{]+)：这是一个否定括号，表示在找到一个匹配后，将跳过接下来的所有匹配。

   • |：这是逻辑或操作符，用来连接两个不同的选择器。

   • (?:.||#)：这是非捕获组，用于匹配任何字符或者特殊字符。

   • _a-zA-Z：这是一个范围，用于匹配大小写字母。

   • [a-zA-Z0-9-]*：这是一个非贪婪的匹配，用于匹配任意数量的字母、数字或连字符。

   • /：这是空格分隔符，用于分割选择器中的各个部分。

   • (_a-zA-Z)+：这是一个非贪婪的匹配，用于匹配连续的字母。

   • _a-zA-Z：这是另一个范围，用于匹配大小写字母。

   • {*}：这是非贪婪的匹配，用于匹配任意数量的字符。

   • #：这是特殊符号，用于匹配数字或连字符。

2. content.replace(content.match(/(?![^{]+))(?:.|#/)[0])：这行代码是用来替换匹配到的文本，其中content.match()函数返回了一个正则表达式的匹配结果数组，我们通过索引访问到了第一个匹配的子串。

   • content.match()：这个函数用来从原始内容中获取所有的匹配项，并将其作为数组返回。

   • content.match(/(?![^{]+))：同上所述，这里是一个否定括号，表示在找到一个匹配后，将跳过接下来的所有匹配。

   • content.match(/(?![^{]+)(?:.|#/)[0])：同上所述，这里有一个非捕获组，用于匹配第一个匹配的子串。

   • content.match(/(?![^{]+)(?:.|#/)[0])：这里再次调用了同一个方法，因为我们需要找到的第一个匹配就是我们要替换的文本。

   • content.replace()：这个函数用来替换原始内容中的指定子串，这里的参数是一个正则表达式对象，它包含了要被替换的子串及其模式。

3. return { ... }：这行代码是返回一个对象，其中包含了匹配到的元素类型和元素名称。

4. return { type: 'element', element: content.match(/(?![^{]+)(?:.|#/)[0])[0] };：这里是返回的对象结构，其中type属性代表元素类型，element属性代表匹配到的元素名称。

5. if (content.match(/(?![^{]+))(?:.|#/)[0] !== null && content.replace(content.match(/(?![^{]+)(?:.|#/)[0])[0], "").replace(/ /g, "") === "") {：这行代码是判断是否找到了匹配的元素，并且替换后的文本为空。

6. return { ... }：这行代码是返回一个对象，其中包含了匹配到的元素类型和元素名称。

7. return { type: 'element', element: content.match(/(?![^{]+)(?:.|#/)[0])[0] };：这里返回的结果是一个对象，其中包含了元素类型和元素名称。

总的来说，这段代码的主要目的是检查一个HTML元素是否存在，以及如果存在的话，它的ID或类名是什么。