regular expression replace with prototype?

Question

I got some html formatted in the following way:

[Title|<a class="external" href="http://test.com">http://test.com</a>]

From these texts I'd like to create links using "Title" as the text and "http://test.com" as link. How can I best do this in prototype?

Hi DhruvPathak, the output should be: <a class="external" href="test.com">Title</a> — FLX
– FLX, Commented Mar 8, 2011 at 16:58

Shad · Accepted Answer · 2011-03-08 21:30:21Z

2

Pure RegExp:

var ProperLink=WierdString.replace(/\[([^|]+)\|(<[^>]+>)[^<]+[^\]]+\]/,'$2$1</a>')

in the context you provided:

function convert(id){
    $(id).innerHTML=$(id).innerHTML.replace(/\[([^|]+)\|(<[^>]+>)[^<]+[^\]]+\]/g,'$2$1</a>');
}
convert('testdiv');

edited Mar 8, 2011 at 21:30

answered Mar 8, 2011 at 5:39

Shad

15.5k2 gold badges24 silver badges34 bronze badges

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

2 Comments

FLX Over a year ago

Nice Shad! Do you know how I can implement it in an example such as: jsfiddle.net/JFC72/1 ? Thanks man :)

FLX Over a year ago

Thanks Chad, but I can't get it to work though : / Please see: jsfiddle.net/JFC72/13 -- Your help is much appreciated!

Adam Ayres · Accepted Answer · 2011-03-08 07:04:14Z

1

Here is a regex that will retain the original attributes of the anchor tag while doing the replacement:

var link = "[Title|<a class=\"external\" href=\"http://test.com\">http://test.com</a>]";
var pattern = /\[([^|]+)\|([^>]+.?)[^<]*(<\/a>)\]/;
link.replace(pattern, "$2$1$3"));

The output is:

<a class="external" href="http://test.com">Title</a>

answered Mar 8, 2011 at 7:04

Adam Ayres

8,9381 gold badge35 silver badges25 bronze badges

6 Comments

FLX Over a year ago

Hi Adam, How can I make it iterate through an entire div? I've been trying to get this to work but I'm still failing: jsfiddle.net/JFC72/2

Adam Ayres Over a year ago

I have updated the jsfiddle to replace each one using /g at the end of the regex pattern. jsfiddle.net/JFC72/9

FLX Over a year ago

Hey Adam, unfortunately it only appends to #formatted instead of replacing them as requested, how can I fix this? Many thanks!

Adam Ayres Over a year ago

I have updated the jsfiddle so that it replaced the original text per your requirement: jsfiddle.net/JFC72/15

FLX Over a year ago

Awesome, that completely works! Last stupid question; I have to implement this on a class instead of on an id, which appears to be more difficult, any idea on how to accomplish this? As always, many thanks man :)

|

DhruvPathak · Accepted Answer · 2011-03-08 05:35:04Z

1

Without prototype: http://jsfiddle.net/JFC72/ , you can use prototype to make it simpler.

var myStr = "[THIS IS TITLE|http://test.com]";
document.getElementById('testdiv').innerHTML =  getLink(myStr);


function getLink(myStr)
{
var splitted = myStr.split("|http");
var title = splitted[0].substring(1);
var href = splitted[1].substring(0,splitted[1].length-1);
return "<a href='http" + href + "'>" + title + "</a>";

}

answered Mar 8, 2011 at 5:35

DhruvPathak

43.4k17 gold badges125 silver badges180 bronze badges

1 Comment

FLX Over a year ago

Thanks! I'm having difficulties implementing this though, please see: jsfiddle.net/JFC72/1

Anurag · Accepted Answer · 2011-03-08 05:42:32Z

0

var dummyDiv = document.createElement('div');
dummyDiv.innerHTML = '[Title|<a class="external ...';

var parts = dummyDiv.innerText.slice(1, -1).split('|');
// parts[0] is the text, parts[1] is the URL

answered Mar 8, 2011 at 5:42

Anurag

142k37 gold badges223 silver badges262 bronze badges

2 Comments

Shad Over a year ago

hmmm.. I think parts[1] is <a class="external" href="blah">BLAH</a> and FLX wanted a linked version of your parts[0]

Anurag Over a year ago

@Shad - parts[1] should just be the url, without any HTML. I imagine @FLX can create an anchor node using the text, and the URL. see jsfiddle.net/anurag/9LhA3

Collectives™ on Stack Overflow

regular expression replace with prototype?

4 Answers 4

2 Comments

6 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related