js學習筆記 day7
阿新 • • 發佈：2018-06-17
replace exp doc tel mail 復雜 var _proto_ all
## 1.對象的拷貝
<script>
<script> // 對象的拷貝 var obj1 = { name: ‘zs‘, age: 18, sex: ‘男‘ } var obj2 = {}; // // 遍歷對象中的成員 // for (var key in obj1) { // // obj1[key] // obj2[key] = obj1[key]; // } // // 修改obj1的成員，此時不會影響obj2 // obj1.name = ‘xx‘; // console.dir(obj2); // 封裝函數 - 把o1 的成員，復制給o2 function copy(o1, o2) { for (var key in o1) { o2[key] = o1[key]; } } copy(obj1, obj2); console.dir(obj2); </script>
### 1.淺拷貝
<script>
<script> // 對象的拷貝 var obj1 = { name: ‘zs‘, age: 18, sex: ‘男‘, dog: { name: ‘金毛‘, age: 2, yellow: ‘黃色‘ } } var obj2 = {}; // 封裝函數 - 把o1 的成員，復制給o2 // 淺拷貝 function copy(o1, o2) { for (var key in o1) { o2[key] = o1[key]; } } copy(obj1, obj2); // 修改obj1中的成員 obj1.name = ‘xxxx‘; obj1.dog.name = ‘大黃‘; console.dir(obj2); </script>
### 2.深拷貝
<script> // 對象的拷貝 /*var obj1 = { name: ‘zs‘, age: 18, sex: ‘男‘, dog: { name: ‘金毛‘, age: 2, yellow: ‘黃色‘ }, friends: [‘lilei‘, ‘hanmeimei‘] } var obj2 = {}; var arr = []; console.log(arr instanceof Array); console.log(arr instanceof Object); // 深拷貝 function deepCopy(o1, o2) { for (var key in o1) { if (o1[key] instanceof Array) { console.log(key); // 如果key是數組類型 Array？ [] o2[key] = []; deepCopy(o1[key], o2[key]); } else if (o1[key] instanceof Object) { // 如果key是復雜類型 Object？ {} o2[key] = {}; deepCopy(o1[key], o2[key]); } else { // 如果key這個屬性 是基本類型 o2[key] = o1[key]; } } } deepCopy(obj1, obj2); // 修改obj1中的成員 obj1.name = ‘xxxx‘; obj1.dog.name = ‘大黃‘; obj1.friends[0] = ‘xxxx‘; console.dir(obj1); console.dir(obj2);*/ function deepClone(obj){ var result; var oClass=isClass(obj); if(oClass==="Object"){ result={}; }else if(oClass==="Array"){ result=[]; }else{ return obj; } for(var key in obj){ var copy=obj[key]; if(isClass(copy)=="Object"){ result[key]=arguments.callee(copy);//遞歸調用 }else if(isClass(copy)=="Array"){ result[key]=arguments.callee(copy); }else{ result[key]=obj[key]; } } return result; } //判斷對象的數據類型 function isClass(o){ if(o===null) return "Null"; if(o===undefined) return "Undefined"; return Object.prototype.toString.call(o).slice(8,-1); } var oPerson={ oName:"rookiebob", oAge:"18", oAddress:{ province:"beijing" }, ofavorite:[ "swimming", {reading:"history book"} ], skill:function(){ console.log("bob is coding"); } }; //深度克隆一個對象 var oNew=deepClone(oPerson); oNew.ofavorite[1].reading="picture"; console.log(oNew.ofavorite[1].reading); console.log(oPerson.ofavorite[1].reading); </script>
## 2.bind call 和 apply
<script> 1.bind 方法 ES5中新增的方法 // 函數也是對象 var a = 123; function fn() { console.log(this.a); } window.fn(); // fn.prototype // bind 方法 ES5中新增的方法 // 新建一個方法，bind中的第一個參數可以改變函數中的this的指向 // bind並沒有調用方法 var o = {a: ‘abc‘}; var fn1 = fn.bind(o); fn1(); // 相當於 o.fn() 2. bind的應用 var obj = { name: ‘zs‘, fun: function() { setInterval(function() { console.log(this.name); }.bind(this), 1000); } } obj.fun(); btn.onclick = function () { // 事件處理函數中的this 是觸發該事件的對象 // 通過bind 改變事件處理函數中this的指向 }.bind(obj); </script>
<script> // call bind apply 改變函數中的this // 函數是一個對象 // var fn = new Function(); // function fn() { // } // 證明fn是Function的實例(對象) // console.log(fn.__proto__ === Function.prototype); // console.dir(fn); function fn(x, y) { console.log(this); console.log(x + y); } // fn(5, 6); // this->window // 1 調用函數，改變函數中的this // 2 第一個參數 設置函數內部this的指向 // 其它參數，對應函數的參數 // 3 函數的返回值 call的返回值就是函數的返回值 // 4 測試 // var obj = { // name: ‘zs‘ // } // fn.call(obj, 5, 6); // apply 只有兩個參數 // 1 調用函數，改變函數中的this // 2 第一個參數 設置函數內部this的指向 // 第二個參數 是數組 // 3 函數的返回值 apply的返回值就是函數的返回值 // 4 測試 // var obj = { // name: ‘ls‘ // } // fn.apply(obj, [1, 2]); // bind // 1 改變函數中的this，不會調用函數，而是把函數復制一份 // 2 第一個參數 設置函數內部this的指向 // 其它參數，對應函數的參數 // 3 函數的返回值 call的返回值就是函數的返回值 // 4 測試 var obj = { name: ‘ww‘ } var f = fn.bind(obj, 5, 5); f(); </script>
## 3.組合繼承(借用構造函數 + 原型繼承)
<script> // 組合繼承：借用構造函數 + 原型繼承 // 父類型 function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } Person.prototype.sayHi = function () { console.log(‘大家好，我是‘ + this.name); } // 子類型 function Student(name, age, sex, score) { // 借用構造函數 Person.call(this, name, age, sex); this.score = score; } // 通過原型，讓子類型，繼承父類型中的方法 Student.prototype = new Person(); Student.prototype.constructor = Student; // 學生特有的方法 Student.prototype.exam = function () { console.log(‘考試‘); } // var s1 = new Student(‘zs‘, 18, ‘男‘, 100); // console.dir(s1); // var p1 = new Person(‘ls‘, 18, ‘男‘); // console.dir(p1); function Teacher(name, age, sex, salary) { // 借用構造函數 Person.call(this, name, age, sex); this.salary = salary; } // 通過原型讓子類型繼承父類型中的方法 Teacher.prototype = new Person(); Teacher.prototype.constructor = Teacher; var t1 = new Teacher(‘ww‘, 30, ‘男‘, 100000); console.dir(t1); t1.sayHi(); </script> ## 4.原型繼承
<script> // 繼承：類型和類型之間的關系 // 學生類型 老師類型 -> Person類型 // 繼承目的： 把子類型中共同的成員提取到父類型中，代碼重用 // 父類型 function Person() { this.name = ‘zs‘; this.age = 18; this.sex = ‘男‘; } // 子類型 function Student() { this.score = 100; } Student.prototype = new Person(); Student.prototype.constructor = Student; var s1 = new Student(); console.log(s1.constructor); console.dir(s1); function Teacher() { this.salary = 3000; } // 原型繼承： 無法設置構造函數的參數 </script>
## 5.註冊事件的兼容處理
<script> //註冊事件的方式 //1. ele.on事件類型 = function(){} //2. addEventListener(事件類型,事件處理函數,useCapture) 第三個參數默認是false，冒泡階段執行 //3. attachEvent(事件類型，事件處理函數) //1.在註冊事件的時候，判斷瀏覽器的註冊事件的方式，然後直接使用該方式進行註冊事件 //復用性太差 //2.將註冊事件的代碼封裝到一個函數中 //每次調用該函數，都會進行瀏覽器能力檢測 //3.在函數中返回函數，讓外部函數只執行一次，判斷也就只會執行一次 //使用函數內創建的函數返回給外界，就可以重復使用該函數，進行事件的註冊 //封裝成函數，問題是每次都會判斷 // function registeEvent(target, type, handler){ // if(target.addEventListener){ // target.addEventListener(type,handler) // }else if(target.attachEvent){ // target.attachEvent("on"+type,handler) // }else{ // target["on"+type] = handler; // } // } //使用更好的方式，避免了多次的判斷 //這裏存在問題就是 //我們使用統一的方式，進行事件註冊 //1、註冊的事件的處理函數中的，this指向不一致 //使用addEventListener的方式註冊的點擊事件的回調函數中的this 指向target //但是使用attachEvent的方式註冊點擊事件的回調函數中的this 指向window //2、3種註冊事件的方式中，回調函數內獲取事件對象的方式也是不一致的 //要讓他們統一， //在第二種的事件註冊方式（attachEvent）中，手動給handler傳遞window.event function createEventRegister(){ if(window.addEventListener){ return function(target, type, handler){ // this ---> window target.addEventListener(type,handler) } }else if(window.attachEvent){ return function(target, type, handler) { target.attachEvent("on" + type, function(){ handler.call(target, window.event); }) } }else{ return function(target, type, handler) { target["on" + type] = handler; } } } var registeEvent = createEventRegister(); window.onload =function () { var div = document.getElementById("div1"); registeEvent(div,"click",function(e){ console.log(e); console.log(this); //this---->該事件的觸發對象 alert("太陽天空照，花兒對我笑，小鳥說：完了") }) } // div.addEventListener("click",function(e){ // this // e.screenX; // }) // // div.attachEvent("onclick".function(){ //// this--->window // window.event.screenX // }) </script>
## 6.註冊時間兼容處理的分析
<script> window.onload =function () { var div = document.getElementById("dvd1"); function huidiao(e){ console.log(e+"就是當前的事件對象") console.log( this+ "就是當前你點擊的對象"); alert("我是div的點擊事件，所有瀏覽器中，我的功能都是彈出來這句話！"); } //通用的 // div.onclick = huidiao; //ie9以上才支持 // div.addEventListener("click",huidiao) //ie9（不包括9）以下支持的 // div.attachEvent("onclick",function(){ // huidiao.call(div, window.event); // }) } </script> ## 7.正則(JS中的正則對象)的方法
<script> // 跟正則表達式相關的方法 // 1 RegExp對象 // test() 匹配 // exec() 提取 提取一個內容 // 2 String對象 // match() 提取 可以提取多個內容 // replace() 替換 // split() 切割 // search() var str = ‘張三：2500，李四：3000，王五：50000‘; // var reg = /\d+/gi; // gi 全局匹配並且忽略大小寫 var reg = /\d+/g; // exec() 只返回一個匹配到的結果 如果沒有匹配的內容返回null // var content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); do { var content = reg.exec(str); // } while(content != null); if (content) { console.log(content[0]); } } while(content); </script> ### 1.提取
<script> // 1. 提取工資 // var str = ‘張三：1000，李四：5000，王五：8000。‘; // var reg = /\d+/g; // // 提取多個內容 // console.log(str.match(reg)); // console.log(str.match(reg)); // 2. 提取email地址 // var str = ‘[email protected],[email protected] 這是其它內容 [email protected] 2、[email protected] [email protected]...‘; // var reg = /\w+@\w+(\.\w+)+/g; // console.log(str.match(reg)); // 3. 分組提取 // 3. 提取日期中的年部分 2015-5-10 // var dateStr = ‘2015-1-5‘; // var reg = /(\d{4})-(\d{1,2})-(\d{1,2})/; // // reg.test(dateStr); // // reg.exec(dateStr); // // dateStr.match(reg); // console.log(RegExp.$1); // console.log(RegExp.$2); // console.log(RegExp.$3); // 4. 提取郵件中的每一部分 var str = ‘[email protected]‘; var reg = /(\w+)@(\w+)\.(\w+)/; reg.test(str); console.log(RegExp.$1); console.log(RegExp.$2); console.log(RegExp.$3); </script>
### 2.split
<script> // 1. 提取日期中的年部分 2015-5-10 // var dateStr = ‘2015-1-5‘; // console.log(dateStr.split(‘-‘)); // var dateStr = ‘2015/1-5‘; // console.log(dateStr.split(/[/-]/)); // 2. 提取郵件中的每一部分 var str = ‘[email protected]‘; console.log(str.split(/[@\.]/)); </script>
### 3.替換
<script> /*// 1. 替換所有空白 var str = " 123AD asadf asadfasf adf "; // trim() 去除前後的空格 // console.log( str.trim()); // replace() 只能替換掉第一個查找到的內容 // console.log(str.replace(‘ ‘, ‘x‘)); // console.log(str.replace(/\s/g, ‘‘)); // console.log(str.split(‘ ‘).join(‘‘)); // 2. 把所有,和，替換為. var str = "abc,efg,123，abc,123，a"; console.log(str.replace(/,|，/g, ‘.‘));*/ var box = document.getElementById("box") var str2 = "黑馬程序員, 屬於傳智旗下高端品牌, 黑馬程序員涵蓋了很多的學科, 前端也是屬於黑馬程序員的學科中的一員"; var str3 = "黑馬程序員" eval("var regStr = /"+str3+"/g ;") box.innerHTML = str2.replace(regStr, "<a href=‘http://www.itheima.com‘>"+str3+"</a>") </script>
</script>
<script>
<script> // 對象的拷貝 var obj1 = { name: ‘zs‘, age: 18, sex: ‘男‘ } var obj2 = {}; // // 遍歷對象中的成員 // for (var key in obj1) { // // obj1[key] // obj2[key] = obj1[key]; // } // // 修改obj1的成員，此時不會影響obj2 // obj1.name = ‘xx‘; // console.dir(obj2); // 封裝函數 - 把o1 的成員，復制給o2 function copy(o1, o2) { for (var key in o1) { o2[key] = o1[key]; } } copy(obj1, obj2); console.dir(obj2); </script>
### 1.淺拷貝
<script>
<script> // 對象的拷貝 var obj1 = { name: ‘zs‘, age: 18, sex: ‘男‘, dog: { name: ‘金毛‘, age: 2, yellow: ‘黃色‘ } } var obj2 = {}; // 封裝函數 - 把o1 的成員，復制給o2 // 淺拷貝 function copy(o1, o2) { for (var key in o1) { o2[key] = o1[key]; } } copy(obj1, obj2); // 修改obj1中的成員 obj1.name = ‘xxxx‘; obj1.dog.name = ‘大黃‘; console.dir(obj2); </script>
### 2.深拷貝
<script> // 對象的拷貝 /*var obj1 = { name: ‘zs‘, age: 18, sex: ‘男‘, dog: { name: ‘金毛‘, age: 2, yellow: ‘黃色‘ }, friends: [‘lilei‘, ‘hanmeimei‘] } var obj2 = {}; var arr = []; console.log(arr instanceof Array); console.log(arr instanceof Object); // 深拷貝 function deepCopy(o1, o2) { for (var key in o1) { if (o1[key] instanceof Array) { console.log(key); // 如果key是數組類型 Array？ [] o2[key] = []; deepCopy(o1[key], o2[key]); } else if (o1[key] instanceof Object) { // 如果key是復雜類型 Object？ {} o2[key] = {}; deepCopy(o1[key], o2[key]); } else { // 如果key這個屬性 是基本類型 o2[key] = o1[key]; } } } deepCopy(obj1, obj2); // 修改obj1中的成員 obj1.name = ‘xxxx‘; obj1.dog.name = ‘大黃‘; obj1.friends[0] = ‘xxxx‘; console.dir(obj1); console.dir(obj2);*/ function deepClone(obj){ var result; var oClass=isClass(obj); if(oClass==="Object"){ result={}; }else if(oClass==="Array"){ result=[]; }else{ return obj; } for(var key in obj){ var copy=obj[key]; if(isClass(copy)=="Object"){ result[key]=arguments.callee(copy);//遞歸調用 }else if(isClass(copy)=="Array"){ result[key]=arguments.callee(copy); }else{ result[key]=obj[key]; } } return result; } //判斷對象的數據類型 function isClass(o){ if(o===null) return "Null"; if(o===undefined) return "Undefined"; return Object.prototype.toString.call(o).slice(8,-1); } var oPerson={ oName:"rookiebob", oAge:"18", oAddress:{ province:"beijing" }, ofavorite:[ "swimming", {reading:"history book"} ], skill:function(){ console.log("bob is coding"); } }; //深度克隆一個對象 var oNew=deepClone(oPerson); oNew.ofavorite[1].reading="picture"; console.log(oNew.ofavorite[1].reading); console.log(oPerson.ofavorite[1].reading); </script>
## 2.bind call 和 apply
<script> 1.bind 方法 ES5中新增的方法 // 函數也是對象 var a = 123; function fn() { console.log(this.a); } window.fn(); // fn.prototype // bind 方法 ES5中新增的方法 // 新建一個方法，bind中的第一個參數可以改變函數中的this的指向 // bind並沒有調用方法 var o = {a: ‘abc‘}; var fn1 = fn.bind(o); fn1(); // 相當於 o.fn() 2. bind的應用 var obj = { name: ‘zs‘, fun: function() { setInterval(function() { console.log(this.name); }.bind(this), 1000); } } obj.fun(); btn.onclick = function () { // 事件處理函數中的this 是觸發該事件的對象 // 通過bind 改變事件處理函數中this的指向 }.bind(obj); </script>
<script> // call bind apply 改變函數中的this // 函數是一個對象 // var fn = new Function(); // function fn() { // } // 證明fn是Function的實例(對象) // console.log(fn.__proto__ === Function.prototype); // console.dir(fn); function fn(x, y) { console.log(this); console.log(x + y); } // fn(5, 6); // this->window // 1 調用函數，改變函數中的this // 2 第一個參數 設置函數內部this的指向 // 其它參數，對應函數的參數 // 3 函數的返回值 call的返回值就是函數的返回值 // 4 測試 // var obj = { // name: ‘zs‘ // } // fn.call(obj, 5, 6); // apply 只有兩個參數 // 1 調用函數，改變函數中的this // 2 第一個參數 設置函數內部this的指向 // 第二個參數 是數組 // 3 函數的返回值 apply的返回值就是函數的返回值 // 4 測試 // var obj = { // name: ‘ls‘ // } // fn.apply(obj, [1, 2]); // bind // 1 改變函數中的this，不會調用函數，而是把函數復制一份 // 2 第一個參數 設置函數內部this的指向 // 其它參數，對應函數的參數 // 3 函數的返回值 call的返回值就是函數的返回值 // 4 測試 var obj = { name: ‘ww‘ } var f = fn.bind(obj, 5, 5); f(); </script>
## 3.組合繼承(借用構造函數 + 原型繼承)
<script> // 組合繼承：借用構造函數 + 原型繼承 // 父類型 function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } Person.prototype.sayHi = function () { console.log(‘大家好，我是‘ + this.name); } // 子類型 function Student(name, age, sex, score) { // 借用構造函數 Person.call(this, name, age, sex); this.score = score; } // 通過原型，讓子類型，繼承父類型中的方法 Student.prototype = new Person(); Student.prototype.constructor = Student; // 學生特有的方法 Student.prototype.exam = function () { console.log(‘考試‘); } // var s1 = new Student(‘zs‘, 18, ‘男‘, 100); // console.dir(s1); // var p1 = new Person(‘ls‘, 18, ‘男‘); // console.dir(p1); function Teacher(name, age, sex, salary) { // 借用構造函數 Person.call(this, name, age, sex); this.salary = salary; } // 通過原型讓子類型繼承父類型中的方法 Teacher.prototype = new Person(); Teacher.prototype.constructor = Teacher; var t1 = new Teacher(‘ww‘, 30, ‘男‘, 100000); console.dir(t1); t1.sayHi(); </script> ## 4.原型繼承
<script> // 繼承：類型和類型之間的關系 // 學生類型 老師類型 -> Person類型 // 繼承目的： 把子類型中共同的成員提取到父類型中，代碼重用 // 父類型 function Person() { this.name = ‘zs‘; this.age = 18; this.sex = ‘男‘; } // 子類型 function Student() { this.score = 100; } Student.prototype = new Person(); Student.prototype.constructor = Student; var s1 = new Student(); console.log(s1.constructor); console.dir(s1); function Teacher() { this.salary = 3000; } // 原型繼承： 無法設置構造函數的參數 </script>
## 5.註冊事件的兼容處理
<script> //註冊事件的方式 //1. ele.on事件類型 = function(){} //2. addEventListener(事件類型,事件處理函數,useCapture) 第三個參數默認是false，冒泡階段執行 //3. attachEvent(事件類型，事件處理函數) //1.在註冊事件的時候，判斷瀏覽器的註冊事件的方式，然後直接使用該方式進行註冊事件 //復用性太差 //2.將註冊事件的代碼封裝到一個函數中 //每次調用該函數，都會進行瀏覽器能力檢測 //3.在函數中返回函數，讓外部函數只執行一次，判斷也就只會執行一次 //使用函數內創建的函數返回給外界，就可以重復使用該函數，進行事件的註冊 //封裝成函數，問題是每次都會判斷 // function registeEvent(target, type, handler){ // if(target.addEventListener){ // target.addEventListener(type,handler) // }else if(target.attachEvent){ // target.attachEvent("on"+type,handler) // }else{ // target["on"+type] = handler; // } // } //使用更好的方式，避免了多次的判斷 //這裏存在問題就是 //我們使用統一的方式，進行事件註冊 //1、註冊的事件的處理函數中的，this指向不一致 //使用addEventListener的方式註冊的點擊事件的回調函數中的this 指向target //但是使用attachEvent的方式註冊點擊事件的回調函數中的this 指向window //2、3種註冊事件的方式中，回調函數內獲取事件對象的方式也是不一致的 //要讓他們統一， //在第二種的事件註冊方式（attachEvent）中，手動給handler傳遞window.event function createEventRegister(){ if(window.addEventListener){ return function(target, type, handler){ // this ---> window target.addEventListener(type,handler) } }else if(window.attachEvent){ return function(target, type, handler) { target.attachEvent("on" + type, function(){ handler.call(target, window.event); }) } }else{ return function(target, type, handler) { target["on" + type] = handler; } } } var registeEvent = createEventRegister(); window.onload =function () { var div = document.getElementById("div1"); registeEvent(div,"click",function(e){ console.log(e); console.log(this); //this---->該事件的觸發對象 alert("太陽天空照，花兒對我笑，小鳥說：完了") }) } // div.addEventListener("click",function(e){ // this // e.screenX; // }) // // div.attachEvent("onclick".function(){ //// this--->window // window.event.screenX // }) </script>
## 6.註冊時間兼容處理的分析
<script> window.onload =function () { var div = document.getElementById("dvd1"); function huidiao(e){ console.log(e+"就是當前的事件對象") console.log( this+ "就是當前你點擊的對象"); alert("我是div的點擊事件，所有瀏覽器中，我的功能都是彈出來這句話！"); } //通用的 // div.onclick = huidiao; //ie9以上才支持 // div.addEventListener("click",huidiao) //ie9（不包括9）以下支持的 // div.attachEvent("onclick",function(){ // huidiao.call(div, window.event); // }) } </script> ## 7.正則(JS中的正則對象)的方法
<script> // 跟正則表達式相關的方法 // 1 RegExp對象 // test() 匹配 // exec() 提取 提取一個內容 // 2 String對象 // match() 提取 可以提取多個內容 // replace() 替換 // split() 切割 // search() var str = ‘張三：2500，李四：3000，王五：50000‘; // var reg = /\d+/gi; // gi 全局匹配並且忽略大小寫 var reg = /\d+/g; // exec() 只返回一個匹配到的結果 如果沒有匹配的內容返回null // var content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); do { var content = reg.exec(str); // } while(content != null); if (content) { console.log(content[0]); } } while(content); </script> ### 1.提取
<script> // 1. 提取工資 // var str = ‘張三：1000，李四：5000，王五：8000。‘; // var reg = /\d+/g; // // 提取多個內容 // console.log(str.match(reg)); // console.log(str.match(reg)); // 2. 提取email地址 // var str = ‘[email protected],[email protected] 這是其它內容 [email protected] 2、[email protected] [email protected]...‘; // var reg = /\w+@\w+(\.\w+)+/g; // console.log(str.match(reg)); // 3. 分組提取 // 3. 提取日期中的年部分 2015-5-10 // var dateStr = ‘2015-1-5‘; // var reg = /(\d{4})-(\d{1,2})-(\d{1,2})/; // // reg.test(dateStr); // // reg.exec(dateStr); // // dateStr.match(reg); // console.log(RegExp.$1); // console.log(RegExp.$2); // console.log(RegExp.$3); // 4. 提取郵件中的每一部分 var str = ‘[email protected]‘; var reg = /(\w+)@(\w+)\.(\w+)/; reg.test(str); console.log(RegExp.$1); console.log(RegExp.$2); console.log(RegExp.$3); </script>
### 2.split
<script> // 1. 提取日期中的年部分 2015-5-10 // var dateStr = ‘2015-1-5‘; // console.log(dateStr.split(‘-‘)); // var dateStr = ‘2015/1-5‘; // console.log(dateStr.split(/[/-]/)); // 2. 提取郵件中的每一部分 var str = ‘[email protected]‘; console.log(str.split(/[@\.]/)); </script>
### 3.替換
<script> /*// 1. 替換所有空白 var str = " 123AD asadf asadfasf adf "; // trim() 去除前後的空格 // console.log( str.trim()); // replace() 只能替換掉第一個查找到的內容 // console.log(str.replace(‘ ‘, ‘x‘)); // console.log(str.replace(/\s/g, ‘‘)); // console.log(str.split(‘ ‘).join(‘‘)); // 2. 把所有,和，替換為. var str = "abc,efg,123，abc,123，a"; console.log(str.replace(/,|，/g, ‘.‘));*/ var box = document.getElementById("box") var str2 = "黑馬程序員, 屬於傳智旗下高端品牌, 黑馬程序員涵蓋了很多的學科, 前端也是屬於黑馬程序員的學科中的一員"; var str3 = "黑馬程序員" eval("var regStr = /"+str3+"/g ;") box.innerHTML = str2.replace(regStr, "<a href=‘http://www.itheima.com‘>"+str3+"</a>") </script>
</script>
js學習筆記 day7