task20任务总结

任务20多了一个批量输入的功能以及文字查询的功能。其中批量输入的格式可以为数字，中文，英文等，可以通过回车，逗号，顿号，空格等作为不同内容的间隔。

代码：https://github.com/sunyueru/IFE/tree/master/task20
demo： https://sunyueru.github.io/IFE/task20/task20.html
这个任务注意点：

1. 批量输入以及遇到不同字符间隔拆分如何实现

2. 文字查询功能如何实现

   1、批量输入和字符拆分

function transValue(value){
    //split用于将字符串变成数组
    //注意""和"  "的区别
    // if(!value.match(/^[0-9a-zA-Z\u4e00-\u9fa5a]+$/)){
    //   alert("输入不合法哦，请输入字母数字或中文字符");
    //   return;
    // }else{
    //     return value.trim().split(/[,， ；;\t\r\n]/);
    // }
    // return value.replace(/[^0-9a-zA-Z\u4e00-\u9fa5a]/g," ").split(" ");
      //console.log(value.trim().split(/[,， ；;\t\r\n]/))
      return value.trim().split(/[,， ；;\t\r\n]/);
}

注释掉的部分是错误的。 一开始想错了。

 // if(!value.match(/^[0-9a-zA-Z\u4e00-\u9fa5a]+$/)){
    //   alert("输入不合法哦，请输入字母数字或中文字符");
    //   return;
    // }

这句代码意思是如果不是字母数字中文组合的就不对了，那就是也不能包含逗号这些断点字符了。
其实一句代码就可以了，return value.trim().split(/[,， ；;\t\r\n]/);
意思就是通过split截断value，返回一个数组。
还有一种反面思想，看到有人这么写的：

return value.replace(/[^0-9a-zA-Z\u4e00-\u9fa5a]/g," ").split(" ");

这句代码的意思是遇到非数字字母中文字符的就replace为空格，然后再用split（“ ”）转化成数组。注意引号之间有一个空格的。

2. 文字查询功能如何实现
基本思想就是遍历得到的数组，遇到符合条件的数字就替换。

function  find(){
    //alert("search");
    var str=search.value.trim();
    for(var i=0;i<data.length;i++){
         //alert(typeof(data[0]));
        data[i]=data[i].replace(new RegExp(str,"g"),"<span class='select'>"+str+"</span>");
        console.log(data[i]);
    }
    draw();
}

如上，遍历data数组，遇到要匹配的str，就把str用span标签包裹住，然后在css中设置span的背景颜色即可。
这里也使用了一个正则对象，“g”表示全局。