对自己最近做的一些小练习进行总结吧，巩固下记忆；
IFE JavaScript Task0002-1 小练习1：处理用户输入
第一阶段
在页面中，有一个单行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用半角逗号来作为不同爱好的分隔。
当点击按钮时，把用户输入的兴趣爱好，按照上面所说的分隔符分开后保存到一个数组，过滤掉空的、重复的爱好，在按钮下方创建一个段落显示处理后的爱好。
思路：创建一个数组保存数据；其中用array.split方法，以(",")为分割号作为数组元素的分割；
去掉数组里重复与空的元素；方法有很多，我这里用的是indexOf方法，先建立一个新数组；然后把这个数组的元素与之前保存用户数据的数组进行对比，如果找不到并且值不为空，那就把此时元素存进新的数组里；进行去重和过滤；
（其实也想过用filter方法，但是显示错误用不了，等以后再完善下）
第二阶段
单行变成多行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用换行、空格（全角/半角）、逗号（全角/半角）、顿号、分号来作为不同爱好的分隔。
思路：这个将分隔符号变为正则进行检测就好了；
第三阶段
用户输入的爱好数量不能超过10个，也不能什么都不输入。当发生异常时，在按钮上方显示一段红色的错误提示文字，并且不继续执行后面的行为；当输入正确时，提示文字消失。
同时，当点击按钮时，不再是输出到一个段落，而是每一个爱好输出成为一个checkbox，爱好内容作为checkbox的label。
思路：先在去重前进行判断，超过就显示错误提示；
然后最后对处理好的数据用innerHTML输出；
代码如下：
1 <body> 2 <textarea type="text" class="hobby"cols="45" rows="10"></textarea> <button class="hobby-btn">确定</button> 3 <p style="display: none;color: red" class="error">输入的爱好数量不能超过10个，并且不能为空</p> 4 <form class="textshow"></form> 5 </body> 6 <script> 7 var hobbybtn=document.querySelector(".hobby-btn"); 8 var show=document.querySelector(".textshow"); 9 var erorrtirp=document.querySelector(".error"); 10 hobbybtn.onclick=function(){ 11 var hobbyText=document.querySelector(".hobby").value.trim(); 12 var hobbyArray=hobbyText.split(/ |s+|\,|，|、|;|；/); 13 var resultarr=[];//去重后的数组 14 if(hobbyArray.length>10||hobbyText===""){ 15 erorrtirp.style.display="block"; 16 } 17 else{ 18 erorrtirp.style.display="none"; 19 for(var i=0;i<hobbyArray.length;i++){ 20 if(resultarr.indexOf(hobbyArray[i])===-1&&hobbyArray[i]!==""){ 21 resultarr.push(hobbyArray[i]); 22 } 23 } 24 for(var j=0;j<resultarr.length;j++){ 25 show.innerHTML+= "<label>" + "<input type='checkbox'>" + resultarr[j] + "</label>" 26 } 27 } 28 29 30 31 32 /*function check(item) { 33 34 for(var i=0;i<hobbyArray.length;i++){ 35 if(item!==hobbyArray[i]){ 36 return item 37 } 38 } 39 } 40 41 var newarry=hobbyArray.filter(check(item));*/ 42 43 } 44 45 </script>