Replace words with links when different links contain the same word

Question

I've looked around for an answer, but I can't find anything that works for what I'm trying to achieve.

I have a page with URLs written in a pre tag, I am using the following to automatically replace any URL with the corresponding clickable link:

(function($) {
    $(window).load(function() {
        var tpage = $("pre");
        tpage.html(tpage.html().replace(/box.php/ig, '<a target="_blank" href="/box.php">box.php</a>')); 
        tpage.html(tpage.html().replace(/sms.php/ig, '<a target="_blank" href="/sms.php">sms.php</a>')); 
    });
})(jQuery)

And this works perfectly fine. However, I have two pages that are cards.php and gcards.php. Using the code above for cards.php also matches the 'cards.php' in 'gcards.php', and thus, the gcards.php link is not made. If I put the gcards line before the cards one, it just messes up the gcards links.

I looked around and found this, but I can't seem to get the code to work at all.

Is there any way to make it so that the code only replaces 'cards.php' exactly, leaving 'gcards.php' alone for the other line of code?
Thank you.

It would be a bit of work to put together the code, but you could use the [exec](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) function to pull the indexes of `cards.php` that don't match `gcards.php`, by using the regex `/[^g]cards.php/ig` (this will actually give you the index one character prior to the "c", so it won't work if your input starts with cards.php) - once you have the indexes, some ordinary string manipulation will let you swap out your values appropriately. — Joe Enos, May 28 '15 at 19:00

Jacob · Accepted Answer · 2015-05-28T19:15:23.637

5

I find the word boundary pseudo-character \b to be most useful. For example:

/\bcards\.php\b/ig

This will cover spaces, end/beginning of string, punctuation, etc.

Update:

You can also DRY up the code a bit with variables, like this:

(function($) {
  $(window).load(function() {
    var tpage = $("pre");
    tpage.html(tpage.html().replace(
      /\b(box|sms|cards)\.php\b/ig, 
      '<a target="_blank" href="/$&">$&</a>')); 
  });
})(jQuery)

edited May 28 '15 at 19:15

answered May 28 '15 at 18:43

Jacob

77,566
24
149
228

This works like a charm, thank you so much! Thank you very much for the shorter code also. I was wondering if I could clean up the code a bit, unfortunately I'm a js noob so I wasn't sure how to shorten it. All perfect now, thank you very much! – Kach May 28 '15 at 19:19

score 1 · Answer 2 · answered May 28 '15 at 18:44

The best solution would be to know what should be before card.php, box.php etc... so you could add it to the regex : quotes for instance?

However, this regex should do the job:

[^a-zA-Z]card\.php

For instance, if there's a quote before the page name, it gets much simpler:

... .replace(/"card\.php/ig, ...)

There is a mistake in your other regex as the dot is not escaped. Thus, the strings "boxzphp" or "setmphp" would match. Fixed code:

tpage.html(tpage.html().replace(/box\.php/ig, '<a target="_blank" href="/box.php">box.php</a>')); 
tpage.html(tpage.html().replace(/sms\.php/ig, '<a target="_blank" href="/sms.php">sms.php</a>'));

score 1 · Answer 3 · answered May 28 '15 at 18:48

I don't know if there's a good regex way of doing it, but if you can't guarantee the character before your match, then a cheat would be to replace gcards with a placeholder first, then replace cards, then replace the placeholder:

var result = input.replace(/gcards.php/ig, "MYPLACEHOLDER")
    .replace(/cards.php/ig, "<a href='cards.php'...")
    .replace(/MYPLACEHOLDER/g, "<a href='gcards.php'...");

This would really get messy if you started adding more to it later though.

Replace words with links when different links contain the same word

3 Answers3