javascript】姬成"/>
【javascript】姬成
文章目录
- 1、typeof
- 2、显式类型转换
- 3、隐式类型转换
- 4、绝对不发生类型转换的比较
- 5、预编译
- 5、函数
- 6、作用域
- 7、闭包
- 8、对象、包装类
- 9、原型、原型链
- 10、call/apply
- 11、继承
- 12、this
- 13 、callee和caller
- 14 、深度克隆需要的技术
- 15、数组
- 16、类数组
- 17 、Error.name值(错误信息)
- 18、ES5严格模式
- 19、DOM
- 20、DOM树结构
- 21、js定时器
- 22、获取窗口属性
- 23、脚本化CSS
- 24、事件
- 24、事件处理模型
- 25、鼠标事件分类
- 26、键盘事件分类
- 27 、文本类操作事件
- 28、窗体类事件
- 29、json
- 30、异步加载js
- 31、时间线
- 32、正则表达式
1、typeof
判断变量类型,六种返回结果为(这些值全是字符串类型),number,string,boolean,object,undefined,function
2、显式类型转换
- Number(mix)
- parseInt(string,radix),radix设置一个进制数,指定参数的进制
- parseFloat(string)
- toString(radix),radix设置一个进制数,对数值进行进制转换
- String(mix)
- Boolean()
3、隐式类型转换
undefined == null,返回结果为true
NaN == NaN,返回false
- isNaN(),隐式Number
- ++/–,+/-(一元正负),隐式Number
- +,隐式String
- -*/%,隐式Number
- &&||!,Boolean()
- < > <= >=
- == !=
4、绝对不发生类型转换的比较
- ===
- !==
5、预编译
- 在预编译阶段,系统会把函数声明和变量声明提升(自动把声明全部放在使用前面)
- (暗示全局变量)任何变量,如果变量未经声明就赋值,此变量就为全局变量所有
- 一切声明的全局变量,全是window的属性
预编译四部曲:
-
创建AO(Activation Object)
-
AO{}
-
-
找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
-
AO{a: undefined,b: undefined }
-
-
将实参值和形参统一
-
AO{a: 1,b: undefined }
-
-
在函数体内找函数声明,值赋予函数体
-
AO{a: function a(){},b: function (){},d: function d(){}, }
-
function fn(a){console.log(a);var a = 123;console.log(a);function a(){}//函数声明console.log(a);var b = function (){}//函数表达式console.log(b);function d(){}
}
fn(1);打印结果:
ƒ a(){}
123
123
ƒ (){}
总结一点就是:在预编译阶段声明的提升,在声明提升过程中同名的也会被覆盖
同时还要注意函数声明和函数表达式不同
5、函数
- 每一个函数都有一个默认的arguments属性,它接收传递的参数作为数组
- 改变arguments数组中的值,形参的相应值也跟着变化
- 改变形参的值,arguments的相应值也变化
6、作用域
[[scope]]:我们所说的作用域,里面存储了运行期上下文的集合。
每个函数都是一个对象,对象中有些属性可以访问,有些不可以。仅供引擎存取,[[scope]]就是一个外界不可访问的
作用域链:运行期上下文的集合所呈现的链式连接称为作用域链
7、闭包
当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用链不释放,造成内存泄漏
闭包的作用:
-
实现公有变量
//累加器 function add(){var num = 0;function a(){console.log(++num);}return a; } var myAdd = add() myAdd() myAdd() myAdd()输出:1 2 3
-
可以做缓存(存储结构)
//类似缓存 function test(){var food = "";var obj = {eatfoot : function(){if(food != ""){console.log('我吃' + food);food = "";}else{console.log('没有给我食物');}},pushfood : function(myfood){food = myfood; }}return obj; } var person = test() person.pushfood("banana") person.eatfoot()//共用food变量
-
可以实现封装,属性私有化
function Person(name,wife){var prepareWife = "张三";//私有化的属性this.name = name;this.wife = wife;this.divorce = function(){this.wife = prepareWife;}this.changePrepareWife = function(target){prepareWife = target;}this.sayPrepareWife = function(){console.log(prepareWife)} } var person = new Person("李斯","玛丽");//对象只能通过它的divorce方法,访问私有属性,无法直接访问
-
模块化开发,防止污染全局变量
闭包造成的问题:
function test(){var arr = [];for(var i = 0; i<10; i++){arr[i] = function (){document.write(i+" ");}}console.log(arr);return arr;
}
var myarr = test();
for(var j = 0; j<10; j++){myarr[j]();
}
打印10个10
因为arr数组中的每个函数都是`function (){document.write(i+" ");}`这个i在数组返回时,是没有给值的返回出来这个arr在test函数外部,共享闭包内(test内)的变量,所以可以共享到i的值为10 要解决这个问题(使用立即执行函数):
解决思路:里面的函数拿到的数据是立即执行函数的结果,而不是test了,而立即执行函根据循环有多个,所以里面的函数分别在自己的作用域里,互不影响
(function(j){arr[i] = function (){document.write(j+" ");}
}(i))
8、对象、包装类
-
对象
var obj = {}
-
包装类
基本变量增加属性赋值会先执行包装类
var num = 4; num.a = 6 //隐式 new Number().a = 6,所以赋值后对原始值没影响
9、原型、原型链
原型:是function对象的一个属性,它定义了构造函数制造对象的公共祖先,通过构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象
构造方法自带的一个属性prototype
prototype对象中的constructor方法,返回构造器,并且可以手动更改。
new的时候会在构造函数中隐式生成一个this,该this就是创建的对象
原型的增删改查:
-
增,不能在对象中增加,只能在原型中
Person.prototype.lastName = "a" function Person(){} var person = new Person()person.fine = "b"//添加不到原型,只会给person对象增加自己的fine 属性 Person.prototype.fine = "b"//可以添加到原型
-
删,无法删除
-
改,不能在对象中更改,只能在原型中
Person.prototype.lastName = "a" function Person(){} var person = new Person()person.lastName = "b"//更改不了原型,只会给person对象增加自己的lastName属性 Person.prototype.lastName = "b"//可以更改原型
-
查,对象访问自己没有的属性,就会去原型中寻找
原型链:绝大多数对象最终都会继承自Object prototype
使用Object.create(null)创建的对象没有原型
10、call/apply
-
作用,是改变this的指向
function Person(name,age){this.name = name;this.age = age; } var person = new Person('wang',22); var obj = {} Person.call(obj,'zhang',88);//obj会使用person的构造函数创建自己
//类似于java的调用父类 function Person(name, age, sex){this.name = name;this.age = age;this.sex = sex; } function Student(name, age, sex, tel, grade){Person.call(this,name,age,sex);//类似与Java的调用父类构造方法this.tel = tel;this.grade = grade; } var student = new Student('zhang',34,'男',180,2019);
调用toString方法的call形式
Object.prototype.toString.call(obj)
-
区别,后面传的参数形式不一样
Person.apply(this,[name,age,sex]);
apply传参得是数组
11、继承
-
原型链的方式
- 过多的继承了没用的属性
-
借用构造函数(使用call或apply)
- 不能继承构造函数的原型
- 每次构造函数都要多走一个函数
-
共享原型,(子.prototype = 父.prototype)
- 不能随便改动自己的原型
-
圣杯模式
function inherit(Target,Origin){function F(){};F.prototype = Origin.proptype;Target.protetype = new F();Target.prototype.constructor = Target }
//优化结构 var inherit =(function(){var F = function(){};return function(Target,Origin){F.prototype = Origin.proptype;Target.protetype = new F();Target.prototype.constructor = Target;Target.prototype.uber = Origin.proptype; } }());
12、this
- 函数预编译过程,指向window
- 全局作用域里,window
- call/apply,改变this的指向
- obj.func(),func()里面的this指向obj
13 、callee和caller
-
callee
arguments的属性。使用arguments.callee,代表函数的引用,在递归中,如果函数没有名字可以使用这个来代替引用
-
caller
函数的属性,表示在哪个环境调用了该函数(ES5标准模式不让用)
14 、深度克隆需要的技术
- 判断是不是原始值,使用typeof()
- 判断是数组还是对象,使用instanceof,toString,constructor
15、数组
new Array(10)代表长度为10 的稀疏数组(值为undefined)
而new Array(10, 10),代表两个元素为10的数组
js中的数组访问越界的值,返回undefined,不会报错
js中的数组在写越界的数组值时,是可以的,会把数组撑开到要写的长度
数组中的方法:
-
改变原数组
-
push,给数组末尾添加一个或多个元素,参数为添加的元素,返回数组的长度
Array.prototype.push = function(target){this[this.length] = target;this.length++; }
-
pop,将数组末尾元素剪切,不用传参数,并返回
-
shift,将数组开头元素剪切,不用传参数,并返回
-
unshift,给数组开头添加一个或多个元素,参数为添加的元素,返回数组的长度
-
sort,排序数组元素,按照ascill码。参数可以提供一个函数,我们可以自定义排序的规则
-
arr.sort(function(a,b){if(a>b){return 1;//为正时,俩数互换位置}else{return -1;//为负时,位置不变} });
-
-
reverse,反向数组元素
-
splice,切片数组元素,参数(从第几位开始(可以为负数),截取多少位,在切口处添加新数据),返回截取值
-
-
不改变原数组
- concat,连接两个数组
- join,根据传递的string类型参数,将数组元素连接起来,并以字符串返回
- split,这是字符串的方法,以某个字符分割字符串,并以数组返回(和join逆)
- toString,将数组变成字符串
- slice,截取数组,参数三种方式(从该位开始,截取到该位),(从该位截取到最后),()
16、类数组
var obj = {"0":'a',"1":'b',"2":'c',"length":3,"push":Array.prototype.push,"splice":Array.prototype.splice//加上splice属性,打印就和数组一样了
}
类数组条件:
- 属性要为索引(数字)属性
- 必须有length属性
- 最好加上push方法
17 、Error.name值(错误信息)
- EvalError:eval()的使用与定义不一致
- RangeError::数值越界
- ReferenceError:非法或不能识别的引用数值
- SyntaxError:发生语法解析错误
- TypeError:操作数类型错误
- URIError:URI处理函数使用不当
18、ES5严格模式
es5.0严格模式的启动,在页面顶端添加"use strict"
,也可以写在局部
开启后,不在兼容es3.0的一些规则语法,使用全新的es5.0规范
不被支持的语法:
- with
- with用法,with(obj){}会把obj放在AO对象的最顶端,他会更改作用域链。with内部函数的调用者就是obj
- arguments.callee
- func.caller
- 变量赋值前必须声明(es3中,未声明的变量当作window的属性)
- 局部的this必须被赋值,未赋值为undefined,但在全局还是指向window(es3中,预编译时this是window)
- 拒绝重复属性和参数
19、DOM
定义了表示和修改文档所需的方法。用来操作html和xml的集合
对文档中元素的操作:
- 创建节点
- createElement()
- createTextNode()
- createComment()
- createDocumentFragment()
- 节点插入html中
- parent.appendChild(),将创建的元素节点插入容器里,页面已有的元素插入时会被剪切
- parent.insertBefore(a,b)
- 移除节点
- parent.removeChild()
- child.remove()
- 修改节点
- parent.replaceChild(new,origin)
- 获取节点
- getElementById(),IE8以下不区分大小写,并且name属性还可以匹配
- getElementsByTagName(),通用,常用
- getElementsByName(),需注意,只有部分元素的name可生效(表单,表单元素,img,iframe)
- getElementsByClassName(),IE8及以下的版本没有这个方法
- querySelector(),IE7及以下的版本没有这个方法,方法不是实时,结构中添加元素后,不会选中
- querySelectorAll(),IE7及以下的版本没有这个方法,方法不是实时,结构中添加元素后,不会选中
节点类型:
- 元素节点,调用nodeType时返回1
- 属性节点,调用nodeType时返回2
- 文本节点,调用nodeType时返回3
- 注释节点,调用nodeType时返回8
- document,调用nodeType时返回9
- DocumentFragment,调用nodeType时返回11
节点的四个属性:
- nodeName,元素的标签名,以大写形式显示,只读
- nodeValue,Text节点或comment节点的文本内容,可读写
- nodeType,该节点的类型,只读
- attributes,Element节点的属性集合
节点的一个方法:
- Node.hasChildNodes();
遍历节点树(包括所有节点):
- parentNode,父节点
- childNodes,子节点们(什么是节点,不仅仅是元素)
- firstChild,第一个子节点
- lastChild,最后一个子节点
- nextSibling,后一个兄弟节点
- previousSibling,前一个兄弟节点
基于元素节点树的遍历(只包含元素节点):
- parentElement,返回当前元素的父节点(IE不兼容)
- children,只返回当前元素的元素子节点
- node.childElementCount === node.children.length,当前元素节点的子元素节点个数(IE不兼容)
- firstElementChild,返回的是第一个元素的节点(IE不兼容)
- lastElementChild,返回的是最后一个元素的节点(IE不兼容)
- nextElementSibling,返回后一个兄弟节点(IE不兼容)
- previousElementSibling,返回前一个兄弟节点(IE不兼容)
元素节点的属性和方法:
- innerHtml,改变一个元素内部的html内容
- innerText(火狐不兼容)
- textContent(火狐的方法,老版本IE不好用)
- ele.setAttribute()
- ele.getAttribute()
20、DOM树结构
以下是构造函数的继承关系
Node
- Document
- HTMLDocument,(document的构造函数)
- CharacterData
- Text
- Comment
- Element
- HTMLElement
- HTMLHeadElement,(各个元素的构造函数)
- HTMLBodyElement
- …etc
- HTMLElement
- Attr
在构造函数的原型中添加属性,相应的元素中也继承该属性
HTMLBodyElement.prototype.abc = "123"
var body = document.getElementByTagName("body")
//body.abc应该也是123
Document中定义的常用属性
- document.body,指代页面body元素
- document.head,指代页面head元素
- document.documentElement,指代页面html元素
21、js定时器
全局对象window上的方法,内部this指向window
- setInterval(func,1000),指定时间循环执行func,返回的值是定时器的标识
- setTimeout(func,1000),指定时间后执行func一次,返回的值是定时器的标识
- clearInterval(标识),停止定时器
- clearTimeout标识),停止定时器
22、获取窗口属性
查看滚动条滚动距离:
- window.pageXOffset,IE8及以下不兼容
- window.pageYOffset,IE8及以下不兼容
查看滚动条IE8及以下方案:
-
document.body.scrollLeft
-
document.body.scrollTop
-
document.documentElement.scrollLeft
-
document.documentElement.scrollTop
这两个方式使用时相加document.body.scrollLeft + document.documentElement.scrollLeft
,因为兼容性问题,一个可以使用,另一个必然为0
让滚动条滚动:
- scroll(x,y)/scrollTo(x,y),滚动到某个位置
- scrollBy(x,y),滚动到某个位置,会在之前的位置上进行累加
查看窗口尺寸:
- window.innerwidth,IE8及以下不兼容
- window.innerHeight,IE8及以下不兼容
查看窗口尺寸IE8及以下方案:
标准模式和怪异模式的区别,标准模式在html文档顶部添加<!DOCTYPE html>
- document.documentElement.clientWidth,标准模式下,任意浏览器都支持
- document.documentElement.clientHeight,标准模式下,任意浏览器都支持
- document.body.clientWidth,适用于怪异模式下的浏览器
- document.body.clientHeight,适用于怪异模式下的浏览器
判断页面渲染模式:
documentpatMode
//结果为:CSS1Compat,则是标准模式
//结果为:BackCompat,则是怪异模式
查看元素几何尺寸:
- domEle.getBoundingClientRect()(可以被以下替代)
- 兼容性好
- 返回一个对象,里面包含left,right,top,bottem,width,height
- width,height在ie里没有
- 返回结果并不是实时的,数值更改后,返回值不会变,除非重新获取
- domEle.offsetWidth,元素宽
- domEle.offsetHeight,元素高
- domEle.offsetLeft,对于无定位的父级,返回坐标相对文档;相反有定位的父级,返回的坐标相对与定位的父级
- domEle.offsetTop,对于无定位的父级,返回坐标相对文档;相反有定位的父级,返回的坐标相对与定位的父级
返回有定位的父级:
- domEle.offsetParent,返回最近有定位的父级元素,如无,则返回body
23、脚本化CSS
读写元素的CSS属性:
- domEle.style.prop
- 可读写内联样式,没有兼容性
- 遇到float保留字,前面加css(cssFloat)
- 复合属性必须拆解,组合单词变成小驼峰写法
- 写入的值必须是字符串形式
查询计算样式:
- window.getComputedStyle(ele,null)
- 计算样式只读
- 返回计算样式都是绝对值px,没有相对单位
- IE8及以下不兼容
- 参数中的null是用来获取伪元素的样式,可传入after等
查询计算样式IE8以下方案:
- domEle.currentStyle
- 计算样式只读
- 返回的样式不是绝对值
- IE独有属性
24、事件
绑定事件函数:
- ele.onXXX = function(event){}
- 兼容性好,但是一个元素的同一个事件只能绑定一个处理程序
- 基本等于内联属性
- this指向ele元素本身
- ele.addEventListener(事件类型,处理函数,false)
- IE9以下不兼容,可以为一个事件绑定多个处理程序
- this指向ele元素本身
- ele.attachEvent(onXXXX,fn)
- IE独有的,一个事件可以绑定多个处理程序
- this指向window
解除事件处理函数:
- ele.onclick = false或”“或null
- ele.removeEventListener(事件类型,处理函数,fasle)
- ele.detachEvent(onXXXX,fn)
24、事件处理模型
ele.addEventListener(事件类型,处理函数,false)
中的第三个参数决定了是捕获还冒泡
事件执行的那个元素不会冒泡和捕获,冒泡捕获只会发生在父级
- 事件冒泡
- 结构上(非视觉)嵌套关系的元素,会存在事件冒泡功能,即同一事件,自子元素冒泡向父元素(自底向上)
- 事件捕获
- 结构上(非视觉)嵌套关系的元素,会存在事件冒泡功能,即同一事件,自父元素捕获至子元素(自顶向下)
- IE没有捕获事件
如果同一个事件绑定两个处理函数,分别绑定了冒泡和捕获模式,则触发顺序,先捕获,后冒泡
focus,blur,change,submit,reset,select等事件不冒泡
取消事件冒泡:
在事件处理函数里面写如下,则不发生冒泡(evnet为事件处理函数的参数,系统传递 )
- W3C标准event.stopPropagation(),不支持IE9以下
- IE独有event.cancelBubble = true,chrome也支持了
阻止默认事件:
- 默认事件—>表单提交,a标签跳转,右键菜单等
- return false;以对象属性的方式注册的事件才生效
- event.preventDefault();W3C标准,IE9以下不兼容
- event.returnValue = false;兼容IE
事件对象:
- 一般事件对象为event,对于IE是window.event,所以使用event || window.event
- 事件源对象(触发事件的对象)
- event.target,火狐只有
- event.srcElement,IE只有
- chrome浏览器以上两个都有
事件源对象的使用:
外部元素绑定事件,在单击其内部元素时,通过其事件源对象可以知道单击的哪个对象,不用里面每个元素都绑定事件
//优点:
//1、不需要循环所有元素一个一个绑定事件
//2、当有新元素添加时,不需要重新绑定
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><script>var ul = document.getElementsByTagName('ul')[0]ul.onclick = function (e) {console.log(e.target.innerText)}</script>
</body>
25、鼠标事件分类
- click,单击,按下+弹起
- mousedown,按下(移动端touchstart)
- mousemove,移动(移动端touchmove)
- mouseup,弹起(移动端touchend)
- contextmenu,右键菜单
- mouseover,鼠标进入
- mouseout,鼠标移出
- mouseseenter,鼠标进入
- mouseleave,鼠标移出
鼠标左右键的区分,使用事件对象的button属性event.button
- 0,左键
- 1,中键
- 2,右键
click事件只能监听左键,不能监听右键,判断左右用mousedown或mouseup
26、键盘事件分类
- onkeydown
- 可以响应任意键盘按键
- onkeyup
- onkeypress
- 只可以响应字符类(asicll码中)按键
- 可返回asicll码,转换为相应字符
27 、文本类操作事件
- oninput,文本框内容变化就触发
- onfocus,获得焦点触发
- onblur,失去焦点触发
- onchange,获得失去焦点前后内容的改变,才触发,内容不变,不触发
28、窗体类事件
- onscroll,滚动条滚动触发
- onload,页面完全加载完触发,效果慢
29、json
- JSON.parse(),json字符串转json对象
- JSON.stringify(),json对象转json字符串
30、异步加载js
正常js加载是同步的,要等页面加载完再加载,因为js要操作页面,然后有时一些js不操作页面,这时候还是用同步,就显得效率低
异步加载的三种方案:
-
defer,使用方法,给script标签增加属性defer。
- 但要等到dom文档全部解析完才会执行,只有IE能用
- script标签可以引入js,也可以代码写在标签里
-
async,使用方法,给script标签增加属性async。
- 加载完就执行,async只能加载外部脚本,不能写在script标签里
-
(重点)创建script,插入到dom中,加载完毕后callBack
-
var script document.creatElement('script'); script.type = "text/javascript"; script.src = "tools.js";//开始下载js document.head.appendChild(script);//添加到页面,才执行jsscript.onload = function(){//tools加载完后,才能调用里面的方法,不然报错 } //IE中没有load使用readyState script.onreadystatechange = function(){//里面判断readyState的变位情况,做出操作 }
-
31、时间线
- 创建Document元素,开始解析web页面。document.readyState = ‘loading’
- link外部css,创建线程加载,继续解析文档
- script标签js,(没有设置异步属性async等)等待js加载完毕并执行脚本,继续解析文档
- script标签js,(设置了异步属性async等),浏览器创建线程加载,继续解析文档
- 遇到img,正常解析结构,异步加载图片,继续解析文档
- 文档解析完成。document.readyState = ‘interactive’
- 文档解析完成后,所有设置defer的脚本按照顺序执行
- document对象触发DOMContentLoaded事件,标志着由同步脚本执行截断转化为事件驱动阶段
- 当所有的async的脚本加载完成并执行后,img等加载完成后。document.readyState = ‘complete’,window对象触发load事件
- 从此,以异步响应方式处理用户输入、网络事件等
32、正则表达式
两种创建方式:
-
直接量
-
var str = "abcd"; var reg = /abc/i;//i修饰符,代表忽略大小写,也可以不写 reg.test(str)//返回布尔值,表示是否匹配
-
-
new RegExp()
-
var str = "abcd"; var reg = new RegExp("abc","i")//i修饰符,代表忽略大小写,也可以不写 reg.test(str)//返回布尔值,表示是否匹配
-
两个方法:
- reg.test(str),只能确定是否匹配
- str.match(reg),可以把匹配的字符串作为数组返回
修饰符:
- i,忽略大小写的匹配
- g,执行全局匹配(查找所有匹配,并非找到一个停止)
- m,执行多行匹配
方括号:
使用方括号代表一位[0-9],里面的内容是取值范围
元字符:
-
. === 查找单个字符,除了换行和行结束符
-
\w === [0-9A-z_]
-
\W === 非\w
-
\d ===[0-9]
-
\D === 非\d
-
\s === [空格 制表符 回车符 换行符 垂直换行符 换页符]
-
\S ===非\s
-
\b === 单词边界
-
\B === 非单词边界
-
\n === 查找换行符
-
\f === 查找换页符
-
\r === 查找回车符
-
\t === 查找制表符
-
\v === 查找垂直制表符
-
\xxx === 查找八进制数xxx规定的字符
-
\xdd === 查找十六进制数dd规定的字符
-
\uxxxx === 查找以十六进制数xxxx规定的Unicode字符
\数字 === 匹配第几个子表达式相同的内容,子表达式就是圆括号中的
例如:
var str = "aabb"
var reg = /(\w)\1(\w)\2/g
任何区间的匹配使用[\s\S]或[\w\W]等等,加个就是任意多个了*
量词(匹配数量):
- n+ ------> {1,∞}个
- n* ------> {0,∞}个
- n? ------> {0,1}个
- n{X} ------> X个
- n{X,Y} ------> {X,Y}个
- n{X,} ------> {X,∞}个
- n$ ------> 以n结尾的字符串
- ^n ------> 以n开头的字符串
- ?=n ------> 其后紧接着n的字符串
- ?!n ------> 其后没有紧接着n的字符串
RegExp对象属性:
- global,RegExp对象是否具有表示g
- ignoreCase,RegExp对象是否具有表示i
- lastIndex,一个整数,表示开始下一次匹配的字符位置
- multiline,RegExp对象是否具有表示m
- source,正则表达式的源文本
RegExp的对象方法:
- compile,编译正则表达式
- exec,检索字符串中指定的值,返回找到的值,并确定位置
- test,检索字符串中指定的值,返回true或false
支持正则字符串对象方法:
- search,检索与正则相匹配的值,返回匹配位置,匹配不到-1
- match,找到一个或多个正则匹配
- replace,替换与正则表达式匹配的子串,不用正则的话只能替换一个
- split,把字符串分割为字符串数组
例子:
1、将匹配到的aabb调换为bbaa
//小括号内为子表达式
var reg = /(\w)\1(\w)\2/g;
var str = "aabb";
var result = str.replace(reg,"$2$2$1$1")//此处的第二个参数可以引用正则表达式的子表达式,$1为第一个子表达式,$2为第二个//replace第二个参数也可以函数
//$,正则匹配的结果
//$1,第一个子表达式匹配内容
//$2,第二个子表达式匹配内容
var result = str.replace(reg,function($,$1,$2){return $2 +$2 +$1 +$1;})
2、将the-first-name变成小驼峰theFirstName
var reg = /-(\w)/g;
var str = "the-first-name";
var result = str.replace(reg,function($,$1){return $1.toUpperCase();
});
打破贪婪模式,在量词后面加问号?
更多推荐
【javascript】姬成
发布评论