Question

I’m working on a large project that has been developed over the span of about 20 years and it is massive. There’s a modification that needs to be done to 300 or so pages, with about 2800 actual replacements. This brings me to desire to use Visual Studio’s RegEx to do the actual replacement.

It is in a pseudo-HTML file of another file type that is passed to a parser that ‘executes’ code based on certain commands, and outputs HTML text. The syntax I am working with contains regular HTML code with calls like such:

<div id="outer-box" <__@BGCOLOR>>            //Basic call
<div id="outer-box" <__@BGCOLOR TOGGLE"1">>  //Call with toggle (only) parameter

Now what I need to do is change it to:

<div id="outer-box" style="<__@BGCOLOR>">
<div id="outer-box" style="<__@BGCOLOR TOGGLE="1">">

But here’s the problem. Some tags already have the style attribute declared like so:

<div id="inner-box" style="border:1px" <__@BGCOLOR>>  //One possibility
<div id="inner-box" <__@BGCOLOR> style="border:1px">  //Another one

Meaning I would need to change it to:

<div id="inner-box" style="<__@BGCOLOR>border:1px">

I’ve fought with it for several hours now and cannot seem to get it right. I should also add that sometimes more than one HTML element will be on a line, and sometimes more than one parser call (with a different command than BGCOLOR) will be in a given element.

What I have so far to find ALL instances of it that I have not already fixed is such:

~(style=")\<__\@BGCOLOR{.@}\>

EDIT : For clarification, this is using Visual Studio’s RegEx syntax and I’m looking specifically for calls to the BGCOLOR command. I have the RegEx above that is able to find all cases of <__@BGCOLOR[ TOGGLE=”1″]> that is not preceded by ‘style=”‘ to filter out already fixed items.

Answer 1

I’m going to start by making some simplifying assumptions about the text. This is always necessary when trying to match HTML with regexes, but in this case it’s mostly to make the regexes easier to read. The regexes can be corrected to reflect more complicated criteria without changing their basic structure.

• Element and attribute names are always alphabetic (i.e., they match VS’s :w, or [A-Za-z]+).
• Attribute names are always preceded by spaces and/or tabs (:b+).
• Attribute values are always quoted (:q).
• There are no spaces around the = between the attribute name and its value.

Also, notice the way I use the negative lookahead in ~(style):w. It says “one or more letters (:w), but not if they make up the word style“. You’re using it as if it were a negative lookbehind: “<__@BGCOLOR{.@}>, unless it’s preceded by style=“. A lot of people make that mistake.

I propose a four-step process:

First, match any element with a special token in it and rearrange it so the token is listed after all attributes:

• search: {\<:w(:b+:w=:q)*}{:b+\<__\@BGCOLOR[^<>]*\>}{(:b+:w=:q)+}
• replace: \1\3\2

Second, if there’s a style attribute, make sure it’s the last attribute listed (but before the special token):

• search: {\<:w(:b+~(style):w=:q)*}{:b+style=:q}{(:b+~(style):w=:q)+}{:b+\<__\@BGCOLOR[^<>]*\>}
• replace: \1\3\2\4

Third, wrap the special token in a style attribute:

• search: {\<__\@BGCOLOR[^<>]*\>}\>
• replace: style="\1">

Finally, if there are two style attributes, merge them:

• search: style="{[^"]+}":b+style="{\<[^<>]+\>}"
• replace: style="\1; \2"

Starting from this text:

<div <__@BGCOLOR> id="inner-box" style="border:1px">
<div foo="bar" id="inner-box" <__@BGCOLOR TOGGLE="1"> style="border:1px">
<div id="inner-box" bar="foo" <__@BGCOLOR>>
<div  id="inner-box" <__@BGCOLOR> style="border:1px">
<div id="inner-box" style="border:1px" <__@BGCOLOR TOGGLE="1">>
<div id="inner-box" <__@BGCOLOR> foo="bar">

…I end up with this:

<div id="inner-box" style="border:1px; <__@BGCOLOR>">
<div foo="bar" id="inner-box" style="border:1px; <__@BGCOLOR TOGGLE="1">">
<div id="inner-box" bar="foo" style="<__@BGCOLOR>">
<div  id="inner-box" style="border:1px; <__@BGCOLOR>">
<div id="inner-box" style="border:1px; <__@BGCOLOR TOGGLE="1">">
<div id="inner-box" foo="bar" style="<__@BGCOLOR>">

I gotta tell ya, Visual Studio is a major handicap here. It’s a great IDE, but its regex flavor is just bizarre. If you’re going to do much of this kind of thing, I strongly recommend you switch to a tool like EditPad Pro or PowerGrep that uses a full-featured regex flavor with standard syntax.

EDIT: I finally did the (relatively) sensible thing and composed the regexes in a Perl-like flavor, mainly to find out if the problem is even solvable with regexes. It is, and it only took two steps:

search:

(
  <\w+\b
  (?:
    \s*
    (?:
      \w+="[^"]+"
    |
      <(?!__@BGCOLOR)[^<>]*>
    )
  )*
  \s*
)
(<__@BGCOLOR[^<>]*>)
(
  (?:
    \s*
    (?:
      \w+="[^"]+"
    |
      <[^<>]+>
    )
  )*
)

replace:

$1style="$2"$3

search:

(
  <\w+\b
  (?:
    \s*
    (?:
      (?!style)\w+="[^"]+"
    |
      <[^<>]+>
    )
  )*
  \s*
)
style="([^"]+)"
(
  (?:
    \s*
    (?:
      (?!style)\w+="[^"]+"
    |
      <[^<>]+>
    )
  )*
)
\s*style="([^"]+)"

replace:

$1style="$2; $4"$3

The next step would be to translate that to Visual Studio syntax (if that’s even possible), but I’m too tired to start on that right now. 😉 And, as I said before, if you’re going to be doing this kind of thing a lot, you should look into writing a dedicated parser, or switching to a tool or language that uses standard syntax (for very loose definitions of “standard”). Whatever you do, quit using Visual Studio’s native so-called regexes and you’ll be doing everyone a favor. 😀