I have an HTML string. It may be any number of elements. I want to remove ANY occurrence of inline styles containing font-size.
For example:
`<p><span style="font-size: 24px;">ORDER</span></p>`
I need that font-size out. I can't quite figure out how to do this with a javascript regular expression. Can I get some help?
Edit:
As revo mentioned:
You're using JS. A language that leverages DOM.
So, why not utilzing it?
ANY occurrence of inline styles containing font-size should be removed
var myString = `
<p>
<span style="font-size: 24px;">ORDER</span>
<span style="color:blue">
<b style="line-index:5px; font-size: 12px; margin: 5px">something</b>
</span>
</p>
`;
var divElement = document.createElement('div');
divElement.innerHTML = myString;
// loop through ALL DOM elements insidie the divElement
var elements = divElement.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
// remove the style attribute enterily if it contains font-size property
if ((elements[i].getAttribute('style') || '').includes('font-size')) {
elements[i].removeAttribute('style');
}
}
// here is your font-size free string
console.log(divElement.innerHTML)If we wish to just get the font-size number, then we can start with maybe this expression:
(?:font-size:\s+)([0-9]+)(?:.+?")
Here, we are adding (?:font-size:\s+) in a non-capturing group as the left boundary, then we collect our desired digits ([0-9]+), and swipe up to the first " using another non-capturing group (?:.+?").
We can simply modify/change these three capturing and non-capturing groups, if we like to have other outputs.
const regex = /(?:font-size:\s+)([0-9]+)(?:.+?")/gm;
const str = `"<div style="color: red;"><p style="font-size: 12px">Stuff</p></div>"`;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
If we want to remove the style tag and everything in it, this expression might work:
(style=".+?")
const regex = /(style=".+?")/gm;
const str = `"<div style="color: red;"><p style="font-size: 12px">Stuff</p></div>""<div style="color: red;"><p style="font-size: 12px">Stuff</p></div>""<div style="color: red;"><p style="font-size: 12px">Stuff</p></div>""<div style="color: red;"><p style="font-size: 12px">Stuff</p></div>"`;
const subst = ``;
// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);
console.log('Substitution result: ', result);Here you go this regex does it.
Find
(<[\w:]+)(?=((?:[^>"']|"[^"]*"|'[^']*')*?\s)\s*style\s*=\s*(?:(['"])\s*font-size:(?:(?!\3)[\S\s])*\3)\s*((?:[^>"']|"[^"]*"|'[^']*')*?>))\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+>
Replace
$1$2$4
https://regex101.com/r/4LC6R0/1
Regex with comments
( < [\w:]+ ) # (1), Any tag
(?= # Assert (a pseudo atomic group)
( # (2 start), Before style
(?: [^>"'] | " [^"]* " | ' [^']* ' )*?
\s
) # (2 end)
\s* style \s* = \s* # Style attribute
(?:
( ['"] ) # (3), Quote
\s* font-size: # Containing font-size:
(?:
(?! \3 )
[\S\s]
)*
\3
)
\s*
( # (4 start), After style
(?: [^>"'] | " [^"]* " | ' [^']* ' )*?
>
) # (4 end)
)
# Have everything just consume the rest of the tag
\s+
(?: " [\S\s]*? " | ' [\S\s]*? ' | [^>]*? )+
>