0、题目
- 基于任务18进行升级
- 将新元素输入框从input改为textarea
- 允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔
- 增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识
1、解题过程
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>task20</title>
6 <style>
7 #button{
8 display:inline-block;
9 }
10 ul{
11 list-style: none;
12 }
13 li{
14 background-color:rgba(255, 164, 66, 0.86);
15 display:inline-block;
16 width:50px;
17 padding:10px;
18 margin-left:10px;
19 color:white;
20 }
21 .blue{
22 background-color: blue;
23 }
24 </style>
25 </head>
26 <body>
27 <textarea id="input" type="text"></textarea>
28 <div id="button">
29 <button id="leftin">左侧入</button>
30 <button id="rightin">右侧入</button>
31 <button id="leftout">左侧出</button>
32 <button id="rightout">右侧出</button>
33 </div>
34 <input id="key-word" type="text" placeholder="请输入查询词！">
35 <button id="test" >查询</button>
36 <ul id="result">
37 </ul>
38 <script>
39 var $=function(id){
40 return document.getElementById(id);
41 }
42 var number=[];
43 //给按钮的父元素添加事件委托，避免给每个按钮添加点击事件.replace(/s+/g,"")
44 $("button").addEventListener("click",function(e){
45 var target=e.target;
46 switch(target.id){
47 case "leftin":{
48 cutString();
49 show();
50 break;
51 }
52 case "rightin":{
53 cutString();
54 show();
55 break;
56 }
57 case "leftout":{
58 alert(number.shift(number[number.length-1]));
59 show();
60 break;
61 }
62 case "rightout":{
63 alert(number.pop(number[0]));
64 show();
65 break;
66 }
67 }
68 })
69 //给输出的结果添加事件委托，使点击的元素被删除
70 $("result").addEventListener("click",function(e){
71 var target=e.target;
72 if(target.nodeName!="LI") return;
73 var tar=parseInt(target.getAttribute("id")); //得到被点击元素的id属性，之前id绑定的是元素在数组中的序号
74 number.splice(tar,1); //删除被点击的元素，1代表只删除一个元素
75 show();
76 return number;
77 })
78 //将得到的用户输入数据输出显示到id为result的列表中
79 function show(){
80 var detail=" ";
81 for(var i=0;i<number.length;i++){
82 detail+="<li id='"+i+"'>"+number[i]+"</li>";
83 }
84 result.innerHTML=detail;
85 }
86 //把输入的字符串按照分隔符分割并存入数组中
87 function cutString(){
88 var value=$("input").value;
89 var content=value.split(/[s
，\,、 ]/);
90 for(var i=0;i<content.length;i++){
91 if(content[i]==""||typeof(content[i])=="undefined"){content.splice(i,1);
92 i--;
93 }
94 }
95 number=content;
96 }
97 //模糊匹配关键词
98 $("test").onclick=function(){
99 var keyWord=$("key-word").value,
100 detail=" ";
101 for(var i=0;i<number.length;i++){
102 if(number[i].match(keyWord)!=null&&keyWord!=""){
103 detail+="<li id='"+i+"'class='blue'>"+number[i]+"</li>";
104 }
105 else detail+="<li id='"+i+"'>"+number[i]+"</li>";
106 }
107 result.innerHTML=detail;
108 }
109 </script>
110 </body>
111 </html>
2、遇到的问题