JavaScript中search和match函数的区别

JavaScript027

JavaScript中search和match函数的区别,第1张

string.match(str)

如果string 中有字符串str ,

则返回值是str ,或者多个str

例如:

var str="The rain in SPAIN stays mainly in the plain"

var n=str.match(/ain/g)

//返回值 n 为:ain,ain,ain

string.search(str)

如果string 中有字符串str ,则返回值是与str匹配的起始位置;

如果没有,则返回 -1;

例如:

var str="Visit W3CSchool!"

var n=str.search("W3CSchool")

document.getElementById("demo").innerHTML=n

//返回值n为:6

一:对文章关键字的搜索(数组的方法):

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

#search{

height:40pxwidth: 200pxfont-size: 30pxtext-align: center

}

#div {

font-size: 20pxwidth: 600px

}

#div span{

color: red

}

</style>

</head>

<body >

<input type="text" name="search" id="search" value="馋" onclick="this.value='' "/>

<input type="button" name="" id="bbtn" value="搜索" />

<div id="div">

<p>馋,在英文里找不到一个十分适当的字。罗马暴君尼禄,以至于英国的亨利八世,在大宴群臣的时候,常见其撕下一根根又粗又壮的鸡腿,举起来大嚼,旁若无人,好一副饕餮相!但那不是馋。埃及废王法鲁克,据说每天早餐一口气吃二十个荷包蛋,也不是馋,只是放肆,只是没有吃相。对有某一种食物有所偏好,于是大量的吃,这是贪多无厌。馋,则着重在食物的质,最需要满足的是品味。上天生人,在他嘴里安放一条舌,舌上还有无数的味蕾,教人焉得不馋?馋,基于生理的要求;也可以发展成为近于艺术的趣味。 

也许我们中国人特别馋一些。馋字从食,有声。毚音谗,本义是狡兔,善于奔走,人为了口腹之欲,不惜多方奔走以膏馋吻,所谓“为了一张嘴,跑断两条腿”。</p>

</div>

<script type="text/javascript">

       var bbtn=document.getElementById('bbtn')

       var search=document.getElementById('search')

       var text=document.getElementsByTagName('p')[0]

       var text1=text.innerHTML

       var arr=[]

       var str=text1

       bbtn.onclick=function(){

        str=text1

        arr=search.value

      str=str.split(arr).join('<span>'+arr+'</span>')

        text.innerHTML=str

       }

       

</script>

</body>

</html>

二:对li表单的搜索:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

padding: 0margin: 0

}

#content{

margin: 100px 300pxdisplay: block

}

input{

height: 50pxwidth: 400pxfont-size: 30pxline-height: 50px

}

ul{

      

}

li{

margin:10px 0pxdisplay: block

}

</style>

</head>

<body>

<div id="content">

<ul>

<input type="" name="" id="" value="" placeholder="请输入城市的名称或拼音"/>

<li pname="北京" cname="bj">北京</li>

<li pname="株洲" cname="zz">株洲</li>

<li pname="上海" cname="sh">上海</li>

<li pname="长沙" cname="cs">长沙</li>

<li pname="杭州" cname="hz">杭州</li>

<li pname="天津" cname="tj">天津</li>

<li pname="西安" cname="xa">西安</li>

<li pname="成都" cname="cd">成都</li>

<li pname="武汉" cname="wh">武汉</li>

<li pname="南京" cname="nj">南京</li>

</ul>

</div>

        <script type="text/javascript">

         var li=document.getElementsByTagName('li')

         var text=document.getElementsByTagName('input')[0]

         function search(){

         var arr=text.value

         for(var i=0i<li.lengthi++)

         {

         li[i].style.display="none"

         if(li[i].getAttribute('pname').indexOf(arr)!=-1||li[i].getAttribute('cname').indexOf(arr)!=-1)

         {

         li[i].style.display="block"

         }

         }

         }

        text.oninput=function(){

         search()

        }

  </script>

</body>

</html>

用该属性获取页面 URL 地址:

window.location 对象所包含的属性

如图就是取出url中的参数。

JS 脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得,然后通过 split 方法结合循环遍历自由组织数据格式。

大概处理如下: