How to remove some css properties using regular expression?


Tags: css,regex

Problem :

"outline-style: none; margin: 0px; padding: 2px; background-color: #eff0f8; color: #3b3a39; font-family: Georgia,'Times New Roman',Times,serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; border: 1px solid #ebebeb; float: left;"

I have this as inline css. I would like to substitute blank space for all the properties starting with "background" and "font" using regular expression. In inline css, the last property might not have semi colon as end

I am using this code as a django filter to remove those properties from server side using beautiful soup

def html_remove_attrs(value):
    soup = BeautifulSoup(value)
    print "hi"
    for tag in soup.findAll(True,{'style': re.compile(r'')}): 
        #tag.attrs = None
        #for attr in tag.attrs:
        #    if "class" in attr:
        #        tag.attrs.remove(attr)
        #    if "style" in attr:
        #        tag.attrs.remove(attr)
        for attr in tag.attrs:
            if "style" in attr:
                #remove the background and font properties 

    return soup


Solution :

I don't know about the details of your programming environment, but you asked for a regular expression. This regular expression will find property keys (plus colon and any space) as group 1 ($1) and property values as group 2 ($2):

 ((?:background|font)(?:[^:]+):(?:\\s*))([^;]+)

The expression does not remove the property values. It finds them. How you remove them depends on your programming environment (language/libraries).

But basically, you would be doing a global find/replace, replacing the whole result with $1.

For example, using Java you could do this

public static void main(String[] args) throws Exception {

    String[] lines = {
        "outline-style: none; margin: 0px; padding: 2px; background-color: #eff0f8; color: #3b3a39; font-family: Georgia,'Times New Roman',Times,serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; border: 1px solid #ebebeb; float: left;",
        "outline-style: none; margin: 0px; padding: 2px; background-color: #eff0f8; color: #3b3a39; font-family: Georgia,'Times New Roman',Times,serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; border: 1px solid #ebebeb; float: left",
        "background-color: #eff0f8;",
        "background-color: #eff0f8",
    };

    String regex = "((?:background|font)(?:[^:]+):(?:\\s*))([^;]+)";

    Pattern p = Pattern.compile(regex);

    for (String s: lines) {
        StringBuffer sb = new StringBuffer();
        Matcher m = p.matcher(s);
        while (m.find()) {

            // capturing group(2) for debug purpose only
            // just to get it's length so we can fill that with '-' 
            // to assist comparison of before and after
            String text = m.group(2);
            text = text.replaceAll(".", "-");
            m.appendReplacement(sb, "$1"+text);

            // for non-debug mode, just use this instead
            // m.appendReplacement(sb, "$1");
        }
        m.appendTail(sb);

        System.err.println("> " + s); // before
        System.err.println("< " +sb.toString()); // after
        System.err.println();
    }
}

    CSS Howto..

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    How to defferent row heights for different rows in a single table?

    How to make css border like this? [closed]

    css: how to have a variable column size with text overflow ellipsis

    How to hide div on swipe in Angular

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to center list of links in a straight line. CSS

    How to get MathJax's HTML output just like Stackedit.io?

    CSS: how to add a down arrow for the active link

    How to get CSS background images to show up in HTML files opened by Word?

    How to write css for that?

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    In CSS, how to scale multiple overlayed images responsively?

    How to change color of selection in Select2 4.0.1?

    How can I make the header's border/other content not overlap the img on the left?

    How do I change the overflow of a single element, while having the overflow of the body hidden?

    How to move stacked columns up (using bootstrap but any css will do)

    How to convert CSS class to id?

    How to Remove the Awkward Margin to the Left of my Unordered List?

    How to make double lines border in CSS, each line in different color, without using background image?

    How to add image, that overlapping Bootstrap modal?

    How do you set the filepath for css in hiccup with Clojure using the html5 tag?

    how to modify height of a div when hover it and with transition (priority of CSS without Javascript)

    How to set ASP dropdownlist to read only with css or javascript?

    How to style unordered lists in CSS as comma separated text

    How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

    How to fill an HTML form with CSS?

    how to remove small space that only appear in iphone browser

    How can I change the inline style text color of an element without the ability to add a class or id?

    How to set a menu hover delay