JavaScript 正则表达式用法详解:创建、标志与字符串替换
本文详解 JavaScript 中正则表达式的两种创建方式:显式构造函数与隐式字面量,并深入解析 g、i、m 标志的含义及转义规则。通过实例展示如何利用 test 方法验证匹配,以及使用 replace 方法结合正则进行复杂的 HTML 标签清理与字符串替换操作。
JavaScript 正则表达式基础与创建方式
JavaScript 中正则表达式的应用主要包括模式匹配、验证以及字符串替换等场景。
以下代码演示了如何使用正则表达式进行基础验证:
function checkreg(myreg,mytext)
{
if(myreg.test(mytext)
{
alert("ok");
return true;
}
else
{
return false;
}
} //另一种写法
代码如下:
function checkreg(myreg,mytext)
{
var pattern = myreg; //或者 var pattern = new RegExp(myreg,"gi");
if(pattern.test(mytext))
{
alert("ok");
}
} RegExp 构造函数与字面量详解
使用RegExp的显式构造函数,语法为:new RegExp("pattern"[,"flags"])。
使用RegExp的隐式构造函数,采用纯文本格式:/pattern/[flags]。
pattern部分为要使用的正则表达式模式文本,是必须的。在第一种方式中,pattern部分以JavaScript字符串的形式存在,需要使用双引号或单引号括起来;在第二种方式中,pattern部分嵌套在两个“/”之间,不能使用引号。
正则表达式标志 g、i、m 的作用
flags部分设置正则表达式的标志信息,是可选项。如果设置flags部分,在第一种方式中,以字符串的形式存在;在第二种方式中,以文本的形式紧接在最后一个“/”字符之后。flags可以是以下标志字符的组合。
g是全局标志。如果设置了这个标志,对某个文本执行搜索和替换操作时,将对文本中所有匹配的部分起作用。如果不设置这个标志,则仅搜索和替换最早匹配的内容。
i是忽略大小写标志。如果设置了这个标志,进行匹配比较时,将忽略大小写。
m是多行标志。如果不设置这个标志,那么元字符“^”只与整个被搜索字符串的开始位置相匹配,而元字符“$”只与被搜索字符串的结束位置相匹配。如果设置了这个标志,“^”还可以与被搜索字符串中的“\n”或“\r”之后的位置(即下一行的行首)相匹配,而“$”还可以与被搜索字符串中的“\n”或“\r”之后的位置(即下一行的行尾)相匹配。
由于JavaScript字符串中的“\”是一个转义字符,因此,使用显式构造函数创建RegExp实例对象时,应将原始正则表达式中的“\”用“\\”替换。
onkeyup="value=value.replace(/[^0-9\.]/g,'');" //正则表达式还可以用来替换字符串。
利用正则表达式进行字符串替换与清理
下面是本站编辑特别增加的一些:
代码如下:
function cleanAndPaste( html ) {
html = html.replace(/<\/?SPAN[^>]*>/gi, "" );
html = html.replace(/<(\w[^>]*) class=([^ |>]*)([^>]*)/gi, "<$1$3") ;
html = html.replace(/<(\w[^>]*) style="([^"]*)"([^>]*)/gi, "<$1$3") ;
html = html.replace(/<(\w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3") ;
html = html.replace(/<\\?\?xml[^>]*>/gi, "") ;
html = html.replace(/<\/?\w+:[^>]*>/gi, "") ;
html = html.replace(/ /, " " );
insertHTML( html ) ;
}上面是用正则实现的替换代码,大家一定要学会这个了,用的比较多。更多文章可以参考本站的正则表达式栏目。
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
