Simple Bread Crumb with regex

Question

I am trying to create a simple bread crumb with regex by splitting a given URL:

Input is a URL in this form - http://someurl.com:1000/sites/Site1/Pages/Programs/Programs1/Programs2/SomePage.aspx?a=b;c=d

Output expected is - You are here: sites>Site1>Pages>Programs>Programs1>Programs2>SomePage

And here is the code I have used:

<script type="text/javascript">

var url ="http://someurl:1000/sites/Site1/Pages/Programs/Programs1/Programs2/SomePage.aspx?a=b;c=d"


var newURL = url.replace(new RegExp( "^(?:([^:/?#]+):)?(?://((?:(([^:@]*):?([^:@]*))?@)?([^:/?#]*)(?::(\\d*))?))?((((?:[^?#/]*/)*)([^?#]*))(?:\\?([^#]*))?(?:#(.*))?)", "g"),

  function( $0, $1, $2, $3, $4, $5, $6, $7, $8, $9){

  var domain = $1+ "://" + $2;
  var href = domain;
  var urlStrippedDown = $9;

  //Split the folders/pages within the path     /sites/Site1/Pages/Programs/Programs1/Programs2/SomePage.aspx
  var pieces = urlStrippedDown.replace( new RegExp (\\w+.aspx)|(\\w+),


  //Form the bread crumb with anchor tags and text
  function ($0, $1, $2)
  {

    zero = $0;
    var test =  "<a href='" + href +     urlStrippedDown.substring(0,urlStrippedDown.indexOf($0)+$0.length) +"'>" +     zero.replace('.aspx','')  + "</a>";
    return test;
  }
  );

  return pieces;
  }
);


//document.write("You are here: " + newURL.replace(/\//g,''));
document.write("You are here: " + newURL);

</script>

Problem faced: The only issue I am facing is that the final output (newURL) has a forward slash ("/") between each link, that I would like to replace with ">" but this seems to be impossible. I am not sure how this "/" is getting inserted, though its not showing it as part of text when the "anchor" tag is formed.

The expected output is- You are here: sites>Site1>Pages>Programs>Programs1>Programs2>SomePage

whereas I get- You are here: /sites/Site1/Pages/Programs/Programs1/Programs2/SomePage and I am unable to replace this "/" with ">"

P.S: The commented line of code - If I replace here, it replaces all "/" even those inside the anchor tags. The "/" should be replaced in the text and not in the href of the anchor

Is there a flaw in the regex? Are there better ways to handle this?

Thanks!

Answer 1

Your first replace doesn't really serve any other purpose than to split the string into to parts: domain and the path, instead you should consider using RegExp.exec on the string and get the parts that way (see snippet below).

Your newURL variable contains the html, which you can take advantage of and use in your regex. If you replace all /<a with &gt; <a you should have a string as such: > sites > Site1 > Pages > Programs > Programs1 > Programs2 > SomePage. And then you would have to remove the first > as I would imagine you don't want that.

Your regex seems overly complex for what you need for your first match, and your second replace you might be better of doing using a indexOf('/') and a loop instead since you're not really leveraging on the regex matches.

Below you'll find a function to make the desired link chain for an arbitrary valid URI using a similar approach to your initial solution. I have this as a result of tinkering with your code so it seems a waste to not post it.

var url = "http://someurl:1000/sites/Site1/Pages/Programs/Programs1/Programs2/SomePage.aspx?a=b;c=d";

function makeBreadcrumb(url){
    // Split match and split url into domain and path.
    var urlSplitter = new RegExp("^(.*?://[^/]+?/)([^?#:@]*)", "");
    var matcher;
    if (matcher = urlSplitter.exec(url)) {
        var domain = matcher[1];
        // Match every "folder" or "file" in the URI and replace with "breadcrumb link".
        return matcher[2].replace(new RegExp("([^/]+)(?:\\.[^\\.]+$|/)","g"),
            function(match,dir,pos,string) {
                return (pos > 0 ? " > " : "") + "<a href=\"" + domain + string.substring(0,pos) + match + "\">" + dir + "</a>";
            }
        );
    }
    return "";
}

document.write("You are here: " + makeBreadcrumb(url));