在JavaScript Regex中查找标记之外的字符？

Question

I'm trying to find & characters via regex which fit a particular rule to avoid formatting for markdown parsing. The characters should only be matched where they are outside of <> tags (eg *<a href="...">*</a>* ), and outside of parenthesis which are not immediately preceded with leading square brackets, such as *[*]()* .)

The current version of the regex which works for the first case is:

/(\&)(?![^<]*>|[<>]*<\/)/gi

And can be viewed here . In this case the third match on the third line should not match.

In addition the test case in the link above is below for the sake of not relying entirely on external sites:

& <a href="http://www.google.com?a=b&c=d"> & </a> &
& <a href="http://www.google.com?a=b&c=d"> & </a> &
& ![test & amp](http://www.google.com?a=b&c=d) &
& all the amps on this line should match [ & ] (&) [ &] ( & ) [& ] (& )[&] ( &) &
& <a href="http://www.google.com?a=b&c=d"> & </a> &
& <a href="http://www.google.com?a=b&c=d"> & </a> && <a href="http://www.google.com?a=b&c=d"> & </a> && <a href="http://www.google.com?a=b&c=d"> & </a> &
& <a href="http://www.google.com?a=b&c=d"> & </a> &

Answer 1

function processTextNodes(htmlString, callback) {
    var div = document.createElement('div');
    div.innerHTML = htmlString;

    var elements = [div];
    var element, child, i;

    while (elements.length) {
        element = elements.shift();
        for (i = 0; i < element.childNodes.length; i++) {
            child = element.childNodes[i];
            if (child.nodeType === element.ELEMENT_NODE) {
                elements.push(child);
            } else if (child.nodeType === element.TEXT_NODE) {
                child.textContent = callback(child);
            }
        }
    }

    return div.innerHTML;
}

usage

var html = 'hello <h1>This is a heading & a <span>nested value</span></h1> bye!';

processTextNodes(html, function (textNode) {
    return textNode.textContent.toUpperCase();
});

gives you

"HELLO <h1>THIS IS A HEADING &amp; A <span>NESTED VALUE</span></h1> BYE!"

Note how the escaping is done by the browser's HTML parser. Don't try to re-implement that, especially not with regex. The world's most powerful HTML parser that can even deal with any kind of broken input is right at your fingertips. Use it.

If you don't need the "process text node values" part, remove it and the function becomes very short:

function fixHTML(htmlString) {
    var div = document.createElement('div');
    div.innerHTML = htmlString;    
    return div.innerHTML;
}

Answer 2

For anyone who happens to come across this question, contrary to what someone on this page is suggesting, it is not impossible. I was able to get it by using lookbehinds after enabling the experimental JavaScript features within the V8 engine. The following will work in Chrome after going to chrome://flags and checking off Experimental JavaScript or running node.js with the --harmony option.

/(?<!(?<=\[(.*))\]\(([a-zA-Z0-9\-\.\_\~\:\/\?\#\[\]\@\!\$\&\'\(\)\*\+\,\;\=\%]*))(\&)(?![^<]*>|[<>]*<\/)/gi

Example fiddle . (must have Harmony enabled within Chrome to view correctly)

Hopefully lookbehinds will make it into the next ECMAScript standard so the other experimental JS stuff won't be needed with it.