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)
第二个参数还可以是函数,只有一个匹配项的情况下,会向此函数传递三个参数,
- 模式的匹配项
- 模式匹配项在字符串中的位置
- 原始字符串
function htmlEscape(text) {
return text.replace(/[<>"&]/g, (match, pos, originalText)=>{
switch (match) {
case ">":
return ">"
case "<":
return "<"
case "&":
return "&"
case "\"":
return """
}
});
}
console.log(htmlEscape("<p class=\"greeting\"> Hello World!</p>"))
//<p class="greeting"> Hello World!</p>
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
- 相等则返回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
}