【问题标题】：Javascript Regex Replace - Random numbers appearJavascript 正则表达式替换 - 出现随机数
【发布时间】：2017-11-22 00:03:33
【问题描述】：

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

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

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

我的代码：

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？

【问题讨论】：

这是因为 Array.push() 方法返回数组的长度，你的替换正在这样做。可以在push方法后面加上&&'';，就可以正常工作了。
不要使用正则表达式解析 CSS。使用 CSS 解析器。
@torazaburo 为什么我应该使用 CSS 解析器而不是正则表达式？什么是 CSS 解析器？
谷歌“CSS 解析器”。

标签： javascript css regex string replace

【解决方案1】：

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

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

所以：

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

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

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

【讨论】：