Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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...

like image 453
EvilDr Avatar asked May 13 '13 14:05

EvilDr


People also ask

How do I change a link in href?

Answer: Use the jQuery . attr() Method attr() method to dynamically set or change the value of href attribute of a link or anchor tag. This method can also be used to get the value of any attribute.

What does a href {% URL do?

The href attribute link (short for “Hypertext REFerence”) indicates the relationship between pages to search engines. href is an attribute of the anchor tag and contains two components: The URL (the actual link) and. The clickable text or object that users will see on the page (known as the “anchor text”)

Can we replace in jQuery?

We can replace HTML elements using the jQuery . replaceWith() method. With the jQuery replaceWith() method, we can replace each element in the set of matched elements with the provided new content and return the set of elements that were removed.

What is href in JavaScript?

The href attribute specifies the URL of the page the link goes to.


2 Answers

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/

like image 82
hjpotter92 Avatar answered Sep 19 '22 17:09

hjpotter92


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.

like image 21
barryhunter Avatar answered Sep 22 '22 17:09

barryhunter