Purl.js-使用JS获取URL信息
投稿于 被查看 30405 次 评论：246
Purl.js-使用JS获取URL信息
Purl.js可以帮助我们来获取地址栏的一些信息， 可以使用原生js，也可以使用jQuery
- 点击代码运行，可查看具体信息
- 可以自己设置url进行测试，也可清空url，那么就会获取当前页的url
预览如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Purl.js-JS地址栏插件</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.code-wper pre {
display: block;
margin: 0 0 10px;
color: #333;
border: 1px solid #ccc;
padding: 16px;
overflow: auto;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-center mt-3">
<a class="btn btn-primary" href="https://www.bootcdn.cn/purl/readme/">Purl.js官方文档</a>
</p>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">URLTest</span>
</div>
<input id="urlArea" type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" value="http://baidu.com:8080/folder/dir/index.html?item=value&title=purltest&name=yang&age=20#top">
</div>
<div class="input-group mb-3" id="clickBtn">
<button type="button" class="mr-1 btn btn-outline-primary">source</button>
<button type="button" class="mr-1 btn btn-outline-secondary">protocol</button>
<button type="button" class="mr-1 btn btn-outline-success">host</button>
<button type="button" class="mr-1 btn btn-outline-danger">port</button>
<button type="button" class="mr-1 btn btn-outline-warning">relative</button>
<button type="button" class="mr-1 btn btn-outline-info">path</button>
<button type="button" class="mr-1 btn btn-outline-dark">directory</button>
<button type="button" class="mr-1 btn btn-outline-primary">file</button>
<button type="button" class="mr-1 btn btn-outline-secondary">query</button>
<button type="button" class="mr-1 btn btn-outline-success">fragment</button>
<button type="button" class="mr-1 btn btn-outline-danger">anchor</button>
<button type="button" class="mr-1 btn btn-outline-warning">param</button>
<button type="button" class="mr-1 btn btn-outline-info">segment</button>
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Result</span>
</div>
<input id="inputRes" type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
<table class="table table-hover">
<thead>
<tr class="table-active">
<th scope="col">Attributes</th>
<th scope="col">Info</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>source</td>
<td>The whole url being parsed</td>
</tr>
<tr class="table-secondary">
<td>protocol</td>
<td>eg. http, https, file, etc</td>
</tr>
<tr class="table-success">
<td>host</td>
<td>eg. www.mydomain.com, localhost etc</td>
</tr>
<tr class="table-danger">
<td>port</td>
<td>eg. 80</td>
</tr>
<tr class="table-warning">
<td>relative</td>
<td>The relative path to the file including the querystring (eg. /folder/dir/index.html?item=value)</td>
</tr>
<tr class="table-info">
<td>path</td>
<td>The path to the file (eg. /folder/dir/index.html)</td>
</tr>
<tr class="table-primary">
<td>directory</td>
<td>The directory part of the path (eg. /folder/dir/)</td>
</tr>
<tr class="table-secondary">
<td>file</td>
<td>The basename of the file eg. index.html</td>
</tr>
<tr class="table-success">
<td>query</td>
<td>The entire query string if it exists, eg. item=value&item2=value2</td>
</tr>
<tr class="table-danger">
<td>fragment or anchor</td>
<td> The entire string after the # symbol</td>
</tr>
</tbody>
</table>
<h4>The <code>.param()</code> method is used to return the values of querystring parameters.</h4>
<div class="code-wper md-3">
<pre><span class="pl-k">var</span> url <span class="pl-k">=</span> <span class="pl-smi">$</span>.<span class="pl-en">url</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>); <span class="pl-c"><span class="pl-c">//</span> jQuery version</span>
<span class="pl-k">var</span> url <span class="pl-k">=</span> <span class="pl-en">purl</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>); <span class="pl-c"><span class="pl-c">//</span> plain JS version</span>
<span class="pl-smi">url</span>.<span class="pl-en">segment</span>(<span class="pl-c1">1</span>); <span class="pl-c"><span class="pl-c">//</span> returns 'folder'</span>
<span class="pl-smi">url</span>.<span class="pl-en">segment</span>(<span class="pl-k">-</span><span class="pl-c1">2</span>); <span class="pl-c"><span class="pl-c">//</span> returns 'example'</span></pre>
</div>
<h4>The <code>.segment()</code> method is used to return values of individual segments from the URL's path.</h4>
<div class="code-wper md-3">
<pre><span class="pl-smi">$</span>.<span class="pl-en">url</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>).<span class="pl-en">segment</span>(); <span class="pl-c"><span class="pl-c">//</span> jQuery version - returns ['folder','dir','example','index.html']</span>
<span class="pl-en">purl</span>(<span class="pl-s"><span class="pl-pds">'</span>http://allmarkedup.com/folder/dir/example/index.html<span class="pl-pds">'</span></span>).<span class="pl-en">segment</span>(); <span class="pl-c"><span class="pl-c">//</span> plain JS version - returns ['folder','dir','example','index.html']</span></pre>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/purl/2.3.1/purl.js"></script>
<script>
$(function () {
var url;
var myurl;
$("#clickBtn").find('button').click(function (e) {
var res, resInfo;
myurl = $("#urlArea").val();
// 如果myurl为空，则会获取当前页面的url
url = purl(myurl);
$("#urlArea").val(myurl);
res = $(this).text();
resInfo = getUrlInfo(url, res);
$("#inputRes").val(resInfo);
});
function getUrlInfo(url, res) {
if (res === 'param') {
return url.param();
} else if (res === 'segment') {
return url.segment();
} else {
return url.attr(res);
}
}
});
</script>
</body>
</html>
用户评论