Question

我是正则表达式的初学者。

我一直在尝试使用regex101试图找出一种方法来捕获声明中的变量标识符。基本上是x中的var x = 1;而不是x = x + 1。

我正在与PrismJS合作尝试突出显示我的代码，不支持支持非捕获(?:)和它捕获每个部分匹配但是它可以选择忽略第一个括号来模仿“后视”功能。

我使用以下文字进行测试：

var a = 1,
    b=2,
    c = 3;
var d = 5;
var x, y = 3,
z;

var x = 1,
    z = 1.23E4, //comment
    w = +Infinity,
    u = NaN,
    t = 0x6F, //hexidecimal
    r = 0o37; //octadecimal

到目前为止，我只能想出一个技巧正则表达式：

/(var *| *,\n* *)(\w+)(?= *=| *,| *;)/g
// not captured    ^   not captured
//             captured

第一个括号会被忽略而不会被捕获以模仿后卫。我无法在var后的第一个括号中使用|。

但当然，它也会抓住这个我不想要的东西：

,
a =

请帮忙。有太多的限制，或者只是我太愚蠢，我无法构建一个有效的正则表达式。

Answer 1

好的，经过几个小时的修补，这是一个初步的版本！

正则表达式为/(var\s*|(?!^),\s*|(?!^),\s*\/\/ *.*?\n\s*)(\w+)/gm。

说明：

(
    var\s*                   // Matches "var" + whitespace (always a declaration)
  | (?!^),\s*                // Matches comma + whitespace
  | (?!^),\s*\/\/ *.*?\n\s*  // Matches comma + // comment + newline(s)
)
(\w+)                        // The identifier itself

顺便说一下，这也适用于for循环等，这要归功于var的情况1。

案例3是时髦的;它并不适用于所有情况，但捕获了相当多的情况。它在逗号（重要）后面查找内联注释，并在其周围添加空格。

下面是一个演示，我们重点介绍变量名称。请注意，这不会捕获整个分配，但您可以添加一些可选的内容来突出显示整个内容或只是值而不仅仅是标识符。

function highlight (src) {
    var regex = /(var\s*|(?!^),\s*|(?!^),\s*\/\/ *.*?\n\s*)(\w+)/gm;
    return src.replace(regex, "$1<span class='hl'>$2</span>");
}

window.onload = function () {
    var src = document.querySelector("pre").textContent;
    document.querySelector("pre").innerHTML = highlight(src);
};

body {
    line-height: 20px;
}
.hl {
    background: rgba(90, 255, 90, 0.2);
    border-radius: 3px;
    padding: 0 3px;
    border: 1px solid #444;
    cursor: default;
}
.hl:hover {
    background: rgba(90, 255, 90, 0.7);
}

<pre>
// everything below should highlight
var a = 1,
    b = 2,
    c = 3;
var d = 5;
var x, y = 3,
z;

z; // this shouldn't highlight

var me = 9, z3 = 10; // these two should highlight

x = x + 1; // this shouldn't

for (var i = 0; i < 5) {} // `i` here should highlight

// these should highlight
var x,y;
var m=19, zzz=12;

// this shouldn't
zzz = 15;

// and all of these should highlight.
var x = 1,
    z = 1.23E4, //comment
    someName = +Infinity,
    u = NaN,
    t = 0x6F, //hexidecimal
    r = 0o37; //octadecimal

// these should both highlight                      
var x, // variable
    y;

// these should be highlighted too
var x, //variable
y;

// and this shouldn't
,
a = 4;
</pre>

JS代码突出显示正则表达式

1 个答案: