标签：
任务描述：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
标签：
原文地址：http://www.cnblogs.com/shirleyyang-fe/p/5700124.html
