I'm trying to use JQuery to achieve the following logic:
[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...
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.
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”)
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.
The href attribute specifies the URL of the page the link goes to.
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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With