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>
-