The cleanest way to insert ".js" after the path part of the path URL?

Question

I have a variable urlthat I would like to insert into ".js"after the path part, if there is already a part after this path ".<something>".

So, here is an array with hard-coded start values ​​and expected end values ​​for each, which, we hope, illustrates the problem well:

var url_pairs = [
 ["http://example.com/foo", "http://example.com/foo.js"],
 ["http://example.com/foo/bars", "http://example.com/foo/bars.js"],
 ["http://example.com/foo/bars?quz=baz",  "http://example.com/foo/bars.js?quz=baz"],
 ["http://example.com/foo/bars?quz=baz&qix=bax", "http://example.com/foo/bars.js?quz=baz&qix=bax"],
 ["/foo", "/foo.js"],
 ["/foo/bars", "/foo/bars.js"],
 ["/foo/bars?quz=baz", "/foo/bars.js?quz=baz"],
 ["/foo/bars?quz=baz&qix=bax", "/foo/bars.js?quz=baz&qix=bax"],
 ["/foo/bars.js?quz=baz&qix=bax", "/foo/bars.js?quz=baz&qix=bax"],
 ["/foo/bars.xml?quz=baz&qix=bax", "/foo/bars.xml?quz=baz&qix=bax"]    
]    

I'm struggling to come up with a clean and quick way to do this, but I'm sure it can be done cleanly and simply, for example, using a regular expression. Can someone set me up right? thanks max

EDIT : test solutions - here is a snippet that I wrote to test it.

function convertUrl(oldUrl){
  //insert code to convert oldUrl and return the result
}       

$.each(url_pairs, function(i,pair){
  var oldUrl = pair[0];
  var expected = pair[1];
  var newUrl = convertUrl(oldUrl);
  if(newUrl != expected){
    console.log("expected \""+expected+"\", but got \""+newUrl+"\""); 
  }
});

Answer 1

, :

(\/[a-z]+)(\?[a-z=&]+)?$

- ; URL- . :

var string = "http://example.com/foo/bars?quz=baz&qix=bax";
console.log(string.replace(/(\/[a-z]+)(\?[a-z=&]+)?$/, "$1.js$2"));
// http://example.com/foo/bars.js?quz=baz&qix=bax

: :

(\/[a-z_]+)(\?[0-9a-z_=&]+)?$

URL-:

var urls = ["http://example.com/foo",
  "http://example.com/foo/bars",
  "http://example.com/foo/bars?quz=baz",
  "http://example.com/foo/bars?quz=baz&qix=bax",
  "/foo",
  "foo/bars",
  "/foo/bars?quz=baz",
  "/foo/bars?quz=baz&qix=bax",
  "/foo/bars.js?quz=baz&qix=bax",
  "/foo/bars.xml?quz=baz&qix=bax",
  "http://example.com/my_music_world_classes/edit_pupil?id=10199&pupil_id=157721"];
console.log(urls.map(function (url) {
  return url.replace(/(\/[a-z_]+)(\?[0-9a-z_=&]+)?$/, "$1.js$2");
}));

Answer 2

document.createElement('a')?

> var a = document.createElement('a');
undefined
> a.href = 'http://example.com/foo/bars?quz=baz'
"http://example.com/foo/bars?quz=baz"
> a.pathname += '.js'
"/foo/bars.js"
> a.href
"http://example.com/foo/bars.js?quz=baz"

, , a.pathname , '.js'.

Answer 3

URI.js, :

var uri = URI(url);
if (uri.suffix() == "") uri.suffix("js");
url = uri.toString();

Answer 4

You can achieve this simple mapover splitand join.

var urls = [
 'http://example.com/foo',
 'http://example.com/foo/bars',
 'http://example.com/foo/bars?quz=baz',
 'http://example.com/foo/bars?quz=baz&qix=bax',
 '/foo',
 '/foo/bars',
 '/foo/bars?quz=baz',
 '/foo/bars?quz=baz&qix=bax',
 '/foo/bars.js?quz=baz&qix=bax',
 '/foo/bars.xml?quz=baz&qix=bax'
]

function addExtensionToUrl(ext) {
  return function (url) {
    var parts = url.split('?')

    if (!parts[0].match(/\.(\w+)$/)) {
      parts[0] += ext
    }

    return parts.join('?')
  }
}

var result = urls.map(addExtensionToUrl('.js'))
console.log(JSON.stringify(result, null, 2))

Run code

Sets the next array.

[
  "http://example.com/foo.js",
  "http://example.com/foo/bars.js",
  "http://example.com/foo/bars.js?quz=baz",
  "http://example.com/foo/bars.js?quz=baz&qix=bax",
  "/foo.js",
  "/foo/bars.js",
  "/foo/bars.js?quz=baz",
  "/foo/bars.js?quz=baz&qix=bax",
  "/foo/bars.js?quz=baz&qix=bax",
  "/foo/bars.xml?quz=baz&qix=bax"
]

Answer 5

This will be done:

var string = 'http://example.com/foo/bars',
    index = string.indexOf('?'),
    url = index !== -1 ? string.substr(0, index) + '.js' + string.substr(index) : string + '.js';