百度前端技术学院Task20 笔记

任务描述：http://ife.baidu.com/task/detail?taskId=20

代码地址：https://github.com/Shirley0926/Baidu.IFE/blob/master/JavaScript/task20.js

demo地址：http://shirley0926.github.io/Baidu.IFE/html/task20.html

任务详解：

1.允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔

思路：对textarea输入的内容用正则表达式进行替换，把不是英文字母、汉字和数字的内容替换成“ ”，

txt.replace(/[^0-9a-zA-z\u4e00-\u9fa5]/g," ")

然后再利用string.split函数将输入的字符串分成不同的单词存在数组中，对其进行渲染。

问题：测试下来，发现现在的正则表达式还是会保留着"`""_"等内容，不知道问题在什么地方

2.增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识

思路：用string.indexOf()方法确定查询文本框中的内容是不是与str中的内容匹配。如果有匹配的，将对应的div中的插入span标签将对应的内容放在span标签内，然后再给其一个不同的文字颜色。

花费巨长的时间实现后，发现别人的代码写的非常的简洁。还是对正则表达式理解不深，在task21的时候要提高改进。

1.string.split()后面的分割符可以跟正则表达式，然后再用filter（）方法把没有内容的字符串删除，就可以完成对textarea输入内容的处理。

        var arrWord = str.split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/).filter(function(e) {if (e != null && e.length > 0) {return true;} else {return false;}})；

2.而后面的查询与前面插入的render函数是同一个。render调用的时候可以传入实参，也可以不传入。插入的时候是render（），只是不执行if中的语句。这样可以让代码更加的简洁。我想到的处理方式是render（）好了之后查找到哪个字符串再对其处理，没有这个方式简洁。

后面查找的代码也很简洁，将查找内容采用正则表达式的方式进行匹配，如果发现后就对其进行处理。我的方式……实在是太复杂了。还有一个小疑问，为什么要这么写呢？

if (str != null && str.length > 0)

    function render(str) {$('#result').innerHTML = arrData.map(function(d) {if (str != null && str.length > 0) {d = d.replace(new RegExp(str, "g"), "<span class='select'>" + str + "</span>");}return '<div>' + d + '</div>';}).join('');}

　　文中代码地址来源：https://github.com/soulclearm/Learn_front_end/blob/dev/public/second/task20.html

转载于:https://www.cnblogs.com/shirleyyang-fe/p/5700124.html

百度前端技术学院Task20 笔记相关推荐

2018年百度前端技术学院学习笔记
对百度前端技术学院心仪已久,今天开始正式学习了,特地开个博客记录今后的学习学了几个月的前端了,之前也做过一些百度前端学院的练习,终于等到2018年前端学院开始,在开头先立flag,本次前端学院的任务 ...
记录：百度前端技术学院任务笔记（一）
其实严格来说,今天算不上是学习前端的第一天.之前有断断续续的看过一些书和视频教程,只是今天正式参加了百度前端学院的课程任务,从这一点来说,就把今天当作是正式学习的第一天吧. 今天的任务其实就是一个大概 ...
百度前端技术学院-精选笔记-1 HTML学习笔记
以下是我个人的理解,希望得到肯定与指正,在此先感谢各位. 而且不说温故知新,看别人的笔记就相当于复习了,记得更牢固. 向大家安利四个在线编写页面的网站(在写笔记的时候,千万不要在预览的状态下点击链接, ...
学计算机前端技术学院,百度前端技术学院(任务)
百度前端技术学院这一期高档班的标题列表在:ife/2015_spring/taskatmaster·baidu-ife/ife·GitHub下面的高档班(趁便吐槽一下知乎的链接无法识别URL中文锚点 ...
百度前端技术学院—斌斌学院题库转载 cristina-guan
Cristina_Guan https://github.com/CristinaGuan 博客园首页新随笔联系订阅管理随笔 - 34 文章 - 3 评论 - 2 百度前端技术学院-斌 ...
百度前端技术学院—斌斌学院题库
任务一:零基础JavaScript编码(一) 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决 ...
百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

百度前端技术学院Task20 笔记

百度前端技术学院Task20 笔记相关推荐

最新文章

热门文章