2

Currently I am writing my own BBCode parser. More specifically I am working on the links.

You can click on the link button, and it will insert a link (HTML <a>) around your text. Then that text will of course be clickable.

If you just normally write a link in the textarea, it will also make that a link automatically. Let me give you some example of what I mean so far:

 http://stackoverflow.com 
 Changes Automatically To
 <a href="http://stackoverflow.com">http://stackoverflow.com</a>

 If the user clicks the link button, and inserts it around text:
 [link=http://stackoverflow.com]Directs to SO[/link]
 It will then change that to
 <a href="http://stackoverflow.com">Directs to SO</a>

Ok now hopefully you still understand what is going on (I know I am confusing). Here in-lies the problem, the regex that changes the BBCODE > HTML is doing it twice.

Before I continue on this let me show you my regexs:

.replace(/(\[code\][\s\S]*?\[\/code\])|\[(link=)((http|https):\/\/[\S]{0,2000}\.[a-zA-Z]{2,5}(\/[^\[\]\<\>]*)?)\]([\s\S]*?)\[\/link\]/gi, function (m, g1, g2, g3, g4, g5, g6) { return g1 ? g1 : '<a href="' + g3 + '">' + g6 + '</a>'; }) 
.replace(/(\[code\][\s\S]*?\[\/code\])|((http|https):\/\/[\S]{0,2000}\.[a-zA-Z]{2,5}(\/[^\[\]\<\>]*)?)/gi, function (m, g1, g2, g3, g4, g5) { return g1 ? g1 : '<a href="' + g2 + '">' + g2 + '</a>'; })

So basically as you can see, that converts URLS to clickable links. The [link=___] is not working though because the second regex is trying to rewrite the first regex again. Let me show you what I mean:

[link=http://stackoverflow.com]Directs to SO[/link]
First Regex Makes It This:
<a href="http://stackoverflow.com">Directs to SO</a>
Second Regex Then Makes It This:
<a href="<a href="http://stackoverflow.com">Directs to SO</a>

So as you can see it is trying to convert the URLs twice.

How could I make the SECOND regex not change URLS in the [link] tag a second time?

2
  • The JavaScript RegExp engine doesn't have lookbehinds, but there are some workarounds (like using lookaheads, etc.). However, I think an important question is "Why are you trying to use regex to make a parser for a non-regular language?"
    – Shashank
    May 12, 2015 at 23:44
  • I do not think it requires lookbehinds. Any other ideas? Thank You May 13, 2015 at 0:58

1 Answer 1

0

The mistake you're making is that you're trying to use just regular expressions. Javascript has other tools in its box.

Instead of running over the text twice, pass once with a single regex. Once you have your match, differentiate between the two cases and act appropriately. I have provided a working example based on the two regexps that you provided.

Note: I don't actually recommend using this long, ugly regex as it is

/* This long regex is just the two regexps you provided, stuck together with an OR in the middle */
var longUglyRegex = /(?:(\[code\][\s\S]*?\[\/code\])|\[(link=)((http|https):\/\/[\S]{0,2000}\.[a-zA-Z]{2,5}(\/[^\[\]\<\>]*)?)\]([\s\S]*?)\[\/link\])|(?:(\[code\][\s\S]*?\[\/code\])|((http|https):\/\/[\S]{0,2000}\.[a-zA-Z]{2,5}(\/[^\[\]\<\>]*)?))/gi;
str.replace(longUglyRegex, function (m, g1, g2, g3, g4, g5, g6, g7, g8) {
    if (g1) {
        return g1;
    }
    var linkText,
    linkLocation;
    if (g6) {
        // BBCode
        linkText = g6;
        linkLocation = g3;
    } else {
        // Plain URL
        linkText = linkLocation = g8;
    }
    return '<a href="' + linkLocation + '">' + linkText + '</a>';
});

In reality, you should write a more streamlined regex that looks roughly like this:

/([BBCODE])?(URL)([/link])?/

Note: This comes with the standard caveats that regex is not really appropriate for this task. But in your case, it may be good enough.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.