String字符串和正則表達式

一·String 對象方法

 

概念：多個字符組成的只讀字符數組.........String本質上就是數組

和數組的不同

1.數組可以隨意修改原數組，但字符串只讀字符數組，一旦創建內容不可改變

2.類型不同：數組是Array,字符串是String都不可用

相同

1.都能用[i]訪問某個元素或字符

2.都有length屬性來記錄元素或字符的個數

3.都能有for循環遍歷元素或字符

4.都支持slice選取子數組或字符串

常用的API

toLowerCase(): 把字符串轉為小寫，返回新的字符串 

var str="Hello World";
var str1=str.toLowerCase();
console.log(str);  //Hello World
console.log(str1); //hello world

toUpperCase(): 把字符串轉為大寫，返回新的字符串

var str="hello world";
var str1=str.toUpperCase();
console.log(str); //hello world
console.log(str1); //HELLO WORLD

charAt(): 獲取指定下標位置的字符

var str="hello world";
var str1=str.charAt(6);
console.log(str1); //w

charCodeAt(): 返回指定下標位置的字符的unicode編碼

var str="hello world";
var str1=str.charCodeAt(1);
var str2=str.charCodeAt(-2); //NaN
console.log(str1); //101

split(): 把字符串分割成字符串數組。

var str="AA BB CC DD";
var str1=str.split("");//如果把空字符串 ("")用作分割符，那么字符串的每個字符之間都會被分割
console.log(str1);// ["A", "A", " ", "B", "B", " ", "C", "C", " ", "D", "D"]

var str2=str.split(" "); //以空格為分隔符
console.log(str2);  //["AA" "BB" "CC" "DD"]

var string1="1:2:3:4:5";
var str4=string1.split(":");
console.log(str4);  // ["1", "2", "3", "4", "5"]

slice() 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。

提取從位置 6 開始的所有字符：
<script type="text/javascript">

var str="Hello happy world!"
document.write(str.slice(6))

</script>
輸出：happy world!

提取從位置 6 到位置 11 的所有字符：
<script type="text/javascript">

var str="Hello happy world!"
document.write(str.slice(6,11))

</script>
輸出：happy

substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。

使用 substr() 從字符串中提取一些字符：
1.<script type="text/javascript">

var str="Hello world!"
document.write(str.substr(3))

</script>
輸出：lo world!

2.<script type="text/javascript">

var str="Hello world!"
document.write(str.substr(3,7))

</script>
輸出：lo worl

concat() 方法用於連接兩個或多個字符串。

<script type="text/javascript">

var str1="Hello "
var str2="world!"
document.write(str1.concat(str2))

</script>以上代碼的輸出是：

Hello world!

replace(): 在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

var str="hello WORLD";
var reg=/o/ig; //o為要替換的關鍵字，不能加引號，否則替換不生效，i忽略大小寫，g表示全局查找。
var str1=str.replace(reg,"**")
console.log(str1); //hell** W*RLD

 

查找關鍵詞的四種方法

1.查找一個固定的關鍵詞出現的位置

var i =string.indexog("關鍵詞”）默認從0開始，默認僅能查找一次出現的位置

var str="Hello World";
var str1=str.indexOf("o");
var str2=str.indexOf("world");
var str3=str.indexOf("o",str1+1);
console.log(str1);  //2 默認只找第一個關鍵字位置，從下標0開始查找
console.log(str2);  //-1
console.log(str3);  //7

2.判斷字符串中是否包含符合正則的敏感詞

var i = str.search(/正則/i)  i表示忽略大小寫    在str中找到第一個符合正則表達式要求的關鍵字的位置
 返回值：找到了返回關鍵詞的下標，如果沒有找到返回-1

<script type="text/javascript">

var str="Visit W3School!"
document.write(str.search(/w3school/i))

</script>
輸出：6

3.使用正則表達式查詢指定的一類關鍵詞
var arr = str.match(/正則/ig)  查找str中所有符合正則表達式要求的關鍵詞，保存在一個數組中返回
默認只找第一個，找到所有需要必須加上g
返回值：所有敏感詞組成數組，沒有找到返回null

var arr = str.match(/we/gi);
 console.log(String(arr));
 //強調：如果一個api有可能返回null,就必須先做判斷，不等null時在使用

4.既知道找位置又找具體內容
 //var arr = reg.exec(帶查找的完整字符串)

返回值：本次找到的一個關鍵詞及位置
arr[0]:關鍵詞的內容    如果正則中有分組    arr[n]:自動保存在第n個分組匹配的子內容
arr[index]:當前關鍵詞位置  -- > arr.index 如果沒有找到返回null
每次查找后，都將reg.lastIndex屬性（下一次開始位置）修改為當前index+關鍵詞長度，相當於跳過了當前關鍵詞繼續向后找

var  str = "那天，我去她家，我說：我草 你家真大。她說一起去郊游，我草草的收拾了一下，她說：我去去就來";
            var reg =/我[去草]{1,2}/g;
            var arr;
            //固定用法：找所有關鍵詞
            //反復：找str中的關鍵詞，只要不等於null
            while((arr=reg.exec(str))!=null){
                console.log(arr);
                console.log(
                    `在位置${arr["index"]}
                    發現
                    敏感詞${arr[0]}`
                    );
            }

 

二.正則表達式

RegExp 是正則表達式的縮寫。

 

RegExp 對象的方法

 

RegExp：

封裝一條正則表達式，提供了使用正則表達式進行查找和驗證的API

創建 直接量的創建 已知規則

  var reg=/no/g;// 所有與的/在正則中都要加上\/才能轉義為/

  console.log(typeof reg);//object 對象

  動態創建正則

  var reg1=new RegExp(/正則/,"gi");

對象有 3 個方法：test()、exec() 以及 compile()。

正則表達式是嚴格區分大小寫的

i　　加上去以后，讓正則表達式對大小寫不敏感，不常用

g　　全局匹配  找到了以后還會繼續的去找，沒有找到就一直找

m　　執行多行匹配

 

 

 

 

 

練習

<script>
        // 作業  對信息進行加密   "520 1314"  "今晚八點，不見不散" 
            // charCodeAt  String.fromCharCode sub()  slice() substr()
                //定義一個函數加密規則：每字符串都轉化為unicode碼   ---保證每一個unicode碼都是五給字符 不夠5個字符的地方用0補上  
                //定義一個函數解密：通過unicode碼 轉換為字符
        var msg = "今晚8點，老地方不見不散,w84u"
        function encode(msg){
            for(var i=0,code="";i<msg.length;i++){
                //將msg中當前字符轉換為unicode，拼接到code上
                // code+=msg[i].charCodeAt();
                var u= msg.charCodeAt(i);
                //加密的unicode碼都變成五位數
                /*if(u<100){
                    u="000"+u;
                }else if(u<1000){
                    u="00"+u;
                }*/
                //(u+100000+"").slice(1)
                //52+100000=100052    
                //20170+100000=120170   .slice(1)   =20170
                            //     012345
                code += (u+100000+"").slice(1);
                
            }

            return code;
        }
        var code = encode(msg);
        console.log(code);

        function decode(code){
            //聲明空字符 str
            var str="";
            //
            return str;
        }

        var receive = decode(code);//對加密的信息解密
        console.log(receive);//輸出解密之后的結果
    </script>

練習：隨機生成驗證碼，驗證是否輸入正確

<body>
        <script>
        function getchars(){
            var char=[];
            for(var u=48;u<=57;u++){
                //將0-9轉為正文存入數組
                char.push(String.fromCharCode(u));
            }
            for(var u=65;u<=90;u++){
                //將A-Z轉為正文存入數組
                char.push(String.fromCharCode(u));
            }
            for(var u=97;u<=122;u++){
                //將a-z轉為正文存入數組
                char.push(String.fromCharCode(u));
            }
            return char;
        }
        function getcode(){
            //聲明一個空數組
            var code=[];
            var chars=getchars();
            //生成4位數驗證碼
            for(var i=0;i<4;i++){
                //在0-61隨機生成一個數
                var r=Math.floor(Math.random()*62);
                //將chars中r位置的字符存入code
                code.unshift(chars[r]);
            }//循環結束
            //返回無縫連接的結果
            return code.join("")
        }
        fun4();
        function fun4(){
            var code=getcode();
            var input;
            while((input=prompt("請輸入驗證碼"+code)).toLocaleLowerCase()!=code.toLocaleLowerCase()){
                //驗證碼錯誤，重新輸入
                alert('驗證碼錯誤，請重新輸入');
                //重新獲取驗證碼
                code=getcode();
            }//循環結束
            alert("驗證通過");
        }
        </script>
    </body>

 測試手機號碼是否輸入正確

var reg=/^(13|15|18|17)\d{9}$/;
var str='18175693062';
 if(reg.test(str)){
   console.log('輸入正確')
     break;
  }else{
   console.log('輸入錯誤，請重新輸入')
  }    

測試郵箱是否輸入正確

var reg=/^\w@\w+(\.[A-Za-z]{2,3}){1,2}$/;
            var str='18175693062';
            if(reg.test(str)){
                console.log('輸入正確')
            }else{
                console.log('輸入錯誤，請重新輸入')
            }    

校驗是否為(0-10000)的整數

 

function isint1(str)   
{   
    var result=str.match(/^[0-9]$|^([1-9])([0-9]){0,3}$|^10000$/);   
    if(result==null) return false;   
    return true;   
}   

 

 

輸入六位數密碼，判斷是否輸入正確

<body>
        <script>
        var reg=/^\d{6}$/;
        while(true){
            var input=prompt("請輸入六位數字密碼");
            if(reg.test(input)){
                console.log('輸入正確')
                break;
            }else{
                alert('輸入錯誤，請重新輸入')
            }    
        }
        </script>
    </body>

練習：計算題的小游戲
        //隨機出十道加法題，接收玩家輸入結果，然后判斷對錯，對一道題加10分，游戲結束，給出總分
        //如果輸入exit，直接退出游戲

<body>
        
        <button onclick="fun()">計算題的小游戲</button>
        <script>
        function fun(){
            for(var i=0,sum1=0 ;i<10;i++){
                var num1= Math.floor(Math.random()*10);
                var num2= Math.floor(Math.random()*10);
                var sum=num1+num2;
                var input=prompt('請輸入'+num1+"+"+num2+'的答案');
                if(input==sum){
                    sum1+=10
                    console.log('答案正確，得'+sum1+'分');
                }else if(input=='exit'){
                    break;
                }else{
                    console.log('很抱歉，答案錯誤');
                }
            }
        }                                
        </script>
    </body>

 

<script>
        // 當鼠標失焦的時候開始進行驗證  
        // 只能輸入6-12位的字母數字，
        // 如果驗證通過，輸入框變成綠色，
        // 如果驗證不通過，輸入框變成紅色
        // 正在輸入過程中，輸入框為藍色

        var input = document.getElementsByTagName("input")[0];
        var reg = /^[a-zA-Z\d]{6,12}$/g;
        input.onfocus = function(){
            reg.lastIndex = 0;     //聚焦的時候要讓lastIndex設置成0，才不會出問題
            this.style.border = '2px solid #00f'
        }

        
        input.onblur = function(){
            console.log(reg.lastIndex)
            var val = this.value;
            // console.log(reg.test(val))
            if(reg.test(val)){
                this.style.border = '2px solid #0f0'
            }else {
                this.style.border = '2px solid #f00'
            }
        }
    </script>