Replace [url] tags with <a href> tags in Javascript/JQuery

Question

I'm trying to use JQuery to achieve the following logic:

Replace the string value of [url="http://www.google.com"]Google[/url] with <a href="http://www.google.com">Google</a>

Please see my HTML page below. The problem is that on pressing the button, the orignal text is just pasted and no RegEx replacements are made.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        function processJs() {
            var oldtext = $("#oldtext").html();
            var newtext = oldtext.replace('\[url\s?=\s?"?(.*?)"?\](.*?)\[\/url\]', '<a href="$1">$2</a>');
            $('#mydiv').html(newtext);
        }
        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="oldtext">
            Try this funky new search engine:
            [url="http://www.google.com"]Google[/url]
            Or this older one from back in the day:
            [url="http://uk.altavista.com"]AltaVista[/url]
        </div>
        <div>
            <input type="button" id="btn" value="Replace" onclick="processJs(); return false;" />
        </div>
        <div id="mydiv" style="background-color: #eeeeee; border: 2px inset #aaaaaa">
            Replaced text will go here.
        </div>
    </form>
</body>
</html>

I've had this RegEx pattern work using ASP.NET, so I'm not sure where the problem lies when ported to JavaScript...

hjpotter92 · Accepted Answer · 2013-05-13 14:59:32Z

5

That is not a valid regex. Use / as modifiers:

/\[url\s?=\s?"?(.*?)"?\](.*?)\[\/url\]/

making the function:

function processJs() {
    var oldtext = $("#oldtext").html();
    var newtext = oldtext.replace(/\[url\s?=\s?"?(.*?)"?\](.*?)\[\/url\]/g, '<a href="$1">$2</a>');
    $('#mydiv').html(newtext);
}

g at the end will repeat it over the text. Here is a fiddle: http://jsfiddle.net/xe2F9/

answered May 13, 2013 at 14:59

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EvilDr Over a year ago

Stunning. Answered so quickly that StackOverflow won't even allow me to accept it for another 7 minutes :-D

barryhunter · Accepted Answer · 2013-05-13 14:59:40Z

4

var newtext = oldtext.replace(/\[url\s?=\s?"?(.*?)"?\](.*?)\[\/url\]/g, '<a href="$1">$2</a>');

You specify the 'search' as a RegEx object - not a string.

Just using /.../ will automatically crate one transparently.

answered May 13, 2013 at 14:59

barryhunter

21.1k3 gold badges32 silver badges44 bronze badges

4 Comments

EvilDr Over a year ago

What's the trailing /g for please?

HamZa Over a year ago

@EvilDr it means match all (this is JS specific)

barryhunter Over a year ago

'cos you want to replace all matches, not just the first.

Paolo Bergantino Over a year ago

"global" - ie, replace all occurrences, not just the first one.

Collectives™ on Stack Overflow

Replace [url] tags with <a href> tags in Javascript/JQuery

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related