Question

I’ve got hundreds (more than 700) sets of web folders, each containing discrete CSS stylesheets. (If you are curious, they are online courses.)

Recently a decision was made that links should have underlines. I know that W3C decided that a long time ago, but this is a University and they like to re-decide things.

I’ve been trying to update all the CSS files using a RegEx search and replace.

Major hurdles so far have been:

• Windows. I don’t like it, I’m not using it. Command-line utilities like FART are great for single-line stuff, but writing a more customized and powerful search proved to be too much for it.

• Multi-Line. CSS files are usually structured like this:

  a, .surveypopup{
  text-decoration:none;
      cursor:pointer;
  }
  

  Which means that the selector (the part before the “{“) is always on a separate line from the goodies. I want to match all selectors that modify “a” without an event (like :hover) and ensure that anything with “text-decoration:none” becomes “text-decoration:underline” without messing up any other styling code that may be sandwiched between.

• Case-insensitive. For RegEx, this shouldn’t be a problem. The authors of this CSS may or may not have gotten creative with their capitalization.

The command-line I’m currently erroring with is this:

find . -iname "*.css" | xargs sed -i "" "s|\(\ba\(,\|\.\|\s\|\b\)\[^\{\]\*\{\[^\}\]\*\)text-decoration\:none|a.\1text-decoration:underline;|g"

Which produces:

sed: 1: "s|\(\ba\(,\|\.\|\s\|\b\ ...": RE error: invalid repetition count(s)

I’m wondering if my needs justify writing a bash script? It would be nice to create a backup of each file if a modification is required. Multiple operations like that would be easier in a script…

Either way, I assume I’m having problems because I don’t know what to escape for sed, and what not to escape.

Please help!

Answer 1

Operating on an entire file at once you can use:

s/(\ba(?=(?:\.|,|\s|{|#)))([^}{]*?{[^}]*?text-decoration:\s*)none(\s?!important)?;/$1$2underline;/g

More nicely formatted, this is:

s/                          # find and replace
    (                       # group 1
        \b                  # a word boundary
        a                   # followed by 'a'
        (?=                 # where the next character (positive lookahead)
            (?:             # (inside a non-capturing group)
              \.|,|\s|{|#   # is one of '.', ',', '{', '#' or whitespace
            ) 
        )
    )
    (                       # group 2
        [^}{]*?             # then non-greedily match anything up to a '{' or '}'
                            # if '}' is found, the next character will not match
                            # and therefore the whole regex will not match
        {                   # and find the '{'
        [^}]*?              # and then non-greedily match anything until we 
                            # find 'text-decoration', but don't keep matching
                            # when a '}' is found
        text-decoration:    # then find 'text-decoration'
        \s*                 # and optional whitespace
    )
    none                    # and 'none'
    (\s?!important)?        # and optional '!important'
    ;                       # and a ';'
/
    $1                      # replace by group 1
    $2                      # then group 2
    underline;              # then 'underline;'
/g

Example file:

$ cat test.css
a { text-decoration: none; }
b, a { text-decoration: none; }
b, a, u { text-decoration: none; }
b, a.cat, u { text-decoration: none; }
b, a.cat, u { text-decoration: none !important; }
b, a, u {
    text-decoration: none;
}
b, a, u {
    color: red;
    text-decoration: none;
}
b, a, u {
    color: red;
    text-decoration: none;
    padding: 10px;
}

And result:

perl -0777 -p -e 's/(\ba(?=(?:\.|,|\s|{|#)))([^}{]*?{[^}]*?text-decoration:\s*)none(\s?!important)?;/$1$2underline;/g' test.css
a { text-decoration: underline; }
b, a { text-decoration: underline; }
b, a, u { text-decoration: underline; }
b, a.cat, u { text-decoration: underline; }
b, a.cat, u { text-decoration: underline; }
b, a, u {
    text-decoration: underline;
}
b, a, u {
    color: red;
    text-decoration: underline;
}
b, a, u {
    color: red;
    text-decoration: underline;
    padding: 10px;
}

You can use perl’s -i flag (don’t forget to set a backup extension!) to operate on the files in-place.

There’s obviously a lot of other possible CSS rules which can include an a; e.g. html>a or div a b; this regex will not find the first, and will find the second, but will be “wrong” in both cases. Basically, you can use regex for these types of tasks only when you can make strong assumptions about the text you’re manipulating.

update added } to part of a rule to avoid matching, e.g.:

b { background-image: url('http://domain.com/this is a picture.jpg'); }
u { text-decoration: none; }