分类 学习 下的文章 - 浮川的小窝

正则基础复习 正则表达式 - 教程正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字>母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。正则表达式是繁琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的>成就感。只要认真阅读本教程，加上应用的时候进行一定的参考，掌握正则表达式不是问题。许多程序设计语言都支持利用正则表达式进行字符串操作。基本语法字符描述[ABC]匹配 [...] 中的所有字符，例如 [aeiou] 匹配字符串 "google runoob taobao" 中所有的 e o u a 字母。![[ABC].jpg](https://snowlove.synology.me:5106/usr/uploads/2021/05/331281439.jpg)1匹配除了 [...] 中字符的所有字符，例如 2 匹配字符串 "google runoob taobao" 中除了 e o u a 字母的所有字母。[A-Z][A-Z] 表示一个区间，匹配所有大写字母，[a-z] 表示所有小写字母。![[A-Z].jpg](https://snowlove.synology.me:5106/usr/uploads/2021/05/2883772674.jpg)[\s\S]匹配所有。\s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行。![[sS].jpg](https://snowlove.synology.me:5106/usr/uploads/2021/05/306372584.jpg)\w匹配字母、数字、下划线。等价于 [A-Za-z0-9_].匹配除换行符 \n 之外的任何单字符l逻辑或操作符-定义一个区间\将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， 'n' 匹配字符 'n'。'\n' 匹配换行符。序列 '\' 匹配 "\"，而 '(' 则匹配 "("。*匹配前面的字符或者子表达式0次或多次+匹配前一个字符或子表达式一次或多次*?惰性匹配上一个+?惰性匹配上一个?前一个的惰性匹配?匹配前一个字符或子表达式0次或1次重复匹配前一个字符或子表达式匹配前一个字符或子表达式至少m次至多n次匹配前一个字符或者子表达式至少n次\c匹配一个控制字符\d匹配任意数字\D匹配数字以外的字符\t匹配制表符\w匹配任意数字字母下划线\W不匹配数字字母下划线\b匹配一个单词边界，即字与空格间的位置。正则表达式(?:pattern)、(?=pattern)、(?!pattern)、(?<=pattern)和(?<!pattern)字符描述?:exp1(?:exp2):全局只会查找一次exp2?=exp1(?=exp2)：查找 exp2 前面的 exp1。?<=(?<=exp2)exp1：查找 exp2 后面的 exp1。?!exp1(?!exp2)：查找后面不是 exp2 的 exp1。?<!(?<!exp2)exp1：查找前面不是 exp2 的 exp1。正则常用方法正则中有常用的六种方法；分为两类，一类是：RegExp对象方法；一类是：支持正则表达式的String对象的方法。一、RegExp对象方法（两个）:exce()和test()语法：RegExpObject.exec(string)c1.1. exce()方法介绍：exec() 方法用于检索字符串中的正则表达式的匹配，如果字符串中有匹配的值返回该匹配值构成的数组 ，且该数组还有继承的属性：index：表示第一个匹配的字符在原字符串中的位置，input:表示原字符串，groups：表示当初中命名的分组时匹配到的分组对象；exec()方法没有匹配到数据时返回 null。当正则匹配中没有分组时：var str="Hello45647 123 world!Hello 1423 world! ssfsdf"; var patt2=/(?<hello>\d)+/; var result2=patt2.exec(str); console.log(result2)当正则匹配中有分组且分组存在名字时：var str="Hello45647 123 world!Hello 1423 world! ssfsdf"; var patt2=/(?<hello>\d)+/; var result2=patt2.exec(str); console.log(result2)没有匹配到符合正则的字符时：var str="Hello world!Hello world! ssfsdf"; var patt1=/\d+/; var result1=patt1.exec(str); console.log(result1)//null1.2、test()方法介绍：方法用于检测一个字符串是否匹配某个模式；如果字符串中有匹配的值返回 true ，否则返回 false。var str="Hello world!"; //查找"Hello" var patt1=/Hello/g; var result1=patt1.test(str); console.log(result1); //true //查找 "Runoob" var patt2=/Runoob/g; var result2=patt2.test(str); console.log(result2); //false支持正则表达式的String对象的方法:search()、replace()、split()、match()语法：string.search(RegExpObject)2.1、search()方法简介：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果找到任何匹配的子串，则返回 该子串在原字符串中的第一次出现的位置。如果没有找到任何匹配的子串，则返回 -1。var str1 = 'hello 123 world 456'; var reg1 = /\d+/; console.log(str1.search(reg1));//6 console.log(str1.search("world"));//10 var str2 = 'hello world'; var reg2 = /\d+/; console.log(str2.search(reg2));//-1 console.log(str2.search("nihao"));//-12.2、replace()方法简介：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。原字符串不变，创建一个新的字符串replace高级用法创建一个新的字符串，原字符串不变var str="hello world! hello world! hello world!"; var n=str.replace('hello',"Runoob"); console.log(str) console.log(n)替换第一个和替换全部符合正则的子串var str="hello world! hello world! hello world!"; var a=str.replace(/hello/,"Runoob"); var b=str.replace(/hello/g,"Runoob"); console.log(a) console.log(b)2.3、split()方法简介：用于把一个字符串按符合匹配条件的方式分割成一个字符串数组。不改变原字符串var str="How 1are 2you 3doing 4today?"; var a=str.split(" "); var b=str.split(" ",2); var c=str.split(/\d/); var d=str.split(/\d/,3); console.log(a);//["How", "1are", "2you", "3doing", "4today?"] console.log(b);//["How", "1are"] console.log(c);//["How ", "are ", "you ", "doing ", "today?"] console.log(d);//["How ", "are ", "you "]2.4、match()方法简介：match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配注意： match() 方法将检索字符串 String，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配，与exce的完全一致。如果 regexp 有标志 g，它将找到全部符合正则子字符串，并返回一个数组。如果没有找到任何匹配的文本，无论有没有g，match() 将返回 null。没有g的正则匹配var str="Hello45647 123 world!Hello 1423 world! ssfsdf"; var patt1=/\d+/; var result1=str.match(patt1); console.log(result1)var str="Hello45647 123 world!Hello 1423 world! ssfsdf"; var patt2=/(?<hello>\d)+/; var result2=str.match(patt2); console.log(result2)有g的正则匹配var str="The rain in SPAIN stays mainly in the plain"; var n=str.match(/ain/g); console.log(n); //["ain", "ain", "ain"]没有匹配到子字符串var str="The rain in SPAIN stays mainly in the plain"; var n=str.match(/\d/g); //匹配数字 console.log(n); //n在正则表达式中，i和g是两个常用的标志。除了这两个标志外，还有其他一些标志可以用于修改正则表达式的行为。i标志（不区分大小写）：使用i标志可以使匹配过程不区分大小写。例如，/abc/i将匹配"abc"、"AbC"、"ABC"等。g标志（全局匹配）：使用g标志可以进行全局匹配，即在整个字符串中查找所有匹配项，而不仅仅是第一个匹配项。例如，/abc/g将匹配字符串中的所有"abc"。m标志（多行匹配）：使用m标志可以进行多行匹配。它修改了^和$的行为，使它们匹配每一行的开头和结尾，而不仅仅是整个字符串的开头和结尾。s标志（点号匹配所有字符）：使用s标志可以使点号.匹配包括换行符在内的所有字符。默认情况下，点号.匹配除换行符外的任意字符。u标志（Unicode匹配）：使用u标志可以启用Unicode匹配模式，支持Unicode字符的匹配。这些标志可以单独使用，也可以组合使用。例如，/abc/gi表示进行全局、不区分大小写的匹配。请注意，标志的使用方式是在正则表达式的最后添加，例如/pattern/flags。ABC ↩aeiou ↩

md入门使用 基本符号：* - +. >基本上所有的markdown标记都是基于这四个符号或组合，需要注意的是，如果以基本符号开头的标记，注意基本符号后有一个用于分割标记符和内容的空格。以下是常用语法一.标题嵌套列表 前面带#号，后面带文字，分别表示h1-h6,只到h6，而且h1下面会有一条横线# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题效果如下:二.列表无序列表形式一abc 形式二def 形式三ghi效果如下:有序列表正常形式abcbcdcde 错序效果fghghihij效果如下:如图，注意，数字后面的点只能是英文的点，有序列表的序号是根据第一行列表的数字顺序来的，错序列表的序号本来是序号是乱的， 但是还是显示 2 3 5三.嵌套列表嵌套列表实例:abcdabcdeabcdeabcde第三层第四层第五层bcdecdef无序列表嵌套123abcbcdcde465789有序列表嵌套abcdabcdeabcdeabcde第三层bcdecdef列表可以嵌套，使用时在嵌套列表前按 tab 或 空格 来缩进,去控制列表的层数效果如下:四.引用说明区块对某个部分做的内容做一些说明或者引用某某的话等，可以用这个语法。正常形式> 引用内容、说明内容。在语句前面加一个 > ，注意是英文的那个右尖括号，注意空格，引用因为是一个区块，理论上是应该什么内容都可以放，比如说：标题，列表，引用等等。效果如下:嵌套区块这里我只介绍一下我常用的方法，也是个人认为比较规范的一种方法，就是给区块的下一级区块多加一个右尖括号> 一级引用 >> 二级引用 >>> 三级引用 >>>> 四级引用 >>>>> 五级引用 >>>>>> 六级引用效果如下:五.代码块在发布一些技术文章会涉及展示代码的问题，这时候代码块就显得尤为重要。1.少量代码，单行使用，直接用`包裹起来就行了` shaoliangdaima,danhangshiyong `效果如下:少量代码，单行使用，直接用`包裹起来就行了daliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyong效果如下:六.链接行内式链接的文字放在[]中，链接地址放在随后的()中，链接也可以带title属性，链接地址后面空一格，然后用引号引起来简书,是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。参数式链接的文字放在[]中，链接地址放在随后的:后，链接地址后面空一格，然后用引号引起来[简书]: https://www.jianshu.com "创作你的创作" [简书]是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。 //参数定义的其他写法 [简书]: https://www.jianshu.com '创作你的创作' [简书]: https://www.jianshu.com (创作你的创作) [简书]: <https://www.jianshu.com> "创作你的创作"以上两种方式其效果图都是一样的，如下：七.图片行内式和链接的形式差不多，图片的名字放在[]中，图片地址放在随后的()中，title属性（图片地址后面空一格，然后用引号引起来）,注意的是[]前要加上! 参数式图片的文字放在[]中，图片地址放在随后的:后，title属性（图片地址后面空一格，然后用引号引起来）,注意引用图片的时候在[]前要加上![my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo" ![my-logo.png] //参数定义的其他写法 [my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 'my-logo' [my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 (my-logo) [my-logo.png]: <https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240> "my-logo"以上两种方式其效果图都是一样的，如下：![my-logo.png]八.分割线分割线可以由* - _（星号，减号，底线）这3个符号的至少3个符号表示，注意至少要3个，且不需要连续，有空格也可以 --- - - - ------ *** * * * ****** ___ _ _ _ ______以上代码的效果图均为:九.其他强调字体一个星号或者是一个下划线包起来，会转换为倾斜，如果是2个，会转换为加粗 *md* **md** _md_ __md__效果图：转义基本上和js转义一样,\加需要转义的字符 \\ \* \+ \- \` \_删除线用~~把需要显示删除线的字符包裹起来 ~~删除~~效果图：十.表格下面三个例子的效果一样，由此可得：1. 表格的格式不一定要对的非常起，但是为了良好的变成风格，尽量对齐是最好的 2. 分割线后面的冒号表示对齐方式，写在左边表示左对齐，右边为右对齐，两边都写表示居中实例:表头1表头2表头3表头4表头5行一测试内容1行一测试内容2行一测试内容3行一测试内容4行一测试内容5行二测试内容1行二测试内容2行二测试内容3行二测试内容4行二测试内容5行三测试内容1行三测试内容2行三测试内容3行三测试内容4行三测试内容5 例子一 |123|234|345| |:-|:-:|-:| |abc|bcd|cde| |abc|bcd|cde| |abc|bcd|cde| 例子二 |123|234|345| |:---|:---:|---:| |abc|bcd|cde| |abc|bcd|cde| |abc|bcd|cde| 例子三 123|234|345 :-|:-:|-: abc|bcd|cde abc|bcd|cde abc|bcd|cde效果图如下：未完待续 继续补充中...

正则 ?: 、 ?= 、 ?! 、 ?<= 、 ?<! 正则规则收集?:pattern匹配pattern但不获取匹配结果 var str = 'aaabbb' var reg = /(a+)(?:b+)/ str.match(reg) // ["aaabbb", "aaa", index: 0, input: "aaabbb", groups: undefined]?=pattern 零宽度正预测先行断言意思就是匹配内容右侧必须为pattern var str = "i'm singing and dancing"; var reg = /\b(\w+(?=ing\b))/g var res = str.match(reg); console.log(res) // ["sing", "danc"]?!pattern 零宽度负预测先行断言就是匹配右侧不是pattern内容 var str = 'nodejs' var reg = /node(?!js)/ reg.test(str) // false?<=pattern匹配这个位置之前为pattern的内容 var str = '111$222' var reg = /(?<=\$)\d+/ str.match(reg) // ["222", index: 4, input: "111$222", groups: undefined]?<!pattern匹配这个位置之前部位pattern的内容 var str = '￥998$888'; var reg = /(?<!\$)\d+/; console.log(reg.exec(str)) //998

网页版 vscode - 套娃王的一生 先上效果图本着买了群晖不捣鼓到死机的原则，把偶然间发现的网页版vscode搭建提上了日程，虽然目前只能实现简单的项目运行 但是也是记录一下 linux、docker苦手的搭建之路。

css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解 flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是 flex-basis ，basis英文意思是<主要成分>，所以他和width放在一起时,肯定把width干掉，basis遇到width时就会说我才是最主要的成分，你是次要成分，所以见到我的时候你要靠边站。其次是 flex-grow，grow英文意思是<扩大，扩展，增加>,这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，这时，flex-grow就会说我要成长，我要长大，怎么样才能成长呢，当然是分享父元素的空间了。见下面第二个属性的内容最后是 flex-shrink， shrink英文意思是<收缩，>，这就代表当父元素的宽度小于子元素宽度之和时，并且超出了父元素的宽度，这时，flex-shrink就会说外面的世界太苦了，我还是回到父亲的怀抱中去吧！因此，flex-shrink就会按照一定的比例进行收缩。见下面第三个属性的内容第一个属性：flex-basis该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。 .box{ display: flex; margin:100px auto; width:400px; height:200px; } .inner{ width:200px; height:100px; flex-basis:300px; background:pink; } </style> 见下图：小编我把宽度设置为width:200px; flex-basis:300px;结果显示表明子元素.inner应用了属性flex-basis; 第二个属性：flex-grow该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。举个例子: 父元素宽400px，有两个子元素：A和B。A宽为100px，B宽为200px。 则空余空间为 400-（100+200）= 100px。 如果A，B都不索取剩余空间，则有100px的空余空间。 <div class="inner1"> </div>.box{ display: flex; flex-direction: row; margin:100px auto; width:400px; height:200px; border:1px solid red; } .inner{ flex-basis:100px; height:100px; background:pink; } .inner1{ flex-basis:200px; height:100px; background:blue; }见下图：如果A索取剩余空间:设置flex-grow为1，B不索取。则最终A的大小为 自身宽度（100px）+ 剩余空间的宽度（100px）= 200px 。.inner{ flex-basis:100px; height:100px; background:pink; flex-grow:1; } .inner1{ flex-basis:200px; height:100px; background:blue; }见下图：如果A，B都设索取剩余空间，A设置flex-grow为1，B设置flex-grow为2。则最终A的大小为 自身宽度（100px）+ A获得的剩余空间的宽度（100px (1/(1+2))）,最终B的大小为 自身宽度（200px）+ B获得的剩余空间的宽度（100px (2/(1+2))）(这里呢小编只给了公式，小伙伴们可以自己去算一下).inner{ flex-basis:100px; height:100px; background:pink; flex-grow:1; } .inner1{ flex-basis:200px; height:100px; background:blue; flex-grow:2; }见下图：第三个属性：flex-shrink该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。举个例子: 父元素宽400px，有两子元素：A和B。A宽为200px，B宽为300px。 则A，B总共超出父元素的宽度为(200+300)- 400 = 100px。 如果A，B都不减小宽度，即都设置flex-shrink为0，则会有100px的宽度超出父元素。 .box{ display: flex; flex-direction: row; margin:100px auto; width:400px; height:200px; border:1px solid red; } .inner{ flex-basis:200px; height:100px; background:black; flex-shrink:0; } .inner1{ flex-basis:300px; height:100px; background:blue; flex-shrink:0; }见下图：如果A不减小宽度:设置flex-shrink为0，B减小。则最终B的大小为 自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px .inner{ flex-basis:200px; height:100px; background:black; flex-shrink:0; } .inner1{ flex-basis:300px; height:100px; background:blue; flex-shrink:1; }见下图：如果A，B都减小宽度，A设置flex-shirk为3，B设置flex-shirk为2。则最终A的大小为 自身宽度(200px)- A减小的宽度(100px (200px 3/(200 3 + 300 2))) = 150px,最终B的大小为 自身宽度(300px)- B减小的宽度(100px (300px 2/(200 3 + 300 2))) = 250px.inner{ flex-basis:200px; height:100px; background:black; flex-shrink:3; } .inner1{ flex-basis:300px; height:100px; background:blue; flex-shrink:2; }见下图：这里小编明确一点，flex是flex-grow，flex-shrink, flex-basis (注意小编写的顺序)缩写形式，大家可以记一下下面的缩写规则：如：flex 取值为 none，则计算值为 0 0 auto，如下是等同的：.item .item {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}当 flex取值为 auto，则计算值为 1 1 auto，如下是等同的：.item .item {flex-grow: 1; flex-shrink: 1; flex-basis: auto;}当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：.item .item 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：.item-1 .item-1 .item-2 .item-2 当 flex取值为两个非负数字，则分别视为 flex-grow和 flex-shrink的值，flex-basis取 0%，如下是等同的：.item .item 当 flex取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow和 flex-basis的值，flex-shrink取 1，如下是等同的： .item .item 转自 https://blog.csdn.net/m0_37058714/article/details/80765562