JS正则表达式属性&方法详解
程序员文章站
2022-03-05 07:50:01
...
JavaScript RegExp 对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
定义JavaScript的RegExp对象
在JS中，定义正则表达式有以下两种方式：
- 直接量语法：
/pattern/attributes
var pattern = /^[a-z0-9]{2,16}$/i;
注意：正则表达式作为表达式，不能作为字符串，它的每一个字符都具有特殊含义，不能视为字符串，即定义时不能添加’'或者""；
2. 创建RegExp对象：
var pattern = new RegExp(/^[a-z0-9]{2,16}$/, 'i');
var pattern = new RegExp("^[a-z0-9]{2,16}$", 'i');
语法：
new RegExp(pattern, attributes);
代码：
- 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式（不能添加’'或者""，即不能视为字符串处理）；
- 参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”（注意：attributes 属性要添加’'或者""）；
- g: 全局匹配，匹配字符串中出现的所有模式，匹配单行，不能多行匹配；
- i: 区分大小写的匹配，使用此属性正则匹配时会自动忽略大小写；
- m: 多行匹配。（注意：ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。）
正则匹配的语法规则
方括号
元字符
元字符（Metacharacter）是拥有特殊含义的字符：
量词
注意事项：
^ 符号有两种含义，要分清楚：
- ^ 出现在 [] 内表示：匹配任何不在方括号之间的字符；
- ^ 没有出现在 [] 内，表示以符号 ^ 后面紧随的字符开头的字符串；
正则表达式的属性
- global属性：RegExp 对象是否具有标志 g；
- ignoreCase属性：RegExp 对象是否具有标志 i；
- multiline属性：RegExp 对象是否具有标志 m；
- source属性：正则表达式的源文本；
以上四种属性我们通过一个列子，进行分析：
代码：
<script>
var usernameInput = document.querySelector("#username");
usernameInput.addEventListener("keyup", function(e) {
var pattern = /^[a-z0-9]{2,16}$/ig;
var username = e.target.value;
if (pattern.test(username)) {
// RegExp对象的属性分析
console.log("RegExp 对象是否具有标志i:" + pattern.ignoreCase);
console.log("RegExp 对象是否具有标志g:" + pattern.global);
console.log("RegExp 对象是否具有标志m:" + pattern.multiline);
console.log("RegExp 对象的源文本:" + pattern.source);
// 上边的代码不够强壮，没有判断success、failure在当前情况下是否存在
if (!e.target.classList.contains("success")) {
e.target.classList.add("success");
}
if (e.target.classList.contains("failure")) {
e.target.classList.remove("failure");
}
} else {
if (!e.target.classList.contains("failure")) {
e.target.classList.add("failure");
}
if (e.target.classList.contains("success")) {
e.target.classList.remove("success");
}
}
});
</script>
- lastIndex属性：一个整数，标示开始下一次匹配的字符位置。
代码：
<script type="text/javascript">
// 字符串
var str = "The rain in Spain stays mainly in the plain";
// 正则表达式对象
var patt = new RegExp("ain", "g");
// 遍历字符串匹配正则表达式
for (var i = 0; i < str.length; i++) {
patt.test(str)
document.write("Match found. index now at: " + patt.lastIndex + "<br>");
if (patt.lastIndex == str.length) {
break;
}
}
</script>
lastIndex使用注意事项：
- 重要事项：不具有标志 g 和不表示全局模式的 RegExp 对象不能使用 lastIndex 属性；
- 提示：如果在成功地匹配了某个字符串之后就开始检索另一个新的字符串，需要手动地把这个属性设置为 0。
正则表达式的方法：
- test() 方法：用于检测一个字符串是否匹配某个模式；
代码：
<script>
// test()方法
// 定义字符串
var str = "Time is speed,time means strength.";
// 创建正则表达式
var pattern = new RegExp("time");
// 匹配结果
var result = pattern.test(str);
document.write("Result: " + result);
</script>
- exec() 方法：检索字符串中指定的值；返回找到的值，并确定其位置；
代码：
<script>
// exec()方法
// 定义字符串
var str = "Time is speed,time means strength.";
// 创建正则表达式
var pattern = new RegExp("time", "g");
// 匹配结果
var result;
while ((result = pattern.exec(str)) != null) {
document.write(result);
document.write("<br/>");
document.write("匹配后的位置：" + pattern.lastIndex);
}
</script>
重要事项：如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串，就必须手动地把 lastIndex 属性重置为 0。
- search()方法：检索与正则表达式相匹配的值；
// 注意：要执行忽略大小写的检索，regexp中请追加标志 i。
stringObject.search(regexp);
代码：
<script>
// 注意：要执行忽略大小写的检索，regexp中请追加标志 i。
var str = "Time is speed,time means strength."
// 匹配正则表达式 /time/
document.write(str.search(/time/) + "<br>");
// 匹配正则表达式 /TIME/
document.write(str.search(/TIME/) + "<br>");
// 匹配正则表达式 /TIME/i
document.write(str.search(/TIME/i) + "<br>");
</script>
注意事项：
1.如果没有找到任何匹配的子串，则返回 -1；
2.search() 方法不执行全局匹配，它将忽略标志 g；
3.search() 方法同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。
- match()方法：可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
stringObject.match(searchvalue);
stringObject.match(regexp);
代码：
<script type="text/javascript">
// match()方法
var str = "Hello world!"
document.write(str.match("world") + "<br />");
document.write(str.match("World") + "<br />");
document.write(str.match("worlld") + "<br />");
document.write(str.match("world!") + "<br />");
// 为了使显示效果明显，增加了多个换行
document.write("<br/><br/><br/>");
// 利用全局搜索正则表达式来检索字符串中的所有数字
// 返回值:存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。
var str1 = "1 plus 2 equal 3";
document.write(str1.match(/\d+/g));
</script>
注意：在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，也不声明每个匹配子串的位置。如果需要这些全局检索的信息，可以使用 RegExp.exec()。
- replace() 方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
stringObject.replace(regexp/substr,replacement);
代码：
<script type="text/javascript">
// "NanYang" 替换字符串中的 "TangHe";
var str1 = "Visit TangHe!";
document.write(str1 + "<br/>");
document.write(str1.replace(/TangHe/, "NanYang") + "<br/><br/>");
// 全局替换：每当 "Microsoft" 被找到，它就被替换为 "Java";
var str2 = "Welcome to Microsoft! ";
str2 = str2 + "We are proud to announce that Microsoft has ";
str2 = str2 + "one of the largest Web Developers sites in the world.";
document.write(str2 + "<br/>");
document.write(str2.replace(/Microsoft/g, "Java") + "<br/><br/>");
// 使用 replace() 确保大写字母的正确性。
var str3 = "javascript Tutorial";
document.write(str3 + "<br/>");
document.write(str3.replace(/javascript/i, "JavaScript") + "<br/><br/>");
// "Doe, John" 转换为 "John Doe" ;
var str4 = "Doe, John";
document.write(str4 + "<br/>");
document.write(str4.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1") + "<br/><br/>");
// 所有的花引号替换为直引号
var str5 = '"a", "b"';
document.write(str5 + "<br/>");
document.write(str5.replace(/"([^"]*)"/g, "'$1'") + "<br/><br/>");
// 将把字符串中所有单词的首字母都转换为大写
var str6 = 'aaa bbb ccc';
document.write(str6 + "<br/>");
uw = str6.replace(/\b\w+\b/g, function(word) {
return word.substring(0, 1).toUpperCase() + word.substring(1);
});
document.write(uw);
</script>
注意事项：
1.返回值: 一个新的字符串，是用replacement替换了regexp的第一次匹配或所有匹配之后得到的；
2.
- split() 方法：用于把一个字符串分割成字符串数组。
// 注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
stringObject.split(separator,howmany);
代码：
<script type="text/javascript">
// split()方法
var str = "How are you doing today?";
document.write(str.split(" ") + "<br /><br />");
document.write(str.split("") + "<br /><br />");
document.write(str.split(" ", 3));
</script>
关于JS中的正则表达式的属性和方法就总结到这里了，小白能力有限，可能会有错误和疏漏的地方，还请指教，非常期待可以和小伙伴们一起探讨学习！加油！