今天學(xué)了什么

1.字符串常用的方法

1.1 length

獲取字符串的長度

var a = "hello world";
alert(a.length)  //11

1.2增加 concat()

方法用于連接兩個或多個字符串。

var a = "hello world";
var b = "good";
var c = a.concat(b);
console.log(c);

1.3查詢

1.3 .1 charAt(index)

獲取在指定下標(biāo)的字符

var a = "hello world";
alert(a.charAt(0))  //h

1.3.2 indexOf(value)

檢索字符串出現(xiàn)的位置

var a = "hello world";
var b = a.indexOf(“h”); //0;
var c = a.indexOf(“a”); //-1如果沒有返回-1；

1.3.3 stringObject.slice(start,end)

基本類型方法不能改變原來的值

var a = "hello world";
var b = a.slice(0,2);
console.log(b); //”he”

1.3.4 stringObject.substr(start,length)

var a = "hello world";
var b = a.substr(0,5);
console.log(b);  //hello

1.3.5 stringObject.substring(start,stop)

var a = "hello world";
 var a = "hello world";
 var b = a.substring(0,2);
 console.log(b); //”he”

1.4split()

方法用于把一個字符串分割成字符串?dāng)?shù)組。

stringObject.split(separator,howmany)
var a = "hello world";
var b = a.split("");
console.log(b);

1.5 str.search()

返回搜索字符的下標(biāo) 如不存在，返回-1

var a = "hello world";
console.log(a.search("h"));

1.6 match()

將配置的內(nèi)容，返回一個數(shù)組
字符不存在，返回null

var a ="hello";
console.log(a.match("l"));

1.7 replace()替換

var a ="hello";
var b = a.replace("l","*");
console.log(b);

2.正則表達(dá)式

正則表達(dá)式：有叫規(guī)則表達(dá)式，規(guī)則字符串中字符出現(xiàn)規(guī)律的表達(dá)式

語法
/pattern/attributes
構(gòu)造函數(shù)的方式
.global:是否全文搜索
簡寫g
.ignore case:是否大小寫敏感
簡寫i
.multiline:多行搜索
.lastIndex:是當(dāng)前表達(dá)式匹配內(nèi)容的最后一個字符的下一個位置
.source:正則表達(dá)式的文本字符串

<script>
  var a="hello world";
  var reg=/l/g;
  var b=a.replace(reg,"*");
  console.log(b);
</script>

2.1備選字符集

規(guī)定某一位字符的備選字符列表
特點(diǎn)：必須且只能多選一

    <script>
        var a="上海,上天,上去,上海那";
        var reg=/上[海天]/g;
        var b=a.replace(reg,"*");
        console.log(b);
        var c="123234dd";
        var d=/[0-9]/g;
        console.log(c.replace(d,"*"));
    </script>

2.2.預(yù)定義字符集：

連續(xù)備選字符集的簡化符號

一位數(shù)字

[0-9] --> \d

一位數(shù)字字母或下劃線
[0-9a-zA-Z_] -->\w

一位空字符：空格,tab,換行
\s

除換行外，其余所有字符
.
點(diǎn)

2.3.量詞：規(guī)定字符集出現(xiàn)的次數(shù)

特點(diǎn):默認(rèn)一個量詞，僅修飾左側(cè)緊鄰的字符集

2.3.1 確定數(shù)量:

{m,n} -->至少m個，最多n個
{m,} -->m個以上
{m} -->必須m個

2.3.2 不確定數(shù)量

// ? -->一個或0個
// + -->1個以上

// * -->多個或沒有

2.3.2test()

測試正則表示式中是否存在匹配正則表示式的字符串,是有沒有的問題,為局部匹配而生的。返回boolean值
語法reg.test(str);
test()使用時正則中不要寫g

var str ="a";
        var reg = /a/g;
        console.log(reg.test(str));
        console.log(reg.test(str));
        console.log(reg.test(str));
        console.log(reg.test(str));
        console.log(reg.test(str));

var str ="ab";
        var reg = /[a-z]/g;
        while(reg.test(str)){
            console.log(reg.lastIndex);
        }

2.4. 選擇和分組

選擇
| 讀作"或"

分組
()

2.5. 指定匹配位置

開頭和結(jié)尾：^開頭的xxx；$結(jié)尾的xxx

何時使用:僅匹配開頭的規(guī)則和結(jié)尾的規(guī)則時使用

固定搭配：^正則表達(dá)式$-->表示從頭到尾完整匹配

何時使用:只要驗(yàn)證時，必須前加^,后加$！

//匹配字符串開頭的所有空字符
^\s+
//匹配字符串結(jié)尾的所有空字符
\s+$

var a ="  hello";
var reg =/^\s+/;
var str =a.replace(reg,"");
console.log(str);

2.6. 排除

//除了abc
[^abc]  

2.7 貪婪模式和懶惰模式

默認(rèn)會取量詞中最大的值

var str = "123456abc";
  var reg = /\d{3,6}/;
  console.log(str.replace(reg,"*"))

懶惰模式-->?
取量詞中最小的值

var str = "123456abc";
var reg = /\d{3,6}?/;
console.log(str.replace(reg,"*"))

3.字符串支持正則的API

match()將所有匹配的字符(內(nèi)容)提取出來

eg:

 varstr = "he1212 212";
 console.log(str.match(/\d+/g));*// ["1212",  "212",]*

search() 方法用于檢索字符串中指定的子字符串的位置

stringObject.search(regexp)*//注釋：如果沒有找到任何匹配的子串，則返回 -1。*
var a = "hello world";
var reg = /w/;
console.log(a.search(reg));  //6

replace() 替換匹配的對象

stringObject.replace(regexp/substr,replacement)
var a = "hello";
var reg = /l/g;
console.log(a.replace(reg,"*")); //"he**o"

Split(reg) 將字符串分割成數(shù)組

var a = "helo";
var reg = /l/;
console.log(a.split(reg)); //["he", "o"]

4.date對象

//獲取當(dāng)前時間
var oDate = new Date();
var hour = oDate.getHours();
var minute = oDate.getMinutes();
var second = oDate.getSeconds();
var date = oDate.getDate();
var year = oDate.getFullYear();
var mill = oDate.getTime();
//月份從0開始
var month = oDate.getMonth()+1;
//星期從0開始，0表示星期天
//0,1,2,3,4,5,6
var day = oDate.getDay();

例子:實(shí)現(xiàn)一個數(shù)碼時鐘

• 效果思路

• 獲取系統(tǒng)時間
  • Date對象
  • getHours、getMinutes、getSeconds
• 顯示系統(tǒng)時間
  • 字符串連接
  • 空位補(bǔ)零
• 設(shè)置圖片路徑
  • charAt方法

//css
    <style>
        span{
            font-size: 30px;
        }
        body{
            background-color: black;color: #fff;
        }
    </style>
//html
<div>
    <img src="images/0.png" alt=""/>
    <img src="images/0.png" alt=""/>
    <span>:</span>
    <img src="images/0.png" alt=""/>
    <img src="images/0.png" alt=""/>
    <span>:</span>
    <img src="images/0.png" alt=""/>
    <img src="images/0.png" alt=""/>
</div>
<script>
    function getDouble(n){
        if(n<10){
            return "0"+n;
        }else{
            return ""+n;
        }
    }
    showTime();
    function showTime(){
        /*1.獲取系統(tǒng)時間*/
        var oDate = new Date();
        var hour = oDate.getHours();
        var minute = oDate.getMinutes();
        var second = oDate.getSeconds();
        /*2.顯示系統(tǒng)時間
         *a字符串連接
         *b空零補(bǔ)位
         * */
        var imgs = document.getElementsByTagName("img");
        var str = getDouble(hour)+getDouble(minute)+getDouble(second);
        for(var i=0;i<imgs.length;i++){
            imgs[i].src="images/"+str[i]+".png"
        }
    }
    setInterval(showTime,1000)
</script>