Question

我有一个字符串，有时包含css字体大小。例如：

str = '<span style="font-size: 200px;white-space:nowrap;">Text</span>
<br><span style="color:#555555;font-size:10px;">Some otherText</span>';

我需要通过将它们全部乘以例如1.5

的设定比率来更改所有字体大小

var ratio = 1.5;

搜索和替换不是我的强项。如何在字符串中搜索所有字体大小，然后对每个数字进行数学计算？

以上具有此比率的字符串将变为：

str = '<span style="font-size: 300px;white-space:nowrap;">Text</span>
<br><span style="color:#555555;font-size:15px;">Some otherText</span>';

Answer 1

假设将其作为字符串并且没有更好的方法（如果这来自innerHTML左右，那么你就错了），那么......

var fauxDocFrag = document.createElement("div");
var elements, i, len;

fauxDocFrag.innerHTML = str;

elements = fauxDocFrag.getElementsByTagName("*");

for (i = 0, len = elements.length; i < len; i++) {
    elements[i].style.fontSize = (parseInt(elements[i].style.fontSize) * 1.5)
                                 + "px";
}

str = fauxDocFrag.innerHTML;

jsFiddle

如果您的浏览器不吸...

var fauxDocFrag = document.createElement("div");

fauxDocFrag.innerHTML = str;

[].forEach.call(fauxDocFrag.getElementsByTagName("*"), function(element) {
     element.style.fontSize = (parseInt(elements.style.fontSize) * 1.5)
                              + "px";
});

str = fauxDocFrag.innerHTML;

如果任何声明不在style属性中，您可以使用getComputedStyle()。

我没有使用真实的documentFragment，因为它不支持innerHTML属性。

Answer 2

亚历克斯是对的，可能有更好的方法，但用字符串代替答案回答你的问题：

str = str.replace(/(\d+)px/g, function (fullStr, pixels) {
  return (pixels * 1.5) + 'px';
});

Answer 3

您可以使用replace对象的String方法，并指定一个函数作为替换值。

str.replace(/font-size:\s*(\d*)/g,
            function (line, p1) { return ratio * parseInt(p1) })

更改字符串中的某些数字

3 个答案: