我的代码：

Question

我的目标：
我正在尝试解析css字符串以检索不同的部分，如css规则，导入，注释，......

我做了什么：
我的函数首先检索注释，然后检索导入，最后检索规则块。
检索完这些部件后，每个部件都会记录到控制台上。

我的问题：
我的问题是当我测试它时，似乎我的代码在规则块部分被记录到控制台时生成随机数。

我的代码：

function output(css) {
    if(typeof css === 'string') {
        var current = css;
        // remove comments
        var comments = [];
        current = current.replace(/\s*\/\*[^*]*\*+([^/*][^*]*\*+)*\/|^\/\/[^\n]*\n?/gim, c=>comments.push(c.trim()));

        // retrieve @ imports
        var imports = [];
        current = current.replace(/@[^;{]+;/gi, imp => imports.push(imp.trim()));

        // retrieve rules blocks
        var rulesBlocks = [];
        current = current.replace(/[^};]+{[^{]*}/gi, block => {
            rulesBlocks.push(block.trim());
        });
        console.log(comments, imports, rulesBlocks);
    }
}

var css = document.getElementById('css').innerText;

output(css);

<pre id="css"><code>
#id, .class {
	#id {
	}
}
/**
*/
@import url('http://www.test.com/test.min.js/');
/*
@import url('http://www.test.com/test.min.js/');
*/
/***/
//#id, .class {
#id, .class {
	#id {
		& {
		}
	}
}
#id, .class {
	#id {
	}
}
declaration {
    data: test;
}
declaration2 declaration {
    data
}

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
</code></pre>

正如您所看到的，如果您运行它，控制台会在此行中显示随机数：
"1\n123\n4#id, .class {\n\t#id {\n\t\t& {\n\t\t}\n\t}\n}"
为什么它会产生随机数？为什么控制台显示1,123和4？

Answer 1

因为数组push返回数组的新长度，并且您将该返回值用作replacement。

您可以将函数指定为第二个参数。在这种情况下，将在执行匹配后调用该函数。函数的结果（返回值）将用作替换字符串。

所以：

current = current.replace(/@[^;{]+;/gi, imp => imports.push(imp.trim()));

将使用新的imports长度替换表达式的每个实例。

如果你想避免这个问题，你可以使用Washington Guedes＆＃39;建议在推送后添加&&'';或在替换函数中添加return imp（等），或重写函数以使用更惯用的exec方法。

Javascript正则表达式替换 - 出现随机数

我的代码：

1 个答案: