mikhus / domurl Goto Github PK

View Code? Open in Web Editor NEW

531.0 22.0 97.0 168 KB

Lightweight URL manipulation with JavaScript

License: MIT License

JavaScript 69.46% HTML 30.54%

domurl's People

Contributors

Stargazers

Watchers

Forkers

alexkeysmith viktor-evdokimov n1ss r0mk1n daogurtsov evgentus-cy dipspb akorlyakov schipiga 2bj korolev cheshirrrcat ogara jignesh-dadhaniya joshuasams kazantip151 sohag07hasan ewspencer simpleupdates dstharding w6xian mhemmings titleloans burningtongue nvdnkpr mstephani sachin1977 robbyemmert dmdnkv romanshul marquisknox zhkuskov leph24 swar-it classicdriver longzheng nickcmaynard mauricionobrega rahilwazir jamadam hong1990 dllen recallfx felixhayashi teenagemutants benedwards44 joelbesada pravin021989 osamabari reactjs-alex-alex2006hw anay mfilin keyreelio jaycverg mingyangshang jdeniau charlieyqin step307 pjialin jessetaverne lesterss carlosvv webinmd pirvudoru fabmilan canv15 daniprados ramavadakattu saitama7 vulxhisers jsteunou metallheart dallask billyluo ishopifyexpert dudeofprosper bidibom rufongabrillojr nitzansan joker-777 skeeks-semenov smile2049 denywhite dimonchoo zagamant besfahbod kirovas lisong5713 negan alldali-tech onur-ardal ajunlonglive eerrffuunn

domurl's Issues

queryLength() and isEmptyQuery() returning incorrect values

Example: https://codesandbox.io/s/1wzz6nr0j4?fontsize=14

queryLength is not searching the query, but is searching the whole URL object instead. This is also causing isEmptyQuery to return an incorrect value.

This should be an easy fix, but I wanted to confirm that this is indeed a bug before going ahead and making a PR for it.

How can I get url parameters?

Can I get url parameters as object or variables with valu?

Array/object url is encoded/decoded in the wrong way

This u.query.a = [1, 2, 3]; creates a=1&a=2&a=3 while the correct is a[0]=1&a[1]=2&a[2]=3
The currently generated URL can lead to query overload, which depends on the server (apache, lighttpd or Microsoft) understand differently. While the second one is the correct array GET structure.
In languages where associative array exists, the following is also valid:
For u.query.a = ['key1' => 1, 'key5' => 2, 'key3' => 3]; represented as a[key1]=1&a[key5]=2&a[key3]=3, this is most probably represented in JS as an object like u.query.a = {"key1": 1, "key5": 2, "key3": 3};.
Also, servers support multidimensional array/objects, which's not supported here.
u.query.a = [1, [2, 5], 3]; as a[0]=1&a[1][0]=2&a[1][1]=5&a[2]=3
u.query.a = {"key1": 1, "key5": [2, 5], "key3": 3}; as a[key1]=1&a[key5][0]=2&a[key5][1]=5&a[key3]=3
u.query.a = {"key1": 1, "key5": {"key1": 2, "key6": 5}, "key3": 3}; as a[key1]=1&a[key5][key1]=2&a[key5][key6]=5&a[key3]=3

bower.json missing main: [] section

Suggest the following addition:

main: [ "url.js" ]

Doesn't actually manipulate the URL?

Was looking for something similar to your library. I'm looking through the code and just want to confirm, this only allows you to update the object created by instantiating the class. This doesn't actually update the URL when changes to the class are made? If this is the case it would be interesting to add some HTML5 history support to update the actual URL when changes are made to the domurl object. Reading the description of the project I assumed this was what it actually did.

I'm going to be modifying the library for my own use, to update the URL, if you're interested I'll try to form a complete solution and submit a pull request when I'm done. If not I'll just add the stuff I need in my project.

Thanks for taking the time to make this thing and sharing it 👍

TypeError thrown when used inside a srcdoc iframe

Hi,

I've found an issue when one of our scripts that use domurl was injected inside a srcdoc iframe.

That is an strange case, but I though It may be worth mentioning it.

Here there is a minimal example:

<!doctype html>
<html>
<body>
<iframe srcdoc='<script src="https://cdn.jsdelivr.net/npm/[email protected]/url.js" integrity="sha256-4NOatzFOPdRvADrRwu+TbGMS2LQNQ0ZEseTjM1sdFj4=" crossorigin="anonymous"></script><script>var url = new Url("/robots.txt");</script>'></iframe>
</body>
</html>

Output:

TypeError: getCurrUrl(...).match(...) is null

What do you think? It feels like something that should be "gracefully" handled? A bit difficult may be.

Thanks

IE omits the leading slash from the pathname

IE omits the leading slash from the pathname. This happens when doing

link = document.createElement('a');
link.href = "/a/url"
// in IE
link.pathname == "a/url"
// in all other browsers
link.pathname == "/a/url"

easily reproducible in IE with

Url = require("domurl")
new Url("/a/url", true)

Possible fix: https://news.ycombinator.com/item?id=3939454

Query param with name "count"

Hi,

When parsing an url with a query param named "count", the name "count" collides with the method "count" of the Query object, and the parameter count is being discarded as a side effect of this.

See https://jsbin.com/vuyuyaxako/edit?html,js,output

Consider adding tags for the repo.

Hi @Mikhus

Your great work had been recommend being added in CDNJS.
However, we need tags for repo to specify points in history and mark release points.
It's helpful for users to know the version and status of repository, and would enable wider distribution of the library.
Would you please consider on using tags?

Thank you!
Piicksarn
#6428

Query parameters are not decoded when using lowercase hex codes

This code gives proper result:

>>> new Url('http://localhost/?a=%3F').query.a
"?"
>>> new Url('http://localhost/?a=%3F').toString()
"http://localhost/?a=%3F"

And this does not decode query parameters, resulting in double-encoding when using toString():

>>> new Url('http://localhost/?a=%3f').query.a
"%3f"
>>> new Url('http://localhost/?a=%3f').toString()
"http://localhost/?a=%253f"

Relative protocol not honoured in IE

(Found in IE10)

new Url('//url-with-relative-protocol.co.uk/blah').toString();
// actual     ->  'url-with-relative-protocol.co.uk/blah'
// expected 1 ->  '//url-with-relative-protocol.co.uk/blah'
// expected 2 ->  [current page's protocol] + '//url-with-relative-protocol.co.uk/blah'

Cannot find the package on npm registry

In our company we are migrating away from bower in favor of npm registry. Could you publish the package on npm?

single quotation mark is not encoded url compatible

Even whitespaces are url-encoded... only the single quotation mark (') is not encoded url-compatible.

When passing a relative url into Url() and converting to string, the current pages path is included

I've written a simple function that cleans some query strings out of any provide url string:
function sanitizeURL(url) { var url = new Url(url); if(url.query["reload"]) { delete url.query["reload"] } if(url.query["forceReload"]) { delete url.query["forceReload"] } if(url.query["device"]) { delete url.query["device"] } if(url.query["testwebid"]) { delete url.query["testwebid"] } if(url.query["testWebId"]) { delete url.query["testWebId"] } if(url.query["testWebID"]) { delete url.query["testWebID"] } if(url.query["timetravel"]) { delete url.query["timetravel"] } return url.toString(); }
but when I add run with a relative url string the whole pages path is returned:
sanitizeURL("SearchResults?search=new&make=Buick&year=2016&forceReload=true")

What's returned:
"file:///Volumes/Macintosh%20HD/Users/brooksg/SearchResults?search=new&make=Buick&year=2016"

Expecting:
"SearchResults?search=new&make=Buick&year=2016"

Is there anyway around this or is this a bug?

Incorrect URL encoding

When init with url like this new Url('http://www.example.com/hello world here.jpg').toString()

returns: http://www.example.com/hello%2520world%2520here.jpg

expected result: 'http://www.example.com/hello%20world%20here.jpg'

Not sure why the space got encoded into %2520

When remove the protocol it works correctly:

new Url('www.example.com/hello world here.jpg').toString()
=> 'www.example.com/hello%20world%20here.jpg'

Bower: no versions available

Some tools that use Bower expect a package to have versions associated with it. Bower can't find any versions for the jsurl package because there are no git tags pushed for this repo. See:

Please push a git tag for this project. See here for more information: http://stackoverflow.com/a/20055632

localhost:port not supported

var url = new Url("localhost:9001");
console.log(url, '' + url);

Url {protocol: "localhost", host: "", port: "", path: "/9001", query: QueryString…}
hash:""
host:""
pass:""
path:"/9001"
port:""
protocol:"localhost"
query:QueryString
user:""
__proto__:Object

localhost:///9001

array in url a[]=1&a[]=2&a[]=3

Is it possible to create url like this: a[]=1&a[]=2&a[]=3 ?

regards

Support TypeScript

Hello!
You didn't think about language support for TypeScript? I could write a file jsurl.d.ts, and push it to the DefinitelyTyped repository which would be a description of the library functions.

Webpack Cannot Resolve Module 'fs'

require('domurl')

Gives me ModuleNotFoundError in Module not found: Error: Cannot resolve module 'fs' in /node_modules/domurl

structured parameters not decoded

var a={q:1, w:"w2", e:{ea:"123qwe", eb:"345asd"}, f:["qw", "er", 12], g:[{zx:123, vv:345}, {zxc:1234, cvb:3455}] };
var u=new Url("https://us:[email protected]/path1/path2?" + decodeURIComponent($.param(a)) );

u.query.e should return {ea:"123qwe", eb:"345asd"}

add to bower

Very nice peace of code, it will be cool and useful to add it as bower package!

URL Path is over-escaped for special characters such as SEMICOLON, COLON, EQUALS SIGN

Last paragraph of https://tools.ietf.org/html/rfc3986#section-3.3 says:

Aside from dot-segments in hierarchical paths, a path segment is
considered opaque by the generic syntax. URI producing applications
often use the reserved characters allowed in a segment to delimit
scheme-specific or dereference-handler-specific subcomponents. For
example, the semicolon (";") and equals ("=") reserved characters are
often used to delimit parameters and parameter values applicable to
that segment. The comma (",") reserved character is often used for
similar purposes. For example, one URI producer might use a segment
such as "name;v=1.1" to indicate a reference to version 1.1 of
"name", whereas another might use a segment such as "name,1.1" to
indicate the same. Parameter types may be defined by scheme-specific
semantics, but in most cases the syntax of a parameter is specific to
the implementation of the URI's dereferencing algorithm.

This means, these special characters can be present in path, carrying special information.

In other words, they are supposed to be escaped only if they are expected not to carry the special information, like if they appear in a directory name on the file-system.

On Chrome, these comparisons are all truthful:

String(new URL("http://example.com/alice=bob")) == "http://example.com/alice=bob"
String(new URL("http://example.com/alice;bob")) == "http://example.com/alice;bob"
String(new URL("http://example.com/alice,bob")) == "http://example.com/alice,bob"

I think domurl should be able to parse and re-gen those values as well. Wdyt?

Hash is encoded but...

I dont know if it's the right behavior. I'm actually using backbone and the way to describe routes (like many front-end framework) is with hash like foo/1 which become foo%2F1 when using domurl to manipulate query parameters.

"A security problem occurred" in Edge with @

In MS Edge, if you pass a malformed url like http://Photo@ to the Url constructor of this library, you get a mysterious exception "A security problem occurred". You can see the same error by just running var link = document.createElement("a"); link.href = "http://Photot@"; link["protocol"]; in console. It would be better if domurl caught this and raised a more understandable error.

ns.navigator is not a function when importing through webpack

I installed the library and imported it to my srcipt by

import 'domurl';

however when I load page I get mentioned error in console. Tested on Firefox 75.0 on Windows.

Does not work with arrays (e.g. https://example.com/?computer[desktop]=Mac)

var u2 = new Url("https://example.com/");
u2.query["computer"] = {};
u2.query["computer"]["desktop"] = "Mac";	
alert(u2);

The result should be this...
https://example.com/?computer[desktop]=Mac

Instead, I get this...
https://example.com/?computer=%5Bobject%20Object%5D

Also, when I parse a URL that looks like....
https://example.com/?computer[desktop]=Mac

...Inspecting the object in the console should look like return something like...

Computer: Object
	desktop: "Mac"

Instead I get this...
computer[desktop]: "Mac"

"desktop" isn't recognized as an object inside of "computer". "computer[desktop]" is simply used as the key like any other string.

Current url, once initialized, is cached forever and never reflects changes to window.location.href

When initializing with new Url(), this module uses the current window.location.href by default, and then caches it forever in the module's closure/namespace. After that, even when the window.location.href changes, the module will still use the old/incorrect cached value on new Url() invocations:

var url = new Url();
url.hash = "somehash";
window.location.href = url.toString()
var url2 = new Url();
url2.hash // empty, should be "somehash"

Also note that in apps using pushState (i.e. most SPAs these days), much more than the hash will change. The above is just one way to demonstrate the bug in a non-pushState navigation without causing a page reload.

Plus Sign (`+`) should not be converted to Space outside of GET values

Traditionally, + sign has been treated as Space, b/c that's how x-www-form-urlencoded prefers to encode a space in its values. (Maybe also names, I'm not sure at the moment.)

However, the Plus Sign should not be treated as Space outside of Query Params. Doing so would make parsing of URLs such as https://en.wikipedia.org/wiki/C++ incorrect.

Small issues in encoding URLs with param values null and undefined

Looks like the changes in 1a605a5 have made some of the decoding and encoding behaviors asymmetric.

First, a loop on a valid URL causes value-less params to get lost. So, this doesn't pass:

const urlString1 = "/?alice=123&bob=&carol";
const url1 = new Url(urlString1);
expect(String(url1)).toEqual(urlString1);

with error:

    Expected: "/?alice=123&bob=&carol"
    Received: "/?alice=123&bob="

After decoding, this does pass:

const urlString1 = "/?alice=123&bob=&carol";
const url1 = new Url(urlString1);
expect(url1.query["alice"]).toEqual("123");
expect(url1.query["bob"]).toEqual("");
expect(url1.query["carol"]).toBe(null);
expect(url1.query["dave"]).toBe(undefined);

So, the problem lays on the encoding side. With changing the encoding logic to:

drop param if value is undefined, and
keep param without value if the value is null,
then we can make sure using values returned from .query to reconstruct the URL would result in the original URL, hence passing the initial test.

What do you think?

How to use correctly in order to add to the URL

Hi, I'm trying to load UTM codes into the URL on page load; the alert pops up that it has successfully done so, but the URL in the browser doesn't reflect that... how do I do that?

I am calling the js file, then this is my script:

Thanks!

Support Protocol-relative URL (PRL)

Levels of support can be like:

Parsing PRL strings into an object and then back to the string should work out of the box.
Allow generation of PRL from a relative URL.
Allow downgrading a URL with protocol into a PRL.

Specifically, (1) is very important when using the library on href values, which can be intentionally kept as PRL, for better client support.

References:

https://en.wikipedia.org/wiki/URL#prurl

What do you think?

Issues when square brackets are used in parameter name

Issues when square brackets are used in parameter name.
e,g it cannot handle:
/products/?items[]=e&items[]=f

It just see 'item[]' and 'item'

Undefined variables included in query string

Variables with a value of undefined are included in the query string.

For example:

var url = new Url();
var url2 = new Url();
url2.clearQuery();
url2.query["var"] = url.query["var"];

ur2.query.toString()

If "var" doesn't exist in the query string, this will print out "var=undefined". Could undefined variables be ignored?

Expand Url Template

Is it possible to integrate something like this:

// URI Templates
URI.expand("/foo/{dir}/{file}", {
  dir: "bar",
  file: "world.html"
});
// -> /foo/bar/world.html

?
ref: https://github.com/medialize/URI.js/

Problem with full URL

Attempt to parse the following URL causes the wrong result

var feed = new Url('https://www.google.com/calendar/feeds/test/private-t42423424234/full?start-index=1&max-results=20');
feed.toString() ->> returns
"https://www.google.com:443calendar/feeds/test/private-t42423424234/full?start-index=1&max-results=20"

There are two problems:

missing '/' after the host name
default port is present in the result url (not nice)

I have fixed it by changing toString() function to the following. Haven't tested it in all scenarios, by with full URL works fine

this.toString = function () {
return (
(this.protocol && (this.protocol + '://')) +
(this.user && (this.user + (this.pass && (':' + this.pass)) + '@')) +
(this.host && this.host) +
((this.port && !(this.port == 443 && this.protocol == 'https') && !(this.port == 80 && this.protocol == 'http')) ? this.port : '') +
(this.path && ('/' + this.path)) +
(this.query.toString() && ('?' + this.query)) +
(this.hash && ('#' + this.hash))
);
};

Does it work with RequireJS directly?

query parameter with @ symbol not parsing correctly.

Try this out:

var url = new Url("http://example.com/some/path?a=b&c=test@someAnchor");

url.toString()
>>>"http://example.com%2Fsome%2Fpath%3Fa%3Db%26c%[email protected]/some/path?a=b&c=test%40someAnchor"