Javascript regex to find forward slashes between > and <

Question

In a Javascript function I need to replace all forward slashes not part of an HTML tag with &#x2F.

Is there any way using a regular expression to find all forward slashes between a > and a <?

duplicate question http://stackoverflow.com/questions/4455606/how-to-find-text-and-replace-using-jquery — Daniel Moses, Jul 22 '13 at 20:33
Would this work? body_text = body_text.replace(/(?<=">")(.\/)(?="<")/g, "/"); — Warren Schubert, Jul 22 '13 at 20:38
@Charlie You're right. That question doesn't even give a valid answer. — Daniel Moses, Jul 22 '13 at 20:50
@WarrenSchubert: it can't work since javascript regexes don't have the lookbehind feature (i.e. `(?<=...)`) — Casimir et Hippolyte, Jul 22 '13 at 21:30

score 2 · Answer 1 · answered Jul 22 '13 at 20:33

2

Not exactly, but if you're in this kind of a fix, I guess you'll be happy with a quick-and-dirty solution: Find a / if the next occurring angle bracket is not a closing angle bracket.

result = subject.replace(/\/(?![^<>]*>)/g, "&#x2F");

Of course, this is highly brittle - for example it doesn't care at all about comments, strings etc. (yet, and it would be very difficult to pull this off with regex).

answered Jul 22 '13 at 20:33

Tim Pietzcker

328,213
58
503
561

Thanks, I think that may work for this application; I'm going to try it. – Warren Schubert Jul 22 '13 at 20:41

Casimir et Hippolyte · Answer 2 · 2013-07-22T21:25:15.250

1

You can test this:

html ='<a href="/sdfsdf/SD/sdfsf">toto/tata</a>';

html = html.replace(/(<[^>]+>)|\//g,
    function (match, p1) { return (p1)?match:"&#x2f"; });

console.log (html);

The idea is to capture all html tags (and replace by themselves) before trying to match slashes. Then a callback function tests if the first capture group exist and return the full match or the replacement.

You can improve the safety of this pattern to deal with style and script content, like this:

html = html.replace(/(<s(tyle|cript)\b[\s\S]*?<\/s\2>|<[^>]+>)|\//gi,
    function (match, p1, p2) { return (p1)?match:"&#x2f"; });

edited Jul 22 '13 at 21:25

answered Jul 22 '13 at 20:39

Casimir et Hippolyte

88,009
5
94
125

This will replace `/` in script and style tags which can cause issues. – Daniel Moses Jul 22 '13 at 20:43
Yes, you might also want to skip the following: `<![CDATA[...]]>` and `` See http://www.whatwg.org/specs/web-apps/current-work/multipage/tokenization.html#tag-open-state for how HTML5 is parsed. – Daniel Moses Jul 22 '13 at 21:27

Daniel Moses · Answer 3 · 2013-07-22T20:46:07.930

here is a good example. First hit on google: http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/

The basic idea is to iterate through all the nodes in the DOM and replace text in text nodes. Also, don't replace any text in nodes in script, style, metadata type tags. While you might be able to do this with one big regex, it doesn't make much sense to implement a dom parser in regex when there is one built into every browser.

function findAndReplace(searchText, replacement, searchNode) {
    if (!searchText || typeof replacement === 'undefined') {
        // Throw error here if you want...
        return;
    }
    var regex = typeof searchText === 'string' ?
                new RegExp(searchText, 'g') : searchText,
        childNodes = (searchNode || document.body).childNodes,
        cnLength = childNodes.length,
        excludes = 'html,head,style,title,link,meta,script,object,iframe';
    while (cnLength--) {
        var currentNode = childNodes[cnLength];
        if (currentNode.nodeType === 1 &&
            (excludes + ',').indexOf(currentNode.nodeName.toLowerCase() + ',') === -1) {
            arguments.callee(searchText, replacement, currentNode);
        }
        if (currentNode.nodeType !== 3 || !regex.test(currentNode.data) ) {
            continue;
        }
        var parent = currentNode.parentNode,
            frag = (function(){
                var html = currentNode.data.replace(regex, replacement),
                    wrap = document.createElement('div'),
                    frag = document.createDocumentFragment();
                wrap.innerHTML = html;
                while (wrap.firstChild) {
                    frag.appendChild(wrap.firstChild);
                }
                return frag;
            })();
        parent.insertBefore(frag, currentNode);
        parent.removeChild(currentNode);
    }
}

Then use it

findAndReplace('\\/', '&#x2F');

Javascript regex to find forward slashes between > and <

3 Answers3