Javascript Regular Expressions - how to NOT match a substring between < and >

Question

I'm using this regular expression:

var regex = /\<.*?.\>/g

to match with this string:

var str = 'This <is> a string to <use> to test the <regular> expression'

using a simple match:

str.match(regex)

and, as expected, I get:

["<is>", "<use>", "<regular>"]

(But without the backslashes, sorry for any potential confusion)

How can I get the reverse result? i.e. what regular expression do I need that does not return those items contained between < and >?

I tried /(^\<.*?\>)/g and various other similar combos including square brackets and stuff. I've got loads of cool results, just nothing that is quite what I want.

Where I'm going with this: Basically I want to search and replace occurences of substrings but I want to exclude some of the search space, probably using < and >. I don't really want a destructive method as I don't want to break apart strings, change them, and worry about reconstructing them.

Of course I could do this 'manually' by searching through the string but I figured regular expressions should be able to handle this rather well. Alas, my knowledge is not where it needs to be!!

Answer 1

Here's a way to do custom replacement of everything outside of the tags, and to strip the tags from the tagged parts http://jsfiddle.net/tcATT/

var string = 'This <is> a string to <use> to test the <regular> expression';
// The regular expression matches everything, but each val is either a
// tagged value (<is> <regular>), or the text you actually want to replace
// you need to decide that in the replacer function
console.log(str.replace( /[^<>]+|<.*?>/g, function(val){
    if(val.charAt(0) == '<' && val.charAt(val.length - 1) == '>') {
      // Just strip the < and > from the ends
      return val.slice(1,-1);
    } else {
      // Do whatever you want with val here, I'm upcasing for simplicity
      return val.toUpperCase(); 
    }
} ));​
// outputs: "THIS is A STRING TO use TO TEST THE regular EXPRESSION" 

To generalize it, you could use

function replaceOutsideTags(str, replacer) {
    return str.replace( /[^<>]+|<.*?>/g, function(val){
        if(val.charAt(0) == '<' && val.charAt(val.length - 1) == '>') {
          // Just strip the < and > from the ends
          return val.slice(1,-1);
        } else {
          // Let the caller decide how to replace the parts that need replacing
          return replacer(val); 
        }
    })
}
// And call it like
console.log(
    replaceOutsideTags( str, function(val){
        return val.toUpperCase();
    })
);

Answer 2

If I understand correctly you want to apply some custom processing to a string except parts that are protected (enclosed in with < and >)? If, this is the case you could do it like this:

// The function that processes unprotected parts
function process(s) {
    // an example could be transforming whole part to uppercase:
    return s.toUpperCase();
}

// The function that splits string into chunks and applies processing
// to unprotected parts
function applyProcessing (s) {
    var a = s.split(/<|>/),
        out = '';

    for (var i=0; i<a.length; i++)
        out += i%2
                ? a[i]
                : process(a[i]);

    return out;
}

// now we just call the applyProcessing()
var str1 = 'This <is> a string to <use> to test the <regular> expression';
console.log(applyProcessing(str1));
// This outputs:
// "THIS is A STRING TO use TO TEST THE regular EXPRESSION"

// and another string:
var str2 = '<do not process this part!> The <rest> of the a <string>.';
console.log(applyProcessing(str2));
// This outputs:
// "do not process this part! THE rest OF THE A string."

This is basically it. It returns the whole string with the unprotected parts processed.

Please note that the splitting will not work correctly if the angle brackets (< and >) are not balanced.

There are various places that could be improved but I'll leave that as an excersize to the reader. ;p

Answer 3

This is a perfect application for passing a regex argument to the core String.split() method:

var results = str.split(/<[^<>]*>/);

Simple!

Answer 4

Using the variables you've already created, try using replace. It's non-destructive, too.

str.replace(regex, '');
--> "This  a string to  to test the  expression"

Answer 5

/\b[^<\W]\w*(?!>)\b/g

This works, test it out:

var str = 'This <is> a string to <use> to test the <regular> expression.';
var regex = /\<.*?.>/g;
console.dir(str.match(regex));
var regex2 = /\b[^<\W]\w*(?!>)\b/g;
console.dir(str.match(regex2));

Answer 6

Ah, okay, sorry - I misunderstood your question. This is a difficult problem to solve with pure regular expressions in javascript, because javascript doesn't support lookbehinds, and usually I think I would use lookaheads and lookbehinds to solve this. A (sort of contrived) way of doing it would be something like this:

str.replace(/((?:<[^>]+>)?)([^<]*)/g, function (m, sep, s) { return sep + s.replace('test', 'FOO'); })

// --> "This <is> a string to <use> to FOO the <regular> expression"

This also works on strings like "This test <is> a string to <use> to test the <regular> expression", and if you use /test/g instead of 'test' in the replacer function, it will also turn

"This test <is> a string to <use> to test the test <regular> expression"

into

"This FOO <is> a string to <use> to FOO the FOO <regular> expression"

UPDATE

And something like this would also strip the <> characters:

str.replace(/((?:<[^>]+>)?)([^<]*)/g, function (m, sep, s) { return sep.replace(/[<>]/g, '') + s.replace(/test/g, 'FOO'); })

"This test <is> a string to <use> to test the test <regular> expression"
--> "This FOO is a string to use to FOO the FOO regular expression"

Answer 7

Try this regex:

\b\w+\b(?!>)

UPDATE

To support spaces inside brackets try this one. It's not pure regex.match, but it works and it's much simpler that the answer above:

alert('This <is> a string to <use use> to test the <regular> expression'.split(/\s*<.+?>\s*/).join(' '));