Question

I’ve got a string which at times contains css font sizes.
For example:

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

I need to change all the font sizes by multiplying them all by a set ratio of for example 1.5

var ratio = 1.5;

Search and replace is not my strong suit. How do I search the string for all font sizes and then do the math on each number?

So that the above string with this ratio will become:

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

Answer 1

Assuming that have that as a string and there is not a better way (if this came from innerHTML or so, you’re doin’ it wrong), then…

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.

If your browser doesn’t suck…

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;

If any of the declarations were not in the style attribute, you could use getComputedStyle().

I didn’t use a real documentFragment, because it doesn’t support the innerHTML property.