jQuery Replace Strings With URLs

Question

On my site I have a few strings which look something like this (Could be any numbers)

29-30-404-59556348

Using jQuery I want to parse this into

<a href="http://www.mysite.com/page.php?=29,30,404,59556348"&gt;Page&lt;/a&gt;

How would I do this?

Answer 1

var url = "http://www.mysite.com/page.php?ids=" + string.replace("-", ",");

Note that I've set the querystring name to ids. You might want to do this to be able to read from the querystring values more easily within server-side code.

Answer 2

If I understand you correctly, you could do something like this:

function getAnchor (name, code) {
  var anchor = '<a href="http://www.mysite.com/page.php?={CODE}"&gt;'+name+'&lt;/a&gt;';
  return $(anchor.replace('{CODE}', code.replace('-',',')));
}

Usage example:

$('body').append(getAnchor('Page', '29,30,404,59556348'));

Answer 3

This searches your entire page and replaces all numbers. You probably want to specify a tighter context to search in than the entire body and you may want to tweak the regex so that it matches specific patterns of numbers. Right now it matches any number in your page or sequences of integers separated by hyphens.

// This is a simple jQuery extension to find text nodes
$.fn.textNodes = function() {
    var ret = [];
    $.each(this.contents(), function() {
        try {
        if(this.nodeType == 3) 
            ret.push(this);
        else 
            $(this).contents().each(arguments.callee);
        } catch(e) {}
    });
    return $(ret);
}

// Get all the text nodes from the body
$(document.body).textNodes().each(function() {
    // Test each text node to see if it has any numbers in it
    if(/\d/.test(this.nodeValue))
        // Remove numbers or sequences of numbers and replace with links
        $(this).replaceWith(
            this.nodeValue.replace(/\d+(?:-\d+)*/g, function(nums) {
                return '<a href="http://www.mysite.com/page.php?ids=' + nums.split('-').join(',') + '">Path</a>'; // str.split(a).join(b) is faster than str.replace(a,b)
            })
        );
});

Update: Here is a version that matches numbers in this pattern xx-xx-xxx-xxxxxxxx

// Get all the text nodes from the body
$(document.body).textNodes().each(function() {
    // Test each text node to see if it has our pattern of numbers in it
    if(/\d{2}-\d{2}-\d{3}-\d{8}/.test(this.nodeValue))
        // Remove sequences of numbers and replace with links
        $(this).replaceWith(
            this.nodeValue.replace(/\d{2}-\d{2}-\d{3}-\d{8}/g, function(nums) {
                return '<a href="http://www.mysite.com/page.php?ids=' + nums.split('-').join(',') + '">Path</a>'; // str.split(a).join(b) is faster than str.replace(a,b)
            })
        );
});