Introduction to UriJS
UriJS is a powerful JavaScript library for URL manipulation. It provides a wide range of features that make managing URLs in your web applications a breeze. Whether you need to parse, build, or manipulate URLs, UriJS has you covered.
Key Features and API Examples
Here are some of the most useful APIs provided by UriJS:
Parsing URLs
var uri = new URI("http://example.com/foo?bar=baz#bang");
console.log(uri.protocol()); // "http"
console.log(uri.hostname()); // "example.com"
console.log(uri.path()); // "/foo"
console.log(uri.query()); // "bar=baz"
console.log(uri.fragment()); // "bang"
Building URLs
var uri = new URI();
uri.protocol("https")
.hostname("example.com")
.path("/foo")
.query({ bar: "baz" })
.fragment("bang");
console.log(uri.toString()); // "https://example.com/foo?bar=baz#bang"
Modifying URLs
var uri = new URI("http://example.com/foo?bar=baz#bang");
uri.protocol("https");
uri.hostname("example.net");
uri.path("/newpath");
uri.query("foo=bar");
uri.fragment("newbang");
console.log(uri.toString()); // "https://example.net/newpath?foo=bar#newbang"
Managing Query Parameters
var uri = new URI("http://example.com/?first=1&second=2");
uri.addSearch("third", "3");
console.log(uri.search()); // "first=1&second=2&third=3"
uri.removeSearch("first");
console.log(uri.search()); // "second=2&third=3"
console.log(uri.hasQuery("second")); // true
Normalizing URLs
var uri = new URI("HTTP://EXAMPLE.com:80/foo");
uri.normalize();
console.log(uri.toString()); // "http://example.com/foo"
App Example using UriJS
In this example, we will create a simple URL manager application that allows users to build, parse, and manipulate URLs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>URL Manager</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.7/URI.min.js"></script>
</head>
<body>
<h1>URL Manager</h1>
<input type="text" id="urlInput" placeholder="Enter URL" />
<button onclick="parseURL()">Parse URL</button>
<pre id="output" ></pre>
<script>
function parseURL() {
var urlInput = document.getElementById("urlInput").value;
var uri = new URI(urlInput);
var output = `
Protocol: ${uri.protocol()}
Hostname: ${uri.hostname()}
Path: ${uri.path()}
Query: ${uri.query()}
Fragment: ${uri.fragment()}
`;
document.getElementById("output").innerText = output;
}
</script>
</body>
</html>
With UriJS, managing URLs in your web applications becomes significantly easier. Whether you’re building URLs dynamically, parsing existing URLs, or modifying them in real-time, UriJS provides all the tools you need.
Hash: 3e5f08b51e3b4b02c777132264a85af1390116e80545882694ea6c95111c1ad8
