js中的正则表达式和字符串方法理解

String类型

字符方法

charAt

以单字符串的形式返回给定位置的那个字符

let stringValue = "hello world";
console.log(stringValue.charAt(1));//"e"

charCodeAt

以字符编码的形式返回给定位置的那个字符

let stringValue = "hello world";
console.log(stringValue.charCodeAt(1));//101

字符串操作方法

concat

类似于使用“+”,

let stringValue = "hello world";
console.log(stringValue.concat(" vue", "!"));//hello world vue!

slice,substr,substring

这三个方法都会返回被操作字符串的一个子字符串，接受的第一个参数指定子字符串开始，第二个参数表示在哪里结束。具体来说。slice()和substring第二个参数指定的是子字符串最后一个字符后面的位置，而substr的第二个参数指定的是返回的字符个数，如果没有传递第二个参数，则将源字符串的末尾作为结束位置。

let stringValue = "hello world";
console.log(stringValue.slice(3))
console.log(stringValue.substring(3))
console.log(stringValue.substr(3))
console.log(stringValue.slice(3, 7))
console.log(stringValue.substring(3, 7))
console.log(stringValue.substr(3, 7))
//运行结果
/*
lo world
lo world
lo world
lo w
lo w
lo worl
*/
console.log(stringValue.slice(-3))
console.log(stringValue.substring(-3))
console.log(stringValue.substr(-3))
console.log(stringValue.slice(3, -4))
console.log(stringValue.substring(3, -4))
console.log(stringValue.substr(3, -4))
//运行结果
/*
rld
hello world
rld
lo w
hel
“”
*/

字符串的位置方法

indexOf() lastindexOf()

返回的是字符串对应字符的参数，indexOf对应的是顺序搜索的，lastindexOf对应的是逆序搜索的。第二个参数是从指定位置开始搜索

console.log(stringValue.indexOf("o"))//4
console.log(stringValue.lastIndexOf("o"))//7
console.log(stringValue.indexOf("o", 6))//7
console.log(stringValue.lastIndexOf("o", 6))//4

trim()

该方法创建一个字符串的副本，删除前置及后缀的所有空格

字符串大小写转换方法

toUpperCase() toLowerCase()

分别是转换成大写和小写

字符串的模式匹配方法

match()

接受一个参数，此参数是正则表达式或者RegExp

let stringValue = "cat, bat, sat, fat";
let pattern = /.at/m;
let matcher = stringValue.match(pattern);
console.log(matcher)
//输出结果
/*
[ 'cat',
  index: 0,
  input: 'cat, bat, sat, fat',
  groups: undefined ]
  */

search()

接受一个参数，此参数是正则表达式或者RegExp,返回字符串第一个匹配项的索引，如果没有找到，返回-1

let stringValue = "cat, bat, sat, fat";
let pattern = /bat/m;
console.log(stringValue.search(pattern))//5

replace()

替换字符串的部分字符的方法
第一个参数为指定的原字符串中的某个字符，这个字符需要被替换，这个字符可以用字符，正则表达式和RegExp对象来表示;第二个参数可以是一个字符串或者一个参数

let stringValue = "cat, bat, sat, fat";
let result1 = stringValue.replace("at", "ond")
let result2 = stringValue.replace(/at/g, "ond")
console.log(result1)//cond, bat, sat, fat
console.log(result2)//cond, bond, sond, fond

第二个参数还可以是特殊字符

字符列表	替换文本
$$	$
$&	匹配整个模式的子字符串。与RegExp.lastMatch的值相同
$’	匹配的子字符串之前的子字符串。与RegExp.leftContent的值相同
$`	匹配的子字符串之后的子字符串。与RegExp.rightContent的值相同
$n	匹配第n个捕获组的子字符串，其中n等于0-9
$nn	匹配第nn个捕获组的子字符串，其中n等于0-99

let stringValue = "cat, bat, sat, fat";
let result1 = stringValue.replace(/(.at)/g, "word($1)")
console.log(result1)//word(cat), word(bat), word(sat), word(fat)

第二个参数还可以是函数,只有一个匹配项的情况下，会向此函数传递三个参数，

1. 模式的匹配项
2. 模式匹配项在字符串中的位置
3. 原始字符串

function htmlEscape(text) {
  return text.replace(/[<>"&]/g, (match, pos, originalText)=>{
    switch (match) {
      case ">":
        return "&gt;"
      case "<":
        return "&lt;"
      case "&":
        return "&amp;"
      case "\"":
        return "&quot;"
    }
  });
}
console.log(htmlEscape("<p class=\"greeting\"> Hello World!</p>"))
//&lt;p class=&quot;greeting&quot;&gt; Hello World!&lt;/p&gt;

split()

用于指定分隔符，将字符串分割成字符串数组,第一个参数为指定的分隔符，第二个参数是指定字符串数组的长度

let colorText = "red, blue, green, yellow";
let colors1 = colorText.split(",");
let colors2 = colorText.split(",", 2);
console.log(colors1)//[ 'red', ' blue', ' green', ' yellow' ]
console.log(colors2)//[ 'red', ' blue' ]

localCompare()

比较两个字符串，并返回下列值：

1. 如果字符串在字母表中排在字符串参数前面，返回-1；反之返回1
2. 相等则返回0

let stringValue = "yellow";
console.log(stringValue.localeCompare("brick"));//1
console.log(stringValue.localeCompare("yellow"))//0
console.log(stringValue.localeCompare("zoo"))//-1

fromCharCode()

String的构造函数，传入多个字符编码，返回字符串

console.log(String.fromCharCode(104, 101, 108, 108, 111))//hello

正则表达式

//其中的pattern部分为正则表达式，flags为标志
let expression = /pattern/flags

标志（flags）

g:表示全局模式
i:表示不区分大小写模式
m:表示多行模式

模式(pattern)

let parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
let url = "http://www.ora.com:80/goodparts?q#fragment"; 
let result = parse_url.exec(url); 
let names = ['url', 'scheme', 'slash', 'host', 'port',
    'path', 'query', 'hash'];
let blanks = ' ';
for (let i = 0; i < names.length; i += 1) {
    document.writeln(names[i] + ':' +
        blanks.substring(names[i].length), result[i]);
} 

这段代码产生的结果如下

url:    http://www.ora.com:80/goodparts?q#fragment
scheme: http
slash:  //
host:   www.ora.com
port:   80
path:   goodparts
query:  q
hash:   fragment

字面量

字面量	意义
^	表示字符串的开始，若在[]中的前缀，表示除后面字面量外的所有字符
（）	表示捕获型分组
(?:…)	表示一个非捕获型分组
后缀？	表示这个分组可选
A-Za-z	表示26个大小写字母（-表示范围）
后缀+	表示会匹配多次
后缀{0，3}	表示会匹配0到3次
\d	表示数字字符
后缀*	表示会被匹配至少0次
后缀+	表示会被匹配至少1次
.	表示匹配除行结束符以外的所有字符
$	表示这个字符串的结束

等价的正则表达式

let pattern1 = /[bc]at/i
let pattern3 = new RegExp("[bc]at", "i")//pattern1 === pattern3 
let pattern2 = /\[bc\]at/
let pattern4 = new RegExp("\\[bc\\]at")//pattern2 === pattern4

RegExp对象的属性

属性	用法
global	如果标识g被使用，值为true
ignoreCase	如果标识i被使用，值为true
lastIndex	下一次exec匹配开始的索引。初始值为0
multiline	如果标识m被使用，值为true
source	正则表达式源码文本

RegExp实例方法

exec()

let text1 = "mom and dad and baby"
let pattern = /mom( and dad( and baby)?)?/gi
console.log(pattern.exec(text1))
/*
[ 'mom and dad and baby',
  ' and dad and baby',
  ' and baby',
  index: 0,
  input: 'mom and dad and baby',
  groups: undefined ]
  */

如果只有一个捕获分组，计实在模式中设置了全局标志，它每次也只会返回一个匹配项。在不设置全局标志的情况下，在同一个字符串上多次调用exce将始终返回第一个匹配项的信息

test()

接受一个字符参数，如果该字符参数和RegExp实例匹配，则返回true,否则返回false

toLocalString(),toString()

两个方法都会返回正则表达式的字面量

RegExp构造函数的属性

长属性名	短属性名	说明
input	$_	最近一次要匹配的字符串
lastMatch	$&	最近一次的匹配项
lastParen	$+	最近一次匹配的捕获组
leftContext	$`	input字符串中lastMatch之前的文本
multiline	$*	布尔值，表示是否所有表达式都使用多行模式‘
rightContext	$’	input字符串中lastMatch之后的文本

let text = "this has benn a short summer"
let pattern = /(.)hort/g
if (pattern.test(text)){
  console.log(RegExp.input)//this has benn a short summer
  console.log(RegExp.lastMatch)//short
  console.log(RegExp.lastParen)//s
  console.log(RegExp.leftContext)//this has been a
  console.log(RegExp.rightContext)//summer
  console.log(RegExp.multiline)//undefined
}