3

我有一个字符串，它有时包含 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>';
4

3 回答 3

3

假设将它作为一个字符串并且没有更好的方法（如果它来自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;

js小提琴。

如果你的浏览器没有坏...

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().

我没有使用 real documentFragment，因为它不支持该innerHTML属性。

于 2013-01-24T00:11:06.927 回答
1

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

str = str.replace(/(\d+)px/g, function (fullStr, pixels) {
  return (pixels * 1.5) + 'px';
});
于 2013-01-24T00:14:59.907 回答
0

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

str.replace(/font-size:\s*(\d*)/g,
            function (line, p1) { return ratio * parseInt(p1) })
于 2013-01-24T00:14:21.543 回答