javascript正则表达式与字符串

陌上寒

发布于 2019-04-02 15:05:28

1K0

发布于 2019-04-02 15:05:28

文章被收录于专栏：前端进阶

原文链接

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

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

search

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;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法