专栏首页前端进阶javascript正则表达式与字符串

javascript正则表达式与字符串

原文链接

说到js正则表达式,js的字符串就是一个绕不开的话题 字符串是正则表达的是一种实践 字符串String支持一些支持正则表达式的方法,昨天提到的replace就是其中之一 它们分别是:

  • search()
  • match()
  • split()
  • replace()

search 是最简单的 search,参数是一个正则表达式,返回第一个与之匹配的子串的起始位置,如果找不到匹配的子串,返回-1 举一个?:(参数是正则表达式)

 let a  =  "moshanghan".search(/shang/i)
 console.log(a);//=>2

如果search()的参数不是正则表达式,则首先会通过RegExp构造函数将它转换成正则表达式,search()方法不支持全局检索,因为他忽略正则表达式参数中的修饰符g 举一个?:(参数不是正则表达式)

let b  =  "moshanghan".search('ghan')
console.log(b);//=>6

既然返回第一个与之匹配的子串的起始位置,就不可能支持全局搜索,可以理解

match

从今天起开启对正则表达式的学习,我们在说exec的时候,提到了match和exec的区别,可以点击链接查看。 match()是很常用的字符串正则表达式方法,它的唯一参数就是一个正则表达式,或通过RegExp()构造函数将其转换为正则表达式,返回的是有匹配结果组成的数组,如果这个参数设置了修饰符g,则该方法返回的数组包含字符串中的所有匹配结果 举一个?:(不带修饰符g)

 let c =  "1 plus 2 equals 3".match(/\d+/)
  console.log(c);//=>["1", index: 0, input: "1 plus 2 equals 3", groups: undefined]

(带修饰符g)

  let c =  "1 plus 2 equals 3".match(/\d+/g)
  console.log(c);//=>["1", "2", "3"]

如果这个正则表达式没有设置修饰符g,match()就不会进行全局检索,它只会检索第一个匹配,但即使match()执行的不是全局匹配,它也返回一个数组, 看一个?:

var url = /(\w+):\/\/([\w.]+)\//
var text = "欢迎访问我的博客https://www.qdtalk.com/"
var res = text.match(url)
console.log(res);//=>["https://www.qdtalk.com/", "https", "www.qdtalk.com", index: 8, input: "欢迎访问我的博客https://www.qdtalk.com/", groups: undefined]
console.log(res[0]);//=>https://www.qdtalk.com/
console.log(res[1]);//=>https
console.log(res[2]);//=>www.qdtalk.com

在这种情况下,数组的第一个元素就是匹配的字符串,剩下的元素则是正则表达式中用用圆括号括起来的子表达式, 所以 如果match()返回一个数组a, 那么a[0]存放的是完整的匹配 a[1]存放的是与第一个用圆括号括起来的表达式相匹配的子串, 以此类推,为了和方法replace()保持一致,a[n]存放就是$n的内容

split

字符串的split()很常用了 split() 方法用于把一个字符串分割成字符串数组。 我们经常这么用

let a  = "陌,上,寒"
console.log(a.split(','));//=>["陌", "上", "寒"]
let b = "陌上寒"
console.log(b.split('陌上寒'));//=>["", ""]

它有个反方法join(),是数组的方法,

let a = ["陌", "上", "寒"]
console.log(a.join(',')); //=> 陌,上,寒

split()其实是有两个参数的,

  • 第一个是必选项:支持字符串或者正则表达式,从该参数指定的地方分割 当前字符串
  • 第二个是可选项:该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
let a  = "陌上寒"
console.log(a.split('陌上寒',2));//=>["陌", "上"]

//支持正则作为第一个参数
let b  = "hello world"
console.log(b.split(/\s+/));//=>["hello", "world"]

replace

replace()在昨天已经讲过了,简单回顾一下 两个参数:

  • 参数1:可以是字符串,也可以是正则表达式
  • 参数2:可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。

补充: 正则表达式中使用圆括号括起来的子表达式是带有从左到右的索引编号的,而且正则表达式会记忆与每个子表达式匹配的文本,如果在替换字符串中出现了$加数字,那么replace()将用于与指定的子表达式相匹配的文本来替换这两个字符($+数字) 举个?:

var name = '"a", "b"," dd"';
var aa = name.replace(/"([^"]*)"/g, "`$1`");
console.log(aa); //=>`a`, `b`,` dd`

实战演练

1、给一个连字符串例如:get-element-by-id转化成驼峰形式。

var str = "get-element-by-id";
var reg = /-\w/g; // 匹配中划线以及之后的一个字符,全局匹配
console.log(str.replace(reg,function($0){
    return $0.slice(1).toUpperCase(); // 匹配到到是-e -b -i 形式截取后一个字符转成大写 
}));//=>getElementById

2、写一个少于 80 字符的函数,判断一个字符串是不是回文字符串 回文字符串=>“回文串”是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就是回文串。

function isPalindrome(str) {
 str = str.replace(/\W/g, '').toLowerCase();
 return (str == str.split('').reverse().join(''));
}

3、js 实现一个函数 获得url参数的值

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Bootstrap4如何动态切换主题

    bootstrap4有个网站叫做bootswatch(文末给出链接),其中已经设计了一些很美的主题:

    benny
  • angular采用注释进行文档编写

    先加载 Dgeni 所需要的包依赖。下一步,需要通过配置来告知dgeni如何生成我们的文档。

    用户1437675
  • 请尊重别人的劳动成果

    我已经很多次看到别人转载我的文章但是没有标注出处的,但起码有转载类似的字样,但下面这位貌似有点过份了:

    IT晴天
  • 微信小程序之启动页的重要性

    启动页在APP中是个很常见的需求,为什么对于小程序来说也非常重要呢?首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤,到最后为什么要加启动页,看完你就明...

    猿天地
  • angular打包报错内存溢出 nodejs 执行失败报错 “JavaScript heap out of memory” 的解决办法

    报错信息很直观地指出是内存溢出了。是什么导致了内存溢出呢?其根本原因在于 nodejs 默认限制了最大可使用的内存大小。

    用户1437675
  • 微信小程序登录那些事

    最近团队在开发一款小程序,都是新手,一边看文档,一边开发。在开发中会遇到各种问题,今天把小程序登录这块的流程整理下,做个记录。

    猿天地
  • 为什么越来越少的人用 jQuery?

    最早期的开发,大多都使用jQuery,它给我们带来了很多的便利:快速选取元素,方便操作DOM元素的API,各个浏览器之间完美的兼容性,链式操作,动画、ajax...

    奋斗蒙
  • 三维世界中相机的位置参数

    上篇文章带读者完成了一个3d弹弹球的加强版,读者顺便了解了下灯光和阴影的基本用法,关于相机的位置参数问题,我们在前文只是简单提过,本篇文章,想和读者分享下相机的...

    江南一点雨
  • 探索HTTP传输中gzip压缩的秘密

    我们给某人发送邮件时,我们在传输之前把自己的文件压缩一下,接收方收到文件后再去解压获取文件。这中操作对于我们来说都已经司空见惯。我们压缩文件的目的就是为了把传输...

    黄泽杰
  • Netty 之 DefaultPromise 源码解析

    promise 是可写的 future, 因为 future 不支持写操作接口,netty 使用 promise 扩展了 future, 可以对异步操作结果进行...

    java404

扫码关注云+社区

领取腾讯云代金券