regular expression in javascript string split, browser compatibility issue

Question

I've been investigating this issue that only seems to get worse the more I dig deeper.

I started innocently enough trying to use this expression to split a string on HTML 'br' tags:

T = captions.innerHTML.split(/<br.*?>/g);

This works in every browser (FF, Safari, Chrome), except IE7 and IE8 with example input text like this:

is invariably subjective. <br /> 
The less frequently used warnings (Probably/Possibly) <br /> 

Please note that the example text contains a space before the '/', and precedes a new line.

Both of the following will match all HTML tags in every browser:

T = captions.innerHTML.split(/<.*?>/g);
T = captions.innerHTML.split(/<.+?>/g);

However, surprisingly (to me at least), this does not work in FF and Chrome:

T = captions.innerHTML.split(/<br.+?>/g);

Edit:

This (suggested several times in the responses below,) does not work on IE 7 or 8:

T = captions.innerHTML.split(/<br[^>]*>/g);

(It did work on Chrome and FF.)

My question is: does anyone know an expression that works in all current browsers to match the 'br' tags above (but not other HTML tags). And can anyone confirm that the last example above should be a valid match since two characters are present in the example text before the '>'.

PS - my doctype is HTML transitional.

Edit:

I think I have evidence this is specific to the string.split() behavior on IE, and not regex in general. You have to use split() to see this issue. I have also found a test matrix that shows a failure rate of about 30% for split() test cases when I ran it on IE. The same tests passed 100% on FF and Chrome:

http://stevenlevithan.com/demo/split.cfm

So far, I have still not found a solution for IE, and the library provided by the author of that test matrix did not fix this case.

Answer 1

The reason your code is not working is because IE parses the HTML and makes the tags uppercase when you read it through innerHTML. For example, if you have HTML like this:

<div id='box'>
Hello<br>
World
</div>

And then you use this Javascript (in IE):

alert(document.getElementById('box').innerHTML);

You will get an alert box with this:

Hello<BR>World

Notice the <BR> is now uppercase. To fix this, just add the i flag in addition to the g flag to make the regex be case-insensitive and it will work as you expect.

Answer 2

Try this one:

/<br[^>]*>/gi

Answer 3

Instead of

/<br.*?>/

you could try

/<br[^>]*>/

i.e. matching "<br", followed by any characters other than '>', followed by '>'.

Answer 4

Regexes are fundamentally bad at parsing HTML (see Can you provide some examples of why it is hard to parse XML and HTML with a regex? for why). What you need is an HTML parser. See Can you provide an example of parsing HTML with your favorite parser? for examples using a variety of parsers.

In particular you may be interested in the JavaScript+DOM answer.

Answer 5

Well, unfortunately I don't have a wide variety of browsers at work (just IE - sigh) but right off the bat I can see a way to optimize your regex:

T = captions.innerHTML.split(/<br[^>]*?>/g);

The inline character class definition [^>] instructs the expression to match any character EXCEPT the greater-than sign. You may also want to make it case insensitive (pass gi at the end not just g).

Answer 6

Tested in Firefox 3 & IE7:

/<br.*?>/gi

Try it yourself here: http://jsbin.com/ofoke

var input = "one <br/>\n" 
          + "two <br />\n" 
          + "three <br>\n" 
; 

alert(input.replace(/<br.*?>/gi, ''));

Answer 7

<\sbr\s/?\s*>

matches

<br>, <br />, < br >,<br / >

I tested here in IE.6. If march is Ok, the js could certainly split it according to the regexp.