2016ife任务二十：基础JavaScript练习（三）

任务描述

• 基于任务18进行升级
• 将新元素输入框从input改为textarea
• 允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔
• 增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识

知识点

• 字符串的切割
• 正则表达式
• 正则中变量
• 字符串替换
• 数组的映射，过滤操作

思路

• 首先对文本框的内容进行操作，取得字符串然后按非字母非中文非数字的符号截断，形成数组，将数组过滤，留下正常的元素

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

• 将列表渲染出来后，查询，获取查询的之后，通过map遍历列表，用replace函数正则替换字符串中查询的值

      var arr = numlist.map(function(item){
          return item.replace(new RegExp(content,"g"),`<span class='select'>${content}</span>`)
      })