美文网首页
JS内置对象和方法RegExp (正则对象)

JS内置对象和方法RegExp (正则对象)

作者: 小棋子js | 来源:发表于2021-06-28 00:00 被阅读0次

学习最常用的 6个方法

test 检查指定的字符串是否存在
exec 返回查询值
match 得到查询数组
search 返回搜索位置 类似于indexof
replace 替换字符 利用正则替换
split 利用正则分割数组

1) test  检查指定的字符串是否存在
var data = '123123';
var reCat = /123/gi;
console.log(reCat.test(data));  //true
//检查字符是否存在  g 继续往下走  i 不区分大小写

2) exec 返回查询值
var data = '123123,213,12312,312,3,Cat,cat,dsfsdfs,';
var reCat = /cat/i;
console.log(reCat.exec(data));  //Cat

3)match  得到查询数组
var data = '123123,213,12312,312,3,Cat,cat,dsfsdfs,';
var reCat = /cat/gi;
var arrMactches = data.match(reCat)
for (var i=0;i < arrMactches.length ; i++)
{
console.log(arrMactches[i]);   //Cat  cat
}

4) search  返回搜索下标字符位置  类似于indexof
var data = '123123,213,12312,312,3,Cat,cat,dsfsdfs,';
var reCat = /cat/gi;
console.log(data.search(reCat));  //23

5) replace  替换字符  利用正则替换
var data = '123123,213,12312,312,3,Cat,cat,dsfsdfs,';
var reCat = /cat/gi;
console.log(data.replace(reCat,'libinqq'));//123123,213,12312,312,3,libinqq,libinqq,dsfsdfs,

6)split   利用正则分割数组
var data = '123123,213,12312,312,3,Cat,cat,dsfsdfs,';
var reCat = /\,/;
var arrdata = data.split(reCat);
for (var i = 0; i < arrdata.length; i++)
{
console.log(arrdata[i]);
}

手机号中间4个带*

function formatPhone(phone) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}

原理是先匹配前3个数字,将匹配到的值给1,然后匹配中间4个数字,再匹配最后4个数字给2。

手机号码正则表达式验证

function checkPhone(){
    var phone = $('.phone').value;
    if(!(/^1[3456789]\d{9}$/.test(phone))){
        alert("手机号码有误,请重填");  
        return false;
    }
}
或者
function checkPhone(){
    var phone = $('.phone').value;
    if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
        alert("手机号码有误,请重填");  
        return false;
    }
}

下面简单的解释一下:

^1(3|4|5|7|8)\d{9}$

表示以1开头,第二位可能是3/4/5/7/8等的任意一个,在加上后面的\d表示数字[0-9]的9位,总共加起来11位结束。

固定电话号码正则表达式

function checkTel(){
 var tel = $('.tel').value;
if(!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(tel)){
alert('固定电话有误,请重填');
return false;
}
}

身份证正则

//身份证正则表达式(15位)
isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}/; //身份证正则表达式(18位) isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}/;
身份证正则合并:(^\d{15})|(^\d{17}([0-9]|X))
其他正则

提取信息中的网络链接:(h|H)(r|R)(e|E)(f|F) = ('|")?(\w|\|/|.)+('|"| |>)?
提取信息中的邮件地址:\w+([-+.]\w+)
@\w+([-.]\w+)
.\w+([-.]\w+)

提取信息中的图片链接:(s|S)(r|R)(c|C) = ('|")?(\w|\|/|.)+('|"| |>)?
提取信息中的IP地址:(\d+).(\d+).(\d+).(\d+)
提取信息中的中国电话号码(包括移动和固定电话):((\d{3,4})|\d{3,4}-|\s)?\d{7,14}
提取信息中的中国邮政编码:[1-9]{1}(\d+){5}
提取信息中的中国身份证号码:\d{18}|\d{15}
提取信息中的整数:\d+
提取信息中的浮点数(即小数):(-?\d
).?\d+
提取信息中的任何数字 :(-?\d
)(.\d+)?
提取信息中的中文字符串:[\u4e00-\u9fa5]

提取信息中的双字节字符串 (汉字):[^\x00-\xff]*
使用
test()方法在字符串中查找是否存在指定的正则表达式,并返回布尔值,如果存在则返回true,否则返回false。

var pattern = new RegExp('Box','i');
var str = 'box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'This is a box';
alert(pattern.test(str)); //true

JavaScript正则实战(会根据最近写的不断更新)

1、javascript 正则对象替换创建 和用法: /pattern/flags 先简单案例学习认识下replace能干什么

正则表达式构造函数: new RegExp("pattern"[,"flags"]);
正则表达式替换变量函数:stringObj.replace(RegExp,replace Text);

参数说明:

pattern -- 一个正则表达式文本
flags -- 如果存在,将是以下值:
g: 全局匹配
i: 忽略大小写
gi: 以上组合
//下面的例子用来获取url的两个参数,并返回urlRewrite之前的真实Url
var reg=``new RegExp(``"([http://www.qidian.com/BookReader/](http://www.qidian.com/BookReader/))(\\d+),(\\d+).aspx"``,``"gmi"``);

var url=``"[http://www.qidian.com/BookReader/1017141](http://www.qidian.com/BookReader/1017141),20361055.aspx"``;

//方式一,最简单常用的方式

var rep=url.replace(reg,``"$1ShowBook.aspx?bookId=$2&chapterId=$3"``);

alert(rep);

//方式二 ,采用固定参数的回调函数

var rep2=url.replace(reg,``function``(m,p1,p2,p3){``return p1+``"ShowBook.aspx?bookId="``+p3+``"&chapterId="``+p3});

alert(rep2);

//方式三,采用非固定参数的回调函数

var rep3=url.replace(reg,``function``(){``var args=arguments; return args[1]+``"ShowBook.aspx?bookId="``+args[2]+``"&chapterId="``+args[3];});

alert(rep3);

//方法四

//方式四和方法三很类似, 除了返回替换后的字符串外,还可以单独获取参数

var bookId;

var chapterId;

function capText()

{

var args=arguments;

bookId=args[2];

chapterId=args[3];

return args[1]+``"ShowBook.aspx?bookId="``+args[2]+``"&chapterId="``+args[3];

}

var rep4=url.replace(reg,capText);

alert(rep4);

alert(bookId);

alert(chapterId);

//使用test方法获取分组

var reg3=``new RegExp(``"([http://www.qidian.com/BookReader/](http://www.qidian.com/BookReader/))(\\d+),(\\d+).aspx"``,``"gmi"``);

reg3.test(``"[http://www.qidian.com/BookReader/1017141](http://www.qidian.com/BookReader/1017141),20361055.aspx"``);

//获取三个分组

alert(RegExp.$1);

alert(RegExp.$2);

alert(RegExp.$3);

3、常用表达式收集:

"^\\d+$"  //非负整数(正整数 + 0)
"^[0-9]*[1-9][0-9]*$"  //正整数
"^((-\\d+)|(0+))$"  //非正整数(负整数 + 0)
"^-[0-9]*[1-9][0-9]*$"  //负整数
"^-?\\d+$"    //整数
"^\\d+(\\.\\d+)?$"  //非负浮点数(正浮点数 + 0)
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"
//正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"  //非正浮点数(负浮点数 + 0)
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"
//负浮点数
"^(-?\\d+)(\\.\\d+)?$"  //浮点数
"^[A-Za-z]+$"  //由26个英文字母组成的字符串
"^[A-Z]+$"  //由26个英文字母的大写组成的字符串
"^[a-z]+$"  //由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串
"^\\w+$"  //由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"    //email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"  //url
"^[A-Za-z0-9_]*$"。

**正则表达式基础知识**

^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"
$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"
* 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次,/ba+/将匹配ba,baa,baaa
? 匹配前面元字符0次或1次,/ba?/将匹配b,ba
(x) 匹配x保存x在名为$1...$9的变量中
x|y 匹配x或y
{n} 精确匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set),匹配这个集合中的任一一个字符(或元字符)
[^xyz] 不匹配这个集合中的任何一个字符
[\b] 匹配一个退格符
\b 匹配一个单词的边界
\B 匹配一个单词的非边界
\cX 这儿,X是一个控制符,/\cM/匹配Ctrl-M
\d 匹配一个字数字符,/\d/ = /[0-9]/
\D 匹配一个非字数字符,/\D/ = /[^0-9]/
\n 匹配一个换行符
\r 匹配一个回车符
\s 匹配一个空白字符,包括\n,\r,\f,\t,\v等
\S 匹配一个非空白字符,等于/[^\n\f\r\t\v]/
\t 匹配一个制表符
\v 匹配一个重直制表符
\w 匹配一个可以组成单词的字符(alphanumeric,这是我的意译,含数字),包括下划线,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9]
\W 匹配一个不可以组成单词的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>正则</title> 
  </head>
  <body>
<script>
function $(id){
  return document.getElementById(id);
}
window.onload=function(){
  $('btn1').onclick=function(){
    //获取字符串的内容
    var content=$('content').value;
    //获取正则内容
    var reg=eval('/'+$('exp').value+'/gi');
    //获取显示框
    $('result').value=reg.test(content);
  }
  $('btn2').onclick=function(){
    //获取字符串的内容
    var content=$('content').value;
    //获取正则内容
    var reg=eval('/'+$('exp').value+'/gi');
    //获取显示框
    $('result').value='';
    var res;
    while(res=reg.exec(content)){
      $('result').value+=res+'\n';
    }
  }
  $('btn3').onclick=function(){
    //获取字符串的内容
    var content=$('content').value;
    //获取正则内容
    var reg=eval('/'+$('exp').value+'/gi');
    //获取显示框
    $('result').value='';
    var arr=content.search(reg);
    $('result').value+=arr+'\n';
  }
  $('btn4').onclick=function(){
    //获取字符串的内容
    var content=$('content').value;
    //获取正则内容
    var reg=eval('/'+$('exp').value+'/gi');
    //获取显示框
    $('result').value='';
    var arr=content.match(reg);
    for(var i=0;i<arr.length;i++){
      $('result').value+=arr[i]+'\n';
    }
  }
  $('btn5').onclick=function(){
    //获取字符串的内容
    var content=$('content').value;
    //获取正则内容
    var reg=eval('/'+$('exp').value+'/gi');
    var arr=content.replace(reg,'*');
    $('result').value+=arr+'\n';
  }
  $('btn6').onclick=function(){
    //获取字符串的内容
    var content=$('content').value;
    //获取正则内容
    var reg=eval('/'+$('exp').value+'/gi');
    var arr=content.split(reg);
    $('result').value+=arr+'\n';
  }
}
</script>
字符串:<input type='text' id='content' size='50'>
<hr>
正则:<input type='text' id='exp' size='50'>
<hr>
<textarea cols='70' rows='10' id='result'></textarea>
<hr>
<input type='button' id='btn1' value='test'>
<input type='button' id='btn2' value='exec'>
<input type='button' id='btn3' value='search'>
<input type='button' id='btn4' value='match'>
<input type='button' id='btn5' value='replace'>
<input type='button' id='btn6' value='split'>
<div>
<p>1、正则与字符串中的六大方法
<p>正则对象RegExp,基本语法:正则对象.方法(字符串);
<p>test():判断字符串中是否含有指定模式的子串,返回布尔类型的值(true或false)
<p>exec():返回指定模式的字符串

<p>字符串String,基本语法:字符串对象.方法(正则对象);
<p>search() :返回指定模式的字符串在字符串中出现的位置,默认索引从0开始
<p>match() :以数组的形式返回指定模式的字符串
<p>replace() :替换指定模式的字符串
<p>split() :以指定模式的子串分割字符串,返回一个数组

<p>如果需要匹配与正则表达式重名的特殊字符,可以通过\反斜杠进行转义符操作。
<p>/ ()    []  {}  *  +  ?.  ^  $  -(我是点号) \
</div>
<script type="text/javascript">
  // 匹配相邻()
  var str="(()(()(()))";
  var reg=/\(\)/g;
  var arr=str.match(reg);
  for(var i=0;i<arr.length;i++){
    document.write(arr[i]);//()()()
  }
</script>
</body>
</html>

相关文章

  • 正则表达式

    正则表达式图像化工具:www.regexper.com REGEXP对象 JS通过内置对象RegExp支持正则表达...

  • JS内置对象和方法RegExp (正则对象)

    学习最常用的 6个方法 test 检查指定的字符串是否存在exec 返回查询值match 得到查询数组searc...

  • JavaScript的几个高级应用

    正则表达式在JS中的应用 RegExp内置对象详解 MDN-JS-RegExp 中文文档有几个正则符号需要特别注意...

  • 学会正则表达式

    一、RegExp 对象 JavaScript 通过内置对象 RegExp 支持正则表达式有两种方法实例化 RegE...

  • 每天记录一点点之前端 -- 正则表达式

    学习工具 regexper (可图形化正则) RegExp 对象 Javascript通过内置对象RegExp支持...

  • JS正则表达式详解

    RegExp对象实例化 RegExp是JS的正则表达式对象,实例化一个RegExp对象有字面量和构造函数2种方式。...

  • JS内置对象RegExp

    RegExp内置对象 1.创建形式 构造函数 var re = new RegExp('j.*t'); 正则文本标...

  • js内置对象RegExp

    JavaScript中的RegExp对象,就是我们常说的正则表达式对象。该对象主要包含正则表达式模式,以使用正则表...

  • 正则表达式

    1.RegExp对象: 1> RegExp是JavaScript中的一个内置对象(正则表达式)。用于规定在文本中检...

  • 面向对象之继承

    内置对象 js提供的已经定义好的对象 Array,Date,Boolean,RegExp,String,Numbe...

网友评论

      本文标题:JS内置对象和方法RegExp (正则对象)

      本文链接:https://www.haomeiwen.com/subject/wwdkyltx.html