Javascript解析URL的方法
URL: 统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:
scheme://host:port/path?query#fragment
scheme = 通信协议 (常用的http,ftp,maito等)
host = 主机 (域名或IP)
port = 端口号
path = 路径
query = 查询
可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用”&”符号隔开,每个参数的名和值用”=”符号隔开。
fragment = 信息片断
字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点)
对于这样一个URL
http://www.xxxxx.cn:80/dsaf/?ver=1.0&id=6#imhere
我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
2,window.location.protocol
URL 的协议部分
本例返回值:http:
3,window.location.host
URL 的主机部分
本例返回值:www.360happy.cn
4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:""
5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/seo/
6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值 ver=1.0&id=6
7,window.location.hash
锚点
本例返回值:#imhere
javascript 获取搜索引擎关键字并高亮显示
-
<script type="text/javascript">
-
<!--
-
// 说明:获取搜索引擎关键字并高亮显示
-
// 整理:http://www.CodeBit.cn
-
-
/* http://www.kryogenix.org/code/browser/searchhi/ */
-
/* Modified 20021006 to fix query string parsing and add case insensitivity */
-
function highlightWord(node,word) {
-
// Iterate into this nodes childNodes
-
if (node.hasChildNodes) {
-
var hi_cn;
-
for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
-
highlightWord(node.childNodes[hi_cn],word);
-
}
-
}
-
-
// And do this node itself
-
if (node.nodeType == 3) { // text node
-
tempNodeVal = node.nodeValue.toLowerCase();
-
tempWordVal = word.toLowerCase();
-
if (tempNodeVal.indexOf(tempWordVal) != -1) {
-
pn = node.parentNode;
-
if (pn.className != "searchword") {
-
// word has not already been highlighted!
-
nv = node.nodeValue;
-
ni = tempNodeVal.indexOf(tempWordVal);
-
// Create a load of replacement nodes
-
before = document.createTextNode(nv.substr(0,ni));
-
docWordVal = nv.substr(ni,word.length);
-
after = document.createTextNode(nv.substr(ni+word.length));
-
hiwordtext = document.createTextNode(docWordVal);
-
hiword = document.createElement("span");
-
hiword.className = "searchword";
-
hiword.appendChild(hiwordtext);
-
pn.insertBefore(before,node);
-
pn.insertBefore(hiword,node);
-
pn.insertBefore(after,node);
-
pn.removeChild(node);
-
}
-
}
-
}
-
}
-
-
function googleSearchHighlight() {
-
if (!document.createElement) return;
-
ref = document.referrer;
-
if (ref.indexOf('?') == -1) return;
-
qs = ref.substr(ref.indexOf('?')+1);
-
qsa = qs.split('&');
-
for (i=0;i<qsa.length;i++) {
-
qsip = qsa[i].split('=');
-
if (qsip.length == 1) continue;
-
if (qsip[0] == 'q' || qsip[0] == 'p') { // q= for Google, p= for Yahoo
-
words = unescape(decodeURIComponent(qsip[1].replace(/\+/g,' '))).split(/\s+/);
-
for (w=0;w<words.length;w++) {
-
highlightWord(document.getElementsByTagName("body")[0],words[w]);
-
}
-
}
-
}
-
}
-
-
window.onload = googleSearchHighlight;
-
-
//-->
-
</script>
-
同时,您需要为要高亮的关键词设置一个样式:
CSS:
<style type="text/css">
.searchword {
background-color: yellow;
}
</style>
实现原理:在页面加载完成时获取页面来源(document.referrer),并分析搜索引擎关键词,然后获取页面上所有元素,递归查询是否含有搜索关键字,如果有,就创建一个 span 元素,并应用关键词样式,替换原有节点。
用 Javascript 实现检测、添加、移除样式(className)
-
<script type="text/javascript">
-
-
// 说明:添加、移除、检测 className
-
// 整理:CodeBit.cn ( http://www.codebit.cn )
-
-
function hasClass(element, className) {
-
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
-
return element.className.match(reg);
-
}
-
-
function addClass(element, className) {
-
if (!this.hasClass(element, className))
-
{
-
element.className += " "+className;
-
}
-
}
-
-
function removeClass(element, className) {
-
if (hasClass(element, className)) {
-
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
-
element.className = element.className.replace(reg,' ');
-
}
-
}
-
-
</script>
-
分享到:
相关推荐
javascript各种实用技巧
代码很全,用于控制网页,实现网页的种种特效, 酷毙了!
javascript 收藏的一些代码很方便很实用,拿来看懂就可以用
javascript大全,非常好的东西。值得你学习与收藏,呵呵。
包含JavaScript各种特效,用法.
JavaScript实现web收藏和设为首页,自己用着非常不错
包括javascript的230多个常用功能,有例子,还添加了标题,容易查询
Javascript代码收藏大全 超有用
通过Vue.js,JS实现的网易云音乐移动端的仿作在学Vuede 小伙伴可以看看!
Javascript代码收藏大全1,很不错的代码,值得收藏!!!!!
收藏的javascript的经典应用,经典啊!
Javascript代码收藏大全2,很不错的代码,值得珍藏!!!!
格式:ZIP 目录: 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 ...本人将汤姆大叔(原文译者)的大作,保存收藏起来,并打包成ZIP格式,方便以后学习查阅。同时,在此分享给大家,方便下载!
javaScript 超级经典的收藏版。包含用js做的小游戏(五子棋、超级玛丽、扫雷、俄罗斯方块、推箱子等等等)、数学类、图片类、css样式类、菜单类、鼠标类、特效类等等,都是值得你收藏的 javaScript 脚本。 非本人资源...
JavaScript值得收藏的代码
整理的js的代码,有些是比较常用的,提供大家学习参考
javascript收藏 1.页面校验 2.下拉框类 3.导航类 4.表格类 5.选择控件类 6.树 7.进度条 8.模拟类 9.其它类 Web测试过程中前台通用问题 说明文档下载
绝对的经典javascript收藏 包含了各个种类的js校验实例 web开发绝妙帮手 <br>javascript收藏 1.页面校验 1.文本框约束输入 2.表单校验工具库 3.文本框部分内容不让改变 2.下拉框类 ...
javascript脚本完全收藏,包括各种类型效果显示,源代码和实现实例