javascript - RegExp "g"标志未替换每个实例

Question

我正在研究 EM 到 PX 转换器。基本上，您将代码粘贴到“PX”文本区域中，然后相同的代码将出现在具有 em 值的“EM”文本区域中。它有点工作，但不会替换所有实例的值。例如:如果您输入“padding: 5px;”它会给你“填充:0.313em;”成功地。但是......如果你输入“填充:5px 4px;”它只是将“px”替换为“em”，而不是实际数值。

在这里亲自尝试一下::http://jsfiddle.net/tJsNz/

        function pxToEm(){
        var px = document.getElementById("px"),
            em = document.getElementById("em"),
            parent = document.getElementById("parent-font-size");

        var pxVal = px.value.match(/\d+/ig);
        var pxToEm = 1 / parent.value * pxVal;
        var pxToEmFixed = pxToEm.toFixed(3);
        var pxToEmAnswer = px.value.replace(pxVal, pxToEmFixed).replace(/px/ig, "em");

        em.value = pxToEmAnswer;
    }

Answer 1

考虑使用 .replace用callback function .我认为这就是您想要的 - 找到每个匹配项并根据它进行替换。

String 的 .replace 方法可以接受回调作为第二个参数，并在每次匹配时运行该回调。您可以运行它并匹配所有数字，然后用它们的翻译值替换它们。

举个简单的例子

var i=0;
"aaaaaa".replace(/a/g,function(match){
    return i++;
});

将返回 "012345"。 Here is another example from MDN

在你的情况下是这样的:

var pxToEmAnswer = px.value.replace(/\d+/ig, function(match){
    return 1 / parent.value * match;
}).replace(/px/ig, "em");

(fiddle)