资讯专栏INFORMATION COLUMN

正则表达式

Dean / 3707人阅读

摘要:正则表达式产生回溯的地方贪婪量词前面的匹配的是,后面的匹配的是惰性量词惰

查看原文站点,更多扩展内容及更佳阅读体验!
查看原文:正则表达式
正则表达式
正则表达式是匹配模式,要么匹配字符,要么匹配位置。
字符匹配 两种模糊匹配

正则表达式能实现模糊匹配

模糊匹配,有两个方向上的模糊:横向和纵向

横向模糊匹配

横向模糊指的是,一个正则可匹配的字符串的长度不是固定的

实现方式是使用量词。{m,n},表示连续出现最少m次,最多n

/ab{2,5}c/匹配:第一个字符是a,接下来是25个字符b,最后是c
var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log(string.match(regex));
//[ "abbc", "abbbc", "abbbbc", "abbbbbc" ]
纵向模糊匹配
纵向模糊,一个正则匹配的字符串,具体到某一位字符时,它可以不是某个确定的字符,可以有多种可能

实现方式是使用字符组。[abc],表示该字符可以是abc中的任何一个。

var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log(string.match(regex));
//[ "a1b", "a2b", "a3b" ]
字符组
虽然叫字符组(字符类),但只是匹配其中一个字符。[abc]表示匹配一个字符,它可以是abc
范围表示法
字符组里的字符比较多,可以使用范围表示法。

[123456abcdefGHIJKLM]可以写成[1-6a-fG-M]。用连字符-来省略和简写。

匹配a-z这三者中任意一个字符,可以写成[-az][a-z]。要么放在开头,要么放在结尾,要么转义。

排除字符组

纵向模糊匹配某位字符不能是abc

[^abc]表示一个除abc之外的任意一个字符。字符组的第一位放^(脱字符),表示求反的概念。

常见的简写形式

d就是[0-9]。表示一位数字。digit

D就是[^0-9]。表示除数字外的任意字符

w就是[0-9a-zA-Z]。表示数字、大小写字母和下划线。word

W就是[^0-9a-zA-Z]。非单词字符

s就是[ v f]。表示空白符,包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。space

S就是[^ v f]。非空白符

.就是[^ u2028u2029]。通配符,表示所有任意字符。

匹配任意字符,可以使用[dD][wW][sS][^]中任意一个。
量词
量词也称重复。{m,n}
简写形式

{m,} 表示至少出现m

{m} 等价于{m,m},表示出现m

? 等价于{0,1},表示出现或不出现

+ 等价于{1,},表示出现至少一次。

* 等价于{0,},表示出现任意次,有可能不出现。

贪婪匹配和惰性匹配
var regex = /d{2,5}/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex));
//[ "123", "1234", "12345", "12345" ]

贪婪匹配,就会尽可能多的匹配。

惰性匹配,就会尽可能少的匹配。

var regex = /d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex));
//[ "12", "12", "34", "12", "34", "12", "34", "56" ]

/d{2,5}?/g 表示25次都行,当2个就够的时候,不再往下匹配。

通过在量词后面加?就能实现惰性匹配,所有的惰性匹配情形

{m,n}?

{m,}?

??

+?

*?

.* 是贪婪模式

.*?是惰性模式

多选分支

一个模式可以实现横向和纵向模糊匹配。而多选分支可以支持多个子模式任选其一。

(p1|p2|p3)其中p1p2p3是子模式,用|(管道符)分隔,表示其中任何一个。

var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log(string.match(regex));
//[ "good", "nice" ]
var regex = /good|goodbye/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["good"]
var regex = /goodbye|good/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["goodbye"]

以上得到的结果各不相同,分支结构也是惰性的,即当前面的匹配好了,后面的不再尝试

案例分析 匹配16进制颜色值

要求匹配

#ffbbad
#Fc01DF
#FFF
#ffE

分析

表示一个16进制字符,可以用字符组[0-9a-fA-F]

其中字符可以出现36次,需要是用量词和分支结构

使用分支结构时,需要注意顺序

var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log(string.match(regex));
//[ "#ffbbad", "#Fc01DF", "#FFF", "#ffE" ]
匹配时间

要求匹配

23:59
02:07

分析

4位数字,第一位数字可以是[0-2]

当第1位是2时,第2位可以是[0-3],其他情况第2位是[0-9]

3位数字是[0-5],第4位是[0-9]

var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/g;
要求匹配7:9,时分前面的0可以省略。
var regex = /^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$/g;
var string = "7:9";
console.log(regex.test(string));
//true
匹配日期

要求匹配 2017-06-10

分析

,四位数字即可[0-9]{4}

,共12个月,分两种情况01、02、...10、11、12(0[1-9]|1[0-2])

,最大31天,可用(0[1-9]|[12][0-9]|3[01])

var regex = /^[0-9]{4}-(0[0-9]|1[0-2])-(0[0-9]|[12][0-9]|3[01])$/g;
console.log(regex.test("2017-10-20"));
//true
window操作系统文件路径
F:studyjavascript
egex
egular expression.pdf
F:studyjavascript
egex
F:studyjavascript
F:

分析

整体模式是:盘符:文件夹文件夹文件夹

其中匹配F:,需要使用[a-zA-Z]:,其中盘符不区分大小写,注意字符需要转移

文件名或文件夹名,不能包含一些字符字符,此时需要排除字符组[^:*|"? /]来表示合法字符。不能为空名,至少有一个字符,也就是要使用量词+

匹配文件夹,可用[^:*<>|"? /]+

另外文件夹,可以出现任意次。也就是([^:*<>|"? /]+)*。其中括号提供子表达式。

路径的最后一部分可以是文件夹,没有,因此需要添加([^:*<>|"? /]+)?

var regex = /^[a-zA-Z]:([^:*<>|"?
/]+)*([^:*<>|"?
/]+)?$/g;
匹配id
要求从
中提取出id="container"
var regex = /id=".*?"/;
var string = "
"; console.log(string.match(regex)[0]); //id="container"
位置匹配
在ES5中共有6个锚字符
^$B(?=p)(?!p)
$^

^(脱字符)匹配开头,在多行匹配中匹配行开头

$(美元符号)匹配结尾,在多行匹配中匹配结尾

把字符串的开头和结尾用#替换
var result = "hello".replace(/^|$/g, "#");
console.log(result);
//#hello#
多行匹配模式
var result = "I
love
javascript".replace(/^|$/gm, "#");
console.log(result);
//#I#
// #love#
// #javascript#
B
是单词边界,具体就是wW之间的位置,也包括wW之间的位置,也包括w$之间的位置

文件名是[JS] Lesson_01.mp4中的

var result = "[JS] Lesson_01.mp4".replace(//g, "#");
console.log(result);
//[#JS#] #Lesson_01#.#mp4#
(?=p)(?!p)

(?=p),其中p是一个子模式,即p前面的位置

(?=l),表示l字符前面的位置

var result = "hello".replace(/(?=l)/g, "#");
console.log(result);
//he#l#lo
(?!p)(?=p)的反向操作
var result = "hello".replace(/(?!l)/g, "#");
console.log(result);
//#h#ell#o#
分别是正向先行断言和反向先行断言,具体是(?<=p)(?

(?=p)就是p前面的那个位置

位置的特性
var result = /^^hello$$$/.test("hello");
console.log(result); 
// => true
案例 不匹配任何东西的正则
/.^/
数字的千位分隔符表示法

12345678,变成12,345,678

使用(?=d{3}$)
var result = "12345678".replace(/(?=d{3}$)/g, ",");
console.log(result);
//12345,678
逗号出现的位置,要求后面3个数字一组,也就是d{3}至少出现一次

可以使用量词+

var result = "12345678".replace(/(?=(d{3})+$)/g, ",");
console.log(result);
//12,345,678
匹配其他案例

匹配位置不是开头(?!^)

var string1 = "12345678";
var string2 = "123456789";
var reg = /(?!^)(?=(d{3})+$)/g;
var result1 = string1.replace(reg, ",");
console.log(result1);
//12,345,678
var result2 = string2.replace(reg, ",");
console.log(result2);
//123,456,789
验证密码问题

密码长度6-12位,由数字、小写字符和大写字母组成,但必须至少包括2种字符。

简化

不考虑“但至少包括2种字符”这个条件
var reg = /^[0-9A-Za-z]{6,12}$/;

判断是否含有某一种字符

如果要求必须包含数字,可以使用(?=.*[0-9])
var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

同时包含具有两种字符

同时包含数字和小写字母,可以用(?=.*[0-9](?=.*[a-z]))
var reg = /(?=.*[0-9])(?=.*[a-z])^(0-9A-Za-z){6,12}$/;

同时包含数字和小写字母

同时包含数字和大写字母

同时包含小写字母和大写字母

同时包含数字、小写字母和大写字母

var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;
括号的作用

括号提供分组

引用某个分组,有两种情形:在JS中引用,在正则表达式中应用

分组和分支结构 分组

/a+/匹配连续出现的a,要匹配连续出现的ab时,需要使用/(ab)+/

括号提供分组功能,使量词+作用于ab这个整体

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex));
//[ "abab", "ab", "ababab" ]
分支结构

多选分支结构(p1|p2)中括号的作用是提供了子表达式的所有可能

I love JavaScript
I love Regular Expression
var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true
引用分组

括号的重要作用,可以进行数据提取,以及更强大的替换操作

匹配日期yyyy-mm-dd

提取数据

提取出年、月、日
var regex = /(d{4})-(d{2})-(d{2})/;
var string = "2018-06-18";
console.log(string.match(regex));
//[ "2018-06-18", "2018", "06", "18", index: 0, input: "2018-06-18" ]
match返回的一个数组,第一个元素是整体匹配结果,然后是各个分组(括号)匹配的内容,然后是匹配下标,最后是输入的文本。(正则是否有修饰符gmatch返回的数组格式是不一样)

可以使用正则对象的exec方法

可以使用构造函数的全局属性$1$9来获取
var regex = /(d{4})-(d{2})-(d{2})/;
var string = "2017-06-12";

regex.test(string); // 正则操作即可,例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

替换

yyyy-mm-dd格式,替换成mm/dd/yyyy
var regex = /(d{4})-(d{2})-(d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"
其中replace中第二个参数用$1$2$3指代相应的分组。等价于var regex=/(d{4})-(d{2})-(d{2})/
反向引用

写一个正则支持匹配以下三种格式:

2016-06-12
2016-06-12
2016.06.12

要求分割符前后一致,使用反向引用

var regex = /d{4}(-|/|.)d{2}1d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false

1,表示的引用之前的分组(-|/|.)。不管它匹配到什么(比如-),1都匹配那个同样的具体某个字符

23分别指代第二个和第三个分组

括号嵌套

以左括号(开括号)为准
var regex = /^((d)(d(d)))1234$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

正则匹配模式

第一个字符是数字,比如说1,

第二个字符是数字,比如说2,

第三个字符是数字,比如说3,

接下来的是1,是第一个分组内容,那么看第一个开括号对应的分组是什么,是123,

接下来的是2,找到第2个开括号,对应的分组,匹配的内容是1,

接下来的是3,找到第3个开括号,对应的分组,匹配的内容是23,

最后的是4,找到第3个开括号,对应的分组,匹配的内容是3。

引用不存在的分组

反向引用,引用前面的分组,在正则里引用了不存在的分组,正则不会报错,只是匹配反向引用的字符本身
非捕获分组

前面出现的分组,都会捕获它们匹配的数据,以便后续引用,因此也称它们是捕获型分组

非捕获分组?:p

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex));
//[ "abab", "ab", "ababab" ]
案例 字符串trim方法模拟
trim方法是去掉字符串的开头和结尾的空白符

第一种,匹配到开头和结尾的空白符,然后替换成空白符

function trim(str) {
    return str.replace(/^s+|s+$/g, "")
}

第二种,匹配整个字符串,然后用引用来提取出相应的数据

function trim(str) {
    return str.replace(/^s*(.*?)s*$/g, "$1");
}
这里使用了惰性匹配*?,不然也会匹配最后一个空格之前的所有空格
将每个单词的首字母转换成大写
function titleize(str) {
    return str.toLowerCase().replace(/(?:^|s)w/g, function (c) {
        return c.toUpperCase();
    })
}
console.log(titleize("my name is epeli"));
//My Name Is Epeli
思路是找到每个单词的首字母,这里不适用非捕获匹配也是可以的
驼峰化
function camelize(str) {
    return str.replace(/[-_s]+(.)?/g, function (match, c) {
        return c ? c.toUpperCase() : "";
    })
}
console.log(camelize("-moz-transform"));
//MozTransform
其中分组(.)表示首字母。单词的界定是,前面的字符可以是多个连字符、下划线以及空白符。

正则后面的的目的,是为了应对str尾部的字符可能不是单词字符。

中划线化
驼峰化的逆过程
function dasherize(str) {
    return str.replace(/([A-Z])/g,"-$1").replace(/[-_s]+/g,"-").toLowerCase();
}
console.log(dasherize("MozTransform"));
//-moz-transform
html转义和反转义 匹配成对标签

要求匹配

regular expression

laoyao bye bye

不匹配

wrong!</p>
</pre>

<p>匹配一个开标签,使用正则<b><[^>]+></b>
</p>
<p>匹配一个闭标签,使用<b></[^>]+></b>
</p>

<pre>要求匹配成对标签,需要使用反向引用</pre>
<pre>var regex = /<([^>]+)>[dD]*</1>/;
var string1 = "<title>regular expression";
var string2 = "

laoyao bye bye

"; var string3 = "wrong!</p>"; console.log(regex.test(string1)); // true console.log(regex.test(string2)); // true console.log(regex.test(string3)); // false </pre> <p>其中开标签<b><[^>]+></b>改成<b><([^>]+)></b>,使用括号的目的是为了后面使用反向引用,而提供分组</p> <p>闭标签使用了反向引用<b></1></b> </p> <p> <b>[dD]</b>这个字符是数字或不是数字,也就是匹配任意字符</p> <b>正则表达式回溯法</b> <b>没有回溯的匹配</b> <pre>当目标字符串是<b>abbbc</b>时,就没有所谓的“回溯”。</pre> <b>有回溯的匹配</b> <pre>如果目标字符串是<b>abbc</b>,中间就有回溯</pre> <b>常见的回溯形式</b> <p>回溯法也称试探法,基本思想:从问题的某一种状态(初始状态)出发,搜索从这种状态出发所能达到的所有“状态”,当一条路走到“尽头”的时候,再后退一步或若干步,从另一种可能状态出发,继续搜索,直到所有的路径(状态)都试探过。这种不断前进、不断回溯寻找解的方法,称作“回溯法”。</p> <p>本质上就是深度优先搜索算法。其中退到之前的某一步这个过程,成为“回溯”。</p> <p><strong>正则表达式产生回溯的地方</strong></p> <b>贪婪量词</b> <pre>var string = "12345"; var regex = /(d{1,3})(d{1,3})/; console.log(string.match(regex)); //[ "12345", "123", "45", index: 0, input: "12345" ] </pre> <pre>前面的<b>d{1,3}</b>匹配的是<b>123</b>,后面的<b>d{1,3}</b>匹配的是<b>45</b> </pre> <b>惰性量词</b> <pre>惰性量词就是在贪婪量词后面加个问好。表示尽可能少的匹配。</pre> <pre>var string = "12345"; var regex = /(d{1,3}?)(d{1,3})/; console.log( string.match(regex) ); // => ["1234", "1", "234", index: 0, input: "12345"] </pre> <p>其中<b>d{1,3}?</b>只匹配到一个字符<b>1</b>,而后面的<b>d{1,3}</b>匹配了<b>234</b> </p> <p>虽然惰性量词不贪婪,但也会有回溯现象。</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000015333125?w=1760&h=432");</script></p> <b>分支结构</b> <pre>分支也是惰性的,比如<b>/can|candy/</b>,去匹配字符串<b>candy</b>,得到的结果是<b>can</b>,因为分支会一个一个尝试,如果前面的满足,后面就不会再试验。<br>分支结构,可能前面的子模式会形成了局部匹配,如果接下来表达式整体不匹配,仍会继续尝试剩下的分支。</pre> <b>正则表达式的拆分</b> <b>结构和操作符</b> <pre>在正则表达式中,操作符都体现在结构中,即由特殊字符和匹配字符所代表的一个特殊整体。</pre> <p><strong>JS正则表达式中,都有哪些结构?</strong></p> <p>字符字面量、字符组、量词、锚字符、分组、选择分支、反向引用</p> <p><strong>具体含义</strong></p> <p> <p><strong>字面量</strong>,匹配一个具体字符,包括不用转义的和需要转义的。</p> <p>比如<b>a</b>匹配字符<b>a</b>,<b> </b>匹配换行符,<b>.</b>匹配小数点</p> </p> <p> <p><strong>字符组</strong>,匹配一个字符,可以是多种可能之一,</p> <p>比如<b>[0-9]</b>,表示匹配一个数字,<b>d</b>是简写形式。</p> <p>另外还有反义字符组,表示可以是除了特定字符之外任何一个字符,比如<b>[^0-9]</b>表示一个非数字字符,也有<b>D</b>的简写形式</p> </p> <p> <p><strong>量词</strong>,表示一个字符连续出现,比如<b>a{1,3}</b>表示<b>a</b>字符连续出现3次。</p> <p>常见简写形式,<b>a+</b>表示<b>a</b>字符连续出现至少一次</p> </p> <p> <p><strong>锚点</strong>,匹配一个位置,而不是字符。</p> <p>比如<b>^</b>匹配字符串的开头,</p> <p>比如<b></b>匹配单词边界</p> <p>比如<b>(?=d)</b>表示数字前面的位置</p> </p> <p> <p><strong>分组</strong>,用括号表示一个整体,</p> <p>比如<b>(ab)+</b>表示<b>ab</b>两个字符连续出现多次,也可以使用非捕获分组<b>(?:ab)+</b> </p> </p> <p> <p><strong>分支</strong>,多个子表达式多选一</p> <p>比如<b>abc|bcd</b>表示式匹配<b>abc</b>或<b>bcd</b>字符子串</p> </p> <p> <strong>反向引用</strong>,比如<b>2</b>表示引用第<b>2</b>个分组</p> <p><strong>其中涉及到的操作符有</strong></p> <p>转义符 <b></b> </p> <p>括号和方括号 <b>(...)</b>、<b>(?:...)</b>、<b>(?=...)</b>、<b>(?!...)</b>、<b>[...]</b> </p> <p>量词限定符 <b>{m}</b>、<b>{m,n}</b>、<b>{m,}</b>、<b>?</b>、<b>*</b>、<b>+</b> </p> <p>位置和序列 <b>^</b>、<b>$</b>、<b>元字符</b>、一般字符</p> <p>管道符 <b>|</b> </p> <p>操作符的优先级从上至下,由高到低</p> <pre>/ab?(c|de*)+|fg/ </pre> <p>由于括号的存在,<b>(c|de*)</b>是一个整体结构</p> <p>在<b>(c|de*)</b>中注意其中的量词,因此<b>e</b>是一个整体结构</p> <p>因为分支结构<b>|</b>优先级最低,因此<b>c</b>是一个整体,而<b>de*</b>是另一个整体</p> <p>同理,整个正则分成了<b>a</b>、<b>b?</b>、<b>(...)+</b>、<b>f</b>、<b>g</b>。而由于分支的原因,又可以分成<b>ab?(c|de*)+</b>和<b>fg</b>两部分</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000015333126?w=1940&h=1176");</script></p> <b>注意要点</b> <p><strong>匹配字符串整体问题</strong></p> <p>要匹配整个字符串,在正则前后中加上锚字符<b>^</b>和<b>$</b> </p> <p><strong>量词连缀问题</strong></p> <pre>每个字符为a、b、c任选其一 字符串的长度是3的倍数 </pre> <p><b>/([abc]{3})/</b></p> <p><strong>元字符转义问题</strong></p> <p>元字符,就是正则中特殊含义的字符</p> <p> <p>所有结构里,用到的元字符:</p> <p> <b>^</b>、<b>$</b>、<b>.</b>、<b>*</b>、<b>+</b>、<b>?</b>、<b>|</b>、<b>|</b>、<b>/</b>、<b>()</b>、<b>[]</b>、<b>{}</b>、<b>=</b>、<b>!</b>、<b>:</b>、<b>-</b>、<b>,</b> </p> </p> <p>当匹配上面的字符本身时,可以一律转义:</p> <pre>var string = "^$.*+?|/[]{}=!:-,"; var regex = /^$.*+?|/[]{}=!:-,/; console.log(regex.test(string)); // => true </pre> <p>其中<b>string</b>中的<b></b>字符也要转义</p> <p>另外在<b>string</b>中也可以把每个字符转义,转义后的结果仍然是自身</p> <p><strong>字符组中的元字符</strong></p> <pre>跟字符组相关的元字符有[]<b>`、</b>^<b>、</b>-<b>,需要在会引起歧义的地方进行转义。例如开头的</b>^`必须转义,不然会把整个字符组,看成反义字符组。</pre> <pre>var string = "^$.*+?|/[]{}=!:-,"; var regex = /[^$.*+?|/[]{}=!:-,]/g; console.log( string.match(regex) ); </pre> <b>案例分析</b> <p><strong>身份证</strong></p> <pre>/^(d{15}|d{17}[dxX])$/ </pre> <pre>因为<b>|</b>的优先级最低,所以正则分成了两部分<b>d{15}</b>和<b>d{17}[dxX]</b> </pre> <p> <b>d{15}</b>表示<b>15</b>位连续数字</p> <p> <b>d{17}[dxX]</b>表示<b>17</b>位连续数字,最后一位可以是数字或大小写字母<b>x</b> </p> <p><strong>IPV4地址</strong></p> <pre>(0{0,2}d|0?d{2}|1d{2}|2[0-4]d|25[0-5])(0{0,2}d|0?d{2}|1d{2}|2[0-4]d|25[0-5]) </pre> <p><strong>它是一个多选结构,分成<b>5</b>部分</strong></p> <p> <b>0{0-2}d</b>,匹配一位数,包括<b>0</b>补齐。比如<b>9</b>、<b>09</b>、<b>009</b> </p> <p> <b>0?d{2}</b>,匹配两位数,包括<b>0</b>补齐,也包括一位数</p> <p> <b>1d{2}</b>,匹配<b>100</b>到<b>199</b> </p> <p> <b>2[0-4]d</b>,匹配<b>200-249</b> </p> <p> <b>25[0-5]</b>,匹配<b>250-255</b> </p> <b>正则表达式编程</b> <b>四种操作</b> <b>验证</b> <p>验证时正则表达式最直接的应用,比如表单验证</p> <pre>判断一个字符串中是否有数字</pre> <p><strong>使用<b>search</b></strong></p> <pre>var regex = /d/; var string = "abc123"; console.log(!!~string.search(regex)); //true </pre> <p><strong>使用<b>test</b></strong></p> <pre>var regex = /d/; var string = "abc123"; console.log( regex.test(string) ); // => true </pre> <p><strong>使用<b>match</b></strong></p> <pre>var regex = /d/; var string = "abc123"; console.log( !!string.match(regex) ); // => true </pre> <p><strong>使用<b>exec</b></strong></p> <pre>var regex = /d/; var string = "abc123"; console.log( !!regex.exec(string) ); // => true </pre> <pre>其中,最常用的是<b>test</b> </pre> <b>切分</b> <p> <p>切分,就是把目标字符串切成段,例如JS中的<b>split</b></p> <p>比如目标字符串<b>html,css,javascript</b>,按逗号来切分</p> </p> <pre>var regex = /,/; var string = "html,css,javascript"; console.log(string.split(regex)); //[ "html", "css", "javascript" ]</pre> <p><strong>日期格式</strong></p> <pre>2018/06/20 2018.06.20 2018-06-20 </pre> <p>可以使用<b>split</b>切出年月日</p> <pre>var regex = /D/; console.log("2018/06/20".split(regex)); console.log("2018.06.20".split(regex)); console.log("2018-06-20".split(regex)); // [ "2018", "06", "20" ] // [ "2018", "06", "20" ] // [ "2018", "06", "20" ] </pre> <b>提取</b> <p>此时正则通常要使用分组引用(分组捕获)功能</p> <p><strong><b>match</b></strong></p> <pre>var regex = /^(d{4})D(d{2})D(d{2})$/; var string = "2018-06-20"; console.log(string.match(regex)); //[ "2018-06-20", "2018", "06", "20", index: 0, input: "2018-06-20" ] </pre> <p><strong><b>exec</b></strong></p> <pre>var regex = /^(d{4})D(d{2})D(d{2})$/; var string = "2018-06-20"; console.log(regex.exec(string)); //[ "2018-06-20", "2018", "06", "20", index: 0, input: "2018-06-20" ] </pre> <p><strong><b>test</b></strong></p> <pre>var regex = /^(d{4})D(d{2})D(d{2})$/; var string = "2018-06-20"; regex.test(string); console.log(RegExp.$1, RegExp.$2, RegExp.$3); //2018 06 20 </pre> <p><strong><b>search</b></strong></p> <pre>var regex = /^(d{4})D(d{2})D(d{2})$/; var string = "2018-06-20"; string.search(regex); console.log(RegExp.$1, RegExp.$2, RegExp.$3); //2018 06 20 </pre> <p><strong><b>replace</b></strong></p> <pre>var regex = /^(d{4})D(d{2})D(d{2})$/; var string = "2018-06-20"; var date = []; string.replace(regex, function (match, year, month, day) { date.push(year, month, day); }); console.log(date); //[ "2018", "06", "20" ] </pre> <pre>其中最常用的是<b>match</b> </pre> <b>替换</b> <pre>把日期格式,从<b>yyyy-mm-dd</b>替换成<b>yyyy/mm/dd</b>:</pre> <pre>var string = "2018-06-20"; var today = new Date(string.replace(/-/g, "/")); console.log(today); //2018-06-19T16:00:00.000Z </pre> <pre>用于正则操作的方法,共有<b>6</b>个,字符串实例<b>4</b>个,正则实例<b>2</b>个</pre> <p><b>string#search</b></p> <p><b>string#split</b></p> <p><b>string#match</b></p> <p><b>string#replace</b></p> <p><b>RegExp#test</b></p> <p><b>RegExp#exec</b></p> <p><strong><b>search</b>和<b>match</b>的参数问题</strong></p> <p>字符串实例的<b>4</b>个方法参数都支持正则和字符串</p> <p>但<b>search</b>和<b>match</b>把字符串转换为正则</p> <pre>var string = "2018.06.20"; console.log(string.search("."));//0 //需要修改成下列形式之一 console.log(string.search("."));//4 console.log(string.search(/./));//4 console.log(string.match(".")); //[ "2", index: 0, input: "2018.06.20" ] //需要修改成下列形式之一 console.log(string.match(".")); //[ ".", index: 4, input: "2018.06.20" ] console.log(string.match(/./)); //[ ".", index: 4, input: "2018.06.20" ] console.log(string.split(".")); //[ "2018", "06", "20" ] console.log(string.replace(".", "/")); //2018/06.20</pre> <p><strong><b>match</b>返回结果的格式问题</strong></p> <pre> <b>match</b>返回结果的格式,跟正则对象是否有修饰符<b>g</b>有关</pre> <pre>var string = "2018.06.20"; var regex1=/(d+)/; var regex2=/(d+)/g; console.log(string.match(regex1)); //[ "2018", "2018", index: 0, input: "2018.06.20" ] console.log(string.match(regex2)); //[ "2018", "06", "20" ] </pre> <p>没有<b>g</b>,返回的是标准匹配格式,数组的第一个元素时整体匹配的内容,接下来是分组捕获的内容,然后是整体匹配的第一个下标,最后的输入的目标字符串</p> <p>有<b>g</b>,返回的是所有匹配的内容</p> <p>当没有匹配时,不管有没有<b>g</b>都返回<b>null</b> </p> <p><strong><b>exec</b>比<b>match</b>更强大</strong></p> <pre>当正则没有<b>g</b>时,使用<b>match</b>返回的信息比较多。但是有<b>g</b>后,就没有关键信息<b>index</b><br>而<b>exec</b>方法就能解决这个问题,它能接着上一次匹配后继续匹配</pre> <pre>var string = "2018.06.20"; var regex = /(d+)/g; console.log(regex.exec(string)); //[ "2018", "2018", index: 0, input: "2018.06.20" ] console.log(regex.lastIndex);//4 console.log(regex.exec(string)); // [ "06", "06", index: 5, input: "2018.06.20" ] console.log(regex.lastIndex);//7 console.log(regex.exec(string)); //[ "20", "20", index: 8, input: "2018.06.20" ] console.log(regex.lastIndex);//10 console.log(regex.exec(string));//null console.log(regex.lastIndex);//0</pre> <p><strong><b>test</b>整体匹配时需要使用<b>^</b>和<b>$</b></strong></p> <pre> <b>test</b>是看目标字符串中是否有子串匹配正则,即有部分匹配即可。</pre> <p>要整体匹配,正则前后需要添加开头和结尾</p> <pre>console.log( /123/.test("a123b") ); // => true console.log( /^123$/.test("a123b") ); // => false console.log( /^123$/.test("123") ); // => true</pre> <p><strong><b>split</b>相关注意事项</strong></p> <p>第一,它可以有第二个参数,表示结果数组的最大长度</p> <pre>var string = "html,css,javascript"; console.log( string.split(/,/, 2) ); // =>["html", "css"]</pre> <p>第二,正则使用分组时,结果数组中是包含分隔符的</p> <pre>var string = "html,css,javascript"; console.log( string.split(/(,)/) ); // =>["html", ",", "css", ",", "javascript"]</pre> <p><strong><b>replace</b>是很强大的</strong></p> <pre> <b>replace</b>有两种使用形式,它的第二个参数,可以是字符串,也可以是函数。</pre> <p>当第二个参数是字符串时,如下的字符有特殊的含义:</p> <p> <b>$1</b>,<b>$2,...,$99</b> 匹配第<b>1~99</b>个分组里捕获的文本</p> <p> <b>$&</b> 匹配到的子串文本</p> <p> <b>$</b>` 匹配到的子串的左边文本</p> <p> <b>$"</b> 匹配到的子串的右边文本</p> <p> <b>$$</b> 美元符号</p> <p>例如,把"<b>2,3,5</b>",变成"<b>5=2+3</b>":</p> <pre>var result = "2,3,5".replace(/(d+),(d+),(d+)/, "$3=$1+$2"); console.log(result); // => "5=2+3" </pre> <p>当第二个参数是函数时,该回调函数的参数具体:</p> <pre>"1234 2345 3456".replace(/(d)d{2}(d)/g, function(match, $1, $2, index, input) { console.log([match, $1, $2, index, input]); }); // => ["1234", "1", "4", 0, "1234 2345 3456"] // => ["2345", "2", "5", 5, "1234 2345 3456"] // => ["3456", "3", "6", 10, "1234 2345 3456"] </pre> <p><strong>修饰符</strong></p> <p> <b>g</b> 全局匹配,即找到所有匹配的,单词是<b>global</b> </p> <p> <b>i</b> 忽略字母大小写,单词<b>ingoreCase</b> </p> <p> <b>m</b> 多行匹配,只影响<b>^</b>和<b>$</b>,二者变成行的概念,即行开头和行结尾。单词是<b>multiline</b> </p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="正则正则表达式" href="https://www.ucloud.cn/yun/tag/zhengzezhengzebiaodashi/">正则正则表达式</a> <a style="width:120px;" title="正则匹配正则表达式" href="https://www.ucloud.cn/yun/tag/zhengzepipeizhengzebiaodashi/">正则匹配正则表达式</a> <a style="width:120px;" title="-正则表达式" href="https://www.ucloud.cn/yun/tag/-zhengzebiaodashi/">-正则表达式</a> <a style="width:120px;" title="正则表达式?" href="https://www.ucloud.cn/yun/tag/zhengzebiaodashi?/">正则表达式?</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p> <p>转载请注明本文地址:https://www.ucloud.cn/yun/95564.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/95563.html">上一篇:讓 IDEA 支持 直接執行 TypeScript 的插件</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/95565.html">下一篇:JS中几种包含for的遍历方式</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/92730.html"><b><em>正则</em><em>表<em>达式</em></em></b></a></h2> <p class="ellipsis2 good">摘要:本文内容共正则表达式火拼系列正则表达式回溯法原理学习正则表达式,是需要懂点儿匹配原理的。正则表达式迷你书问世了让帮你生成和解析参数字符串最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写,作用是对字符串执行模式匹配。 JS 的正则表达式 正则表达式 一种几乎可以在所有的程序设计语言里和所有的计算机平台上使用的文字处理工具。它可以用来查找特定的信息(搜索),也可以用来查...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1119.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/11/small_000001119.jpg" alt=""><span class="layui-hide64">bang590</span></a> <time datetime="">2019-08-22 13:59</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/95028.html"><b>JS中的<em>正则</em><em>表<em>达式</em></em></b></a></h2> <p class="ellipsis2 good">摘要:构造函数可以有两个字符串参数,第一个参数包含正则表达式的主体部分。只读的布尔值,说明这个正则表达式是否带有修饰符。中正则的扩展构造函数在中,只能接受字符串作为参数,允许其直接接受正则表达式作为参数。 上文传送门:初探正则表达式 正则表达式是一个描述字符模式的对象,JavaScript 的 RegExp 类表示正则表达式,String 和 RegExp 都定义了方法,后者使用正则表达式进...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-939.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000939.jpg" alt=""><span class="layui-hide64">Soarkey</span></a> <time datetime="">2019-08-22 17:17</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/95967.html"><b>JavaScript<em>正则</em><em>表<em>达式</em></em>总结</b></a></h2> <p class="ellipsis2 good">摘要:正则表达式一直是里比较难以掌握的点。在中创建正则的两种方式使用字面量这就是正则表达式的字面量语法,表示正则表达式的模式,为正则表达式的标志。字面量形式的正则表达式一般使用较多,也推荐大家尽可能使用这种形式,简洁易读,符合正常的使用习惯。 正则表达式一直是js里比较难以掌握的点。 看不懂,学不会,记不住。 每次需要用到正则的时候,都需要再去查找资料。 今天花时间把正则的知识点总结下,希望...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1094.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001094.jpg" alt=""><span class="layui-hide64">big_cat</span></a> <time datetime="">2019-08-22 18:32</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/78274.html"><b><em>正则</em>与JS中的<em>正则</em></b></a></h2> <p class="ellipsis2 good">摘要:注意本文将正则与中的正则分开讨论。正则零宽断言更多参考各种语言对于正则不同支持参考单行模式与多行模式通过设置正则表达式后的修饰符可开启对应的匹配模式单行模式和多行模式。 最近这段时间帮同学处理一些文档, 涉及到一些结构化文档的工作大部分都得使用正则表达式, 之前对于正则的认识大多来源于语言书上那几页的介绍, 自己也没有用过几次。这里将我之前感到模糊的概念作个整理。因为对JS了解多点,所...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-564.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000564.jpg" alt=""><span class="layui-hide64">firim</span></a> <time datetime="">2019-08-19 17:11</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/84892.html"><b>JavaScript<em>正则</em><em>表<em>达式</em></em>的匹配模式</b></a></h2> <p class="ellipsis2 good">摘要:选择分组和引用正则表达式的语法还包括指定选择项子表达式分组和引用前一子表达式的特殊字符。带圆括号的表达式的另一个用途是允许在同一正则表达式的后部引用前面的子表达式。 正则表达式(regular expression)是一个描述字符模式的对象。JavaScript的 RegExp类 表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进 行强大的模式匹配和文本检索与...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-220.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/02/small_000000220.jpg" alt=""><span class="layui-hide64">wqj97</span></a> <time datetime="">2019-08-20 18:56</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/90260.html"><b><em>正则</em><em>表<em>达式</em></em></b></a></h2> <p class="ellipsis2 good">摘要:最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写,作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧 本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验,进行扩展延伸,同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1489.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/14/small_000001489.jpg" alt=""><span class="layui-hide64">yibinnn</span></a> <time datetime="">2019-08-21 17:57</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-1663.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001663.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1663.html" rel="nofollow">Dean</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1663)" id="attenttouser_1663" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-1663.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121952.html">Linux环境基础开发工具使用</a></h3> <p>阅读 3526<span>·</span>2021-10-09 09:41</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121871.html">SpinServers:圣何塞服务器75折优惠,亚洲优化线路,10Gbps带宽,月付$126起</a></h3> <p>阅读 2732<span>·</span>2021-10-08 10:18</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119805.html">听说看了这份Java学习路线的同学,毕业都拿到了大厂offer</a></h3> <p>阅读 2163<span>·</span>2021-09-10 10:51</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119761.html">拉绳位移传感器的有关知识建议大家收藏</a></h3> <p>阅读 2666<span>·</span>2021-09-10 10:50</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119621.html">Chapter1 大数据概述</a></h3> <p>阅读 761<span>·</span>2021-09-09 09:33</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119322.html">老用户购买阿里云服务器首选优惠活动:爆款特惠活动</a></h3> <p>阅读 3368<span>·</span>2021-09-06 15:14</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/114774.html">2019年前端面试题-01</a></h3> <p>阅读 3002<span>·</span>2019-08-30 11:06</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112900.html">深入理解 CSS:字体度量、line-height 和 vertical-align</a></h3> <p>阅读 3229<span>·</span>2019-08-29 14:04</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud (优刻得科技股份有限公司)"></a></h6> <p>UCloud (优刻得科技股份有限公司)是中立、安全的云计算服务平台,坚持中立,不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品,并深入了解互联网、传统企业在不同场景下的业务需求,提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>|</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>