JavaScript属性及正则表达式

2021/7/17 22:06:05

本文主要是介绍JavaScript属性及正则表达式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

  • offset、client、scroll属性
    • offset
    • client
    • scroll
  • 正则表达式
    • 什么是正则表达式
    • 正则表达式的特点
    • 正则表达式的创建
    • 正则表达式的检验
    • 正则表达式的修饰符
      • 模式修饰符
      • 边界符
      • 预定义符
      • 转义特殊字符
      • 字符类
      • 字符组合
      • 取反符
      • 量词符
      • 括号字符
    • 正则表达式的优先级
    • String类中的方法
      • match方法
      • search方法
      • split方法
      • replace方法

offset、client、scroll属性

offset

offset:偏移量,利用offset可以动态的获取元素在页面中的位置信息、大小信息。

  • offsetLeft:返回元素相对其带有定位的父元素左边框的偏移
  • offsetTop:返回元素相对其带有定位的元素上方的偏移
  • offsetWidth:返回自身的宽度(包括padding、边框和内容区域的宽度),注意返回数值不带单位
  • offsetHeight:返回自身的高度(包括padding、边框和内容区域的高度),注意返回数值不带单位
  • offsetParent:返回作为该元素带有定位元素的父级元素(如果父级都没有定位则返回body)
    在这里插入图片描述

client

client:客户端,通过client可以获取元素在浏览器可视区的相关信息。

  • clientLeft: 返回元素左边框的大小
  • clientTop:返回元素上边框的大小
  • clientWidth:返回自身的宽度(包含padding),内容区域的宽度(不含边框),注意返回数值不带单位
  • clientHeight:返回自身的高度(包含padding),内容区域的高度(不含边框),注意返回数值不带单位
    client

scroll

scroll:滚动条

  • scrollHeight:返回元素的整体高度
  • scrollWidth:返回元素的整体宽度
  • scrollTop:返回元素上边缘与试图之间的距离
  • scrollLeft:返回元素左边缘与试图之间的距离
    scroll

正则表达式

什么是正则表达式

正则表达式:是一种描述字符串结构的语法规则,是用于匹配字符串中字符组合的模式,同时正则表达式也是对象。

正则表达式的特点

  • 正则表达式的灵活性
  • 逻辑性和功能性非常强
  • 可以迅速的用极简单的方式达到字符串的复杂控制

正则表达式的创建

var 变量名 = /表达式/
	   
var 变量名 = new RegExp(/表达式/)

正则表达式的检验

test( )方法用来检测字符串是否符合正则表达式。

正则表达式的修饰符

模式修饰符

 /表达式/[模式修饰符]
  • 模式修饰符是可选的,用于进一步对正则表达式进行设置

正则表达式

边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置。
边界符

预定义符

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

转义特殊字符

转义字符:“\” 通过‘\’可以将正则表达式中的修饰符、边界符、预定义符等转换为普通字符。

字符类

字符类:是一个字符集,匹配相应字符,它就会找到该匹配项。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

字符组合

如果允许用户输入英文字母(不区分大小写)、数字、短横线 -、下划线_的正则表达式为:

var reg =  /^[a-zA-Z0-9_-]$/

取反符

当“ [ ] ”和“ ^ ”结合使用,称为取反符

量词符

量词符:用来设定某个模式出现的次数。

在这里插入图片描述

括号字符

  • 改变限定符的范围
catch|er  --> 能够匹配的是:catch 、er
		  
cat(ch|er) --> 能够匹配的是: catch、cater
  • 使用小括号可以进行分组,当小括号后面有量词符时,就表示对整个组进行操作
abc{2} --> 能够匹配的是:abcc
			 
a(bc){2} --> 能够匹配的是:abcbc

正则表达式的优先级

在这里插入图片描述

String类中的方法

match方法

match( ):根据正则匹配出符合要求的内容并保存在数组中,返回的是数组,匹配失败返回false。

search方法

search( ):方法可以返回指定模式的子串在字符串首次出现的位置,返回的是索引。

split方法

split( ):用于根据指定的分隔符将一个字符串分割成字符串数组,其分割后的字符串数组中不包括分隔符,也可以指定分割次数。

replace方法

replace( ):用于替换字符串,用来操作的参数可以是一个字符串或正则表达式。



这篇关于JavaScript属性及正则表达式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程