粉丝群第27期JS基础小测答疑文字版
栏目: JavaScript · 发布时间: 5年前
内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8402
本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
一、题目
就是写一个检验方法,输出不符合排版规则的内容。
翻译规则地址: 译文排版规则指南
补充细节:
- 数字与单位之间需要增加空格只需要考虑后面是大写字母的场景,因为代码中经常会有类似20px这样的处理,中间不能有空格。
- 标点不能重复专指中文标点,英文标点不考虑,在程序代码中标点重复很常见。
对于字符内容的格式验证,自然就是正则表达式了,因此,本期的题目主要目的之一是学习正则表达式。
正则表达式规则在所有的语言中都是通用的,除了细节上上有些差异,需要的是一模一样的,所以学会了JS中的正则表达式,其他开发语言也可以受用,包括CSS这么语言(CSS中也有正则表达式)。
JS这么语言要想基础扎实,正则表达式一定要好好学习,学到滴水不漏,可以极大提升处理自己的开发效率。包括在其他一些场合解放生产力,比方说Sublime Text这种编辑器在替换的时候是支持正则表达式的,如果你会正则表达式,则简单几个字符就能完成复杂替换,而且绝不会遗漏。那种解放生产力的感觉,会让你觉得,会代码真的好棒,好high!感觉人生已经达到了高潮。
二、几个验证的实现
CSS题目收到近50份回答,这次的 正则小测 ,只有4个实现,人虽少,但都是精英。
其中第一位 @XboxYan 的回答几乎直接大结局,我就以这个人回答作为案例讲讲正则表达式相关的一些东西。
1. 中英文之间需要增加空格
/([\u4e00-\u9fa5]+[A-Za-z]+|[A-Za-z]+[\u4e00-\u9fa5]+)/g
JS中正则表达式书写有两种方式,一种是直接两个斜杠,还有一种是使用RegExp对象构建。
上面这个例子啊,就是使用的斜杠。
举个最简单的例子, /1/
可以匹配字符串里面是否有字符 '1'
。
我们分解下这个正则表达式:
[\u4e00-\u9fa5]
表示中文字符匹配; [A-Za-z]
表示全部的英文字母。于是这个正则表达式可以理解为:
/(中文+英文+|英文+中文+)/g
是不是要更好理解了,剩下的一些符合是什么意思呢?
括号 ()
表示分组,这里可以去掉,浪费,白白占用匹配资源,直接下面这样既可:
/中文+英文+|英文+中文+/g
这里的竖着的管道符 |
在正则表达式中表示或者的意思,也就是匹配中文后面直接跟着英文,或者英文后面直接带着中文这两个场景。
加号 +
表示数量,表示1个或多个。正则表达式中还有其他一些表示数量的方法,例如:
- 加号
+
表示1个或多个。 - 问号
?
表示1个或0个。 - 星号
*
表示任意数量。 - 花括号
{}
可以指定数量,例如{2}
表示2个,{2, 6}
表示2-6个,{2,}
表示2个或2个以上。
在本例中,加号也是可以去掉的,不影响匹配。因此,此正则可以进一步简化:
/中文英文|英文中文/g
也就是:
/[\u4e00-\u9fa5][A-Za-z]|[A-Za-z][\u4e00-\u9fa5]/g
斜杠后面的 g
表示全局匹配,除了 g
,还有 i
和 m
。其中 i
表示不区分大小写, m
表示支持多行匹配。
因此,这里的正则可以进一步简化:
/[\u4e00-\u9fa5][a-z]|[a-z][\u4e00-\u9fa5]/gi
2. 中文与数字之间需要增加空格
/([\u4e00-\u9fa5]+\d+|\d+[\u4e00-\u9fa5]+)/g
和第一个验证,中文和英文之间加空格类似,括号和加号都可以简化掉:
/[\u4e00-\u9fa5]\d|\d[\u4e00-\u9fa5]/g
然后这里有个 \d
,表示的是匹配数字 0-9
,这里的正则也可以写成下面这样:
/[\u4e00-\u9fa5][0-9]|[0-9][\u4e00-\u9fa5]/g
正则表达式中有很多指代专属类别字符的写法,例如:
-
\d
表示的是匹配数字;换成大写的\D
则表示匹配数字以外其他字符,等同于[^0-9]
。我们如果想要匹配任意字符,可以使用[\d\D]
这种写法。 -
\w
表示匹配数字、字母和下划线;\W
表示匹配数字、字母和下划线以为的其他字符。 -
\s
表示匹配空格、制表符和换行符;换成大写的\S
则表示除了以外空格、制表符和换行符其他字符。 -
\n
表示换行。
3. 数字与单位之间需要增加空格
/\d[A-Za-z]+/g
题目这个需求是不合理的,有些数字和单位之间是不能加空格的,有趣技术文章翻译,必定包含大量的代码,例如 10px
等,显然不能加空格。因此,可以认为数字和大写字母之间需要空格。
因此,正则可以调整为:
/\d[A-Z]+/g
4. 全角标点与其他字符之间不加空格
/([\s\S]{2}[\!|\·|\【|\】|\「|\」|\;|\:|\“|\”|\,|\《|\。|\》|\、|\?]\s+)|[\s+(\!|\·|\【|\】|\「|\」|\;|\:|\“|\”|\,|\《|\。|\》|\、|\?)[\s\S]{2}]/g
这个就相当长了,很多人看了会觉得是天书一样,其实很简单,也有不少优化和改进空间。
首先,前后的 [\s\S]{2}
是多余的,可以删掉,没有必要再额外匹配任意两个字符;
然后,最外面的分组括号 ()
也是多余的;
最后,全角符号在正则表达式中是没有必要使用反斜杠 \
进行转义的,因此 \【|\】|\「|\」|\;|\:
可以写作 【|】|「|」|;|:
,这样阅读更方便些。
当前,这里最好的表示方法还是使用RegExp对象,可以大大简化我们的正则表达式,同时更利于维护。如下:
// 全角标点字符们 var strPunct = '!()【】『』「」《》“”‘’;:,。?、'; // 使用管道符连接 var regPunct = strPunct.split('').join('|'); // 此时的正则表达式 new RegExp('['+ regPunct +'] +| +['+ regPunct +']', 'g');
对吧,是不是简单也易读多了。
其中,空格我直接用的普通空格字符进行匹配的,而不是 \s
,因为,我不想把换行符也过滤掉。
当我们的正则表达式内容包含变量的时候,可以借助 new RegExp()
来实现。
5. 不重复使用标点符号
这里的标点指中文标点,因为英文标点不重复,有些不切实际,例如空字符串 ''
,就是合法的重复标点。
原本的实现:
/(\~|\`|\!|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\!|\·|\【|\】\「\」|\;|\:|\“|\”|\,|\《|\。|\》|\、|\?)\1+/g
洋洋洒洒好长,我们可以简化下:
new RegExp(`(${regPunct})\\1+`, 'g')
就是不使用重复中文标点了。其中,这里的 \1
有必要好好说下。
\1
表示捕获匹配,表示捕获第一个分组括号中匹配的值,你可以理解为代称。在正则表达式中,每一个分组括号 ()
都自带一个看不见的序号,从前往后依次是分组一,分组二,分组三……
这里的 \1
就表示匹配的第一个标点,后面跟了个 +
则表示,这里重复标点2个或多个都匹配。
捕获分组不仅存在于正则表达式中,当我们使用 replace
方法进行正则替换的时候,也存在与替换方法中,使用美元符号 $
外加数字表示,例如前后空格过滤 trim()
方法的简易polyfill:
if (!''.trim) { String.prototype.trim = function () { // $1表示第一个()中匹配的值 return this.replace(/^\s*(.*?)\s*$/, '$1'); }; }
其中 '$1'
并不是替换成字符串 $1
意思,而是替换成第一个 ()
中匹配的值,在这里表示首尾空格以外的值。
如果我们需要对捕获分组内容进行额外处理,可以把第二个参数作为 function
处理,例如:
this.replace(/^\s*(.*?)\s*$/, function (matches, $1) { // matches表示完整匹配内容(包括前后空格) // $1则表示第一个()中匹配的值 // 此时就可以对$1进行处理,返回我们需要的值 })
6. 破折号前后需要增加一个空格
这个超easy:
/(\S(——)|(——)\S)/g
这里几个括号都是多余的,直接下面这样既可:
/\S——|——\S/g
7. 使用全角中文标点
/([^A-Za-z][\~|\`|\!|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?][^A-Za-z])/g
实际匹配要比这个复杂,因为这个和最后一个应为整句需要使用半角标点大量冲突。所以这里规则要细化,前后至少需要出现中文,半角标点才转换为全角,否则认为是英文整句,不处理,保持忽略。
于是,我经过修改变成下面这样:
var strPunctHalf = '!()[]"\';:,.?'; // 不同于全角字符,半角字符需要加转义 var regPunctHalf = strPunctHalf.split('').join('|\\'); // 此时的正则表达式 new RegExp(`[\u4e00-\u9fa5][a-z]*( *[${regPunctHalf}] *)|( *[${regPunctHalf}] *)[a-z]*[\u4e00-\u9fa5]`, 'gi');
8. 数字使用半角
也就是需要匹配10个全角数字,松松的,没什么好说。
/[\uFF10-\uFF19]+/g
9. 遇到完整的英文整句,其內容使用半角标点
/(\「[A-Za-z\s\~|\`|\!|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]*[\!|\·|\;|\:|\“|\”|\,\。|\、|\?][^\」]*\」)|(\《[A-Za-z\s\~|\`|\!|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]*[\!|\·|\;|\:|\“|\”|\,\。|\、|\?][^\》]*\》)/g
完整的英文整句的重要特征是单词与空格,考虑到标点之后可能会有空格,于是,优化了下:
new RegExp(`([a-z]+[${regPunct}|\\s])+[a-z]*([${regPunct}|\\s][a-z]+)+`, 'gi')
足以现在满足大多数的场景。
三、在线验证 工具 出炉
现在我们有了基础技术,但还不足以作为工具,作为产品让更多人使用,因为在控制台输出这种事情非 程序员 以外的人是做不来的。
所以,可以将其变成可视化工具。
最后一个回答者 @wingmeng 参照了 @XboxYan 的一些思路除了输出验证结果,还输出了处理后的正确排版。
于是,站在这两位的肩膀上,我熬夜搞出了一个“翻译内容格式检验工具” —— check.html
直接输入内容,就可以高亮标记错误的翻译排版,同时显示正确的结果。
可以大大减轻校对时候的工作量,如果你也有参加掘金的翻译计划,或者自己平时翻译文章什么的,这个小工具可以试一试,虽不能100%完美解决各种排版问题,但至少可以解决大部分的问题,非常划算。
四、正则很烂也能实现的傻白甜方法
回到题目之外,在实际项目中遇到这样的排版验证需求,本质上就是用工程化的手段让普通人也能发现一些翻译排版的问题,因此,实际上,就算你正则表达式非常的烂,甚至一点也不会,你也能弄出一个可以使用的工具来解放生产力。
首先通过交互设计手段来降低我们实现的成本:
- 我们没有必要一次性所有的规则一次性匹配,我可以让用户选择具体哪条规则,到时候一个一个规则匹配就好了,用户完全不care的;
- 没有必要匹配所有的排版规则,比方说最后单词英文后面是全角标点,整句英文还使用半角标点,有些难度,也有些蛋疼,我们大不了忽略。因为本来就是辅助工具,没必要面面俱到。
然后,判断什么类型的字符,可以不用走高大上、学习成本较高的正则表达式,可以试试基于charCode值判断,例如:
// 判断字符类型 String.prototype.kind = function () { if (strPunct.indexOf(this) != -1) { return 'punct'; } var code = this.charCodeAt(0); if (code >= 65296 && code <= 65305) { return 'num-full'; } if (code > 256) { return 'zh'; } if (code >= 48 && code <= 57) { return 'num'; } else if (code >= 65 && code <= 90) { return 'en-up'; } else if (code >= 97 && code <= 133) { return 'en-low'; } return 'unknown'; };
这个要好理解的多,不同类型的字符串是有着特定的charCode区间范围的。
接下来事件就很简单了,我们只要遍历需要检测的文本内容,判断一下当前字符和下一个字符是否不符合要求就可以了。比方说“中英文之间需要增加空格”,遍历的时候,如果当前字符是中文,同时上一个字符和或者下一个字母是英文,则返回并高亮标记。
验证就结束了,一个循环+字符判断,就算只学习一个月的JavaScript也能够实现,这就是“傻白甜”实现方式。
眼见为实,为了方便大家学习,我专门做了个demo页面: check-foo.html
例如,我点击第一个检查按钮,成功高亮的不合要求的排版内容:
就一个循环外加一大堆if语句,一丁点正则表达式都没实现,就实现了看上去很难的翻译排版校验工具,而且多半比正则实现更稳健。
页面源码可以直接在这个项目的docs目录中找到: https://github.com/zhangxinxu/quiz
五、升职加薪与技术强弱没有直接关系
接下来要引出本次直播答疑最有价值的一个议题,是有关职业发展的,那就是升职加薪与技术强弱没有直接关系。
很多人都有这样一个错误的认识,因为自己的技术越强,薪资就越高,职位就越高,实际上不是这样子的,并没有直接的关系。职位的高低是与你对团队,对公司产生的价值相呼应的。作为一个技术人员,就算你的技术能力并不是非常的强,也能产生非常高的价值,关键在于认知与意识。
举个例子,某公司某团队打算加入掘金的翻译计划,来提高团队的影响力。
其中有个很重要的环节,那就是校验,而校验这种工作往往都是团队的负责人来做这个事情,负责最后的把关,免得出现一些意外的风险。这就问题来了,通常团队的负责人都是很忙的,要靠肉眼去识别那些翻译中出现的小错误,那是非常费心费力费神费时的事情,久而久之,体验会变得非常糟糕。
这个的团队里面有两个前端,一个技术非常扎实,正则玩得666,但总是沉浸在自己的技术世界里,专注于手头上的事情,以自己代码质量世界第一为自豪。另外一个技术一般般,正则玩得233,但是,其敏锐发现翻译排版校验走人工是非常低效的一件事情,于是当机立断决定做了一个工具,可以帮助大家快速的发现一些排版上的问题,解放生产力。虽然技术一般般,但他活用自己已经掌握的一些知识,通过良好的交互设计降低实现成本,用“傻白甜”的方式把这个东西给做出来了,别人一用,嘿,还行。
很显然,这件事情上,那个技术一般般的人创造的价值更大,而且大的非常明显。一个人技术再强,那解放只是你一个人的生产力,团队还有其他好几十号人并没有任何提升;但是如果你做出一个可以让大家都能提高生产力的工具,就算你技术一般般,但是你对这个团队产生的价值是非常深远的。翻译这种事情,全国有那么多人参加,如果你把这个工具开源出去,对团队带来的影响力要远比翻译一两个文章更高。
对比下:技术强的人自己生产力很高,然后没有然后;技术一般般的人让团队其他人生产力提高,同时通过开源工具给团队带来了影响力。如果你是领导,如果你是boss,你会提拔哪一个人?显然,只要领导不是智障,都会升职加薪是后面那个技术一般的人!
很多技术人员一直没有意识到这个问题,经常会抱怨,那个人技术那么烂,为什么这次升职晋升的是他?拜托,升职晋升是看贡献,不是看你一个人的技术水平,这个和搞科研是不一样的,企业是商业机构。
所以,大家一定要扭转意识,敏锐捕捉可以产生巨大价值的场景,不要只盯着自己的一亩三分地。工作中所有同事遇到的不爽、不悦,所有那些重复人力的场合,都是一次很好的提高你绩效的机会,就算你技术一般般,也能产生非常大的价值;如果你本身技术就很强,那更要抓住这样的机会,否则机会留给了别人,最后怎么被踩下去都不知道,那更惨!
六、关于本次直播
本次直播有录播,因为加班错过的小伙伴可以去围观,地址是: https://www.bilibili.com/video/av41104858/
欢迎提出各种意见。
关于群小测
每周三下班后会在微信粉丝群公布一道小测题,每周六上午10:00-11:00会以 直播形式 对大家的解答进行答疑。
目前一群已满,二群还有坑我,想入的可以加我微信好友 zhangxinxu-job,我拉你们进去,备注“入群”,然后附上你们的姓名,方便我备注。
好,本次答疑文字版就到这里。
我要看刀剑去了。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: https://www.zhangxinxu.com/wordpress/?p=8402
(本篇完)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 2019 JSConf China《面向传统,Serverless 进化之路》分享文字版
- Gulp入门与答疑
- Fluxion 实战答疑
- Fluxion 实战答疑
- 领域驱动设计基本概念答疑
- 前端面试必问题答疑(2)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web前端黑客技术揭秘
钟晨鸣、徐少培 / 电子工业出版社 / 2013-1 / 59.00元
Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含Web前端安全的跨站脚本(XSS)、跨站请求伪造(CSRF)、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、字符集、跨域、原生态攻击、高级钓鱼、蠕虫思想等,这些都是研究前端安全的人必备的知识点。本书作者深入剖析了许多经典的攻防技巧,并给出了许多独到的安全见解。 本书适合前端工......一起来看看 《Web前端黑客技术揭秘》 这本书的介绍吧!