基础JavaScript练习（三）

任务描述

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

解决思路

首先分析本节练习与练习一之间有哪些逻辑需要改动，再在练习一的基础上追加本节练习的其他功能，需要改动的内容有以下几点：
1.将输入框从input改为textarea；
2.由原先的只允许输入一个数字改为允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔，这里需要将原有的限制输入只能为数字的正则表达式删除，然后使用split方法将字符串按照要求分割成字符串数组；
3.增加查询功能,利用遍历和search()方法实现；

整体代码




    
    
    JS练习

Get到的新知识

1.输入多个内容，多个符号间隔

stringObject.split(separator,howmany)可以进行字符串的分割。
Separator:字符串或正则表达式，从该参数指定的地方分割 stringObject，题中用回车，逗号，顿号，空号进行分割，自然是用正则表达式。
howmany:该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
回车：\r
逗号：,
顿号：、
空号：\s
var mon=text_box.value.split(/[,\s、\r]/);
正则速查表

2.点击查询时，将查询词在各个元素内容中做模糊匹配

//首先需要一个查询文本框和查询按钮

//然后对查询按钮绑定事件，事件能查询到li里面是否有匹配的单位。              
 search.addEventListener('click',function(e){
                                    // 查询方法，定义变量并获取查询框中需要查询的值，新建数组newArray,遍历已经插入的内容，并将值利用push()方法添加到newArray数组中。
                            var search_val=document.getElementById("search_con").value;
                            var newArray=[];
                            for(let i=0;i

 
 stringObject.search(regexp)
 regexp:该参数可以是需要在 stringObject 中检索的子串，也可以是需要检索的 RegExp 对象。
 search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串;
 如果没有找到任何匹配的子串，则返回 -1,这里利用这一特性，如果返回值不等于-1，则找到匹配结果，对其样式进行处理。
 注意：search（）方法总是返回 stringObject 的第一个匹配的位置，所以代码中我做了遍历处理，使每一个数组元素与目标值进行比较，而不是将整个数组与之比较。 
 3.push()方法的概念及语法 
 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
 语法：arrayObject.push(newelement1,newelement2,....,newelementX) 
 参考文献 
 JavaScript数组、字符串相关操作
 Javascript 基础知识