基础JavaScript练习（三）
任务描述
- 基于基础JavaScript练习（一）进行升级
- 将新元素输入框从input改为textarea
- 允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔
- 增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识
解决思路
首先分析本节练习与练习一之间有哪些逻辑需要改动，再在练习一的基础上追加本节练习的其他功能，需要改动的内容有以下几点：
1.将输入框从input改为textarea；
2.由原先的只允许输入一个数字改为允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔，这里需要将原有的限制输入只能为数字的正则表达式删除，然后使用split方法将字符串按照要求分割成字符串数组；
3.增加查询功能,利用遍历和search()方法实现；
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>JS练习</title>
<style type="text/css">
li{
display: inline-block;
width:auto;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background-color: #cd4a48;
margin-top: 10px;
margin-left: 5px;
padding: 0 5px;
}
.red{background-color: green;}
</style>
</head>
<body>
<input id="text-box" type="textarea" value="">
<input id="btn-left-to" type="button" value="左侧入">
<input id="btn-right-to" type="button" value="右侧入">
<input id="btn-left-out" type="button" value="左侧出">
<input id="btn-right-out" type="button" value="右侧出">
<p>
<input type="text" name="" id="search_con">
<input type="button" id="search" name="" value="查询">
</p>
<ul id="content-box"></ul>
<script>
window.onload=function(){
var text_box=document.getElementById("text-box"),
btn_left_to=document.getElementById("btn-left-to"),
btn_right_to=document.getElementById("btn-right-to"),
btn_left_out=document.getElementById("btn-left-out"),
btn_right_out=document.getElementById("btn-right-out"),
content_box=document.getElementById("content-box"),
search=document.getElementById("search");
//判断，如果有值并且符合判断条件，添加这条数据数据
function insert(dir){
if(text_box.value==""){
alert("未输入值");
text_box.focus();
}else{
//进行字符串的分割
var mon=text_box.value.split(/[,\s、\r]/);
//遍历分割后的字符串数组并将每一个字符串数组塞进新建的li元素中，判断方向，执行左侧插入/右侧插入
for (let i = 0; i < mon.length; i++) {
var content_list=document.createElement("li");
content_list.innerHTML=mon[i];
if (dir==="left") {
content_box.insertBefore(content_list,content_box.childNodes[0]);
text_box.value="";
}else if(dir==="right"){
content_box.appendChild(content_list);
text_box.value="";
}
}
}
}
//删除数据
function del(dir){
if (content_box.childNodes.length<=0) {
alert("没有可以删除的元素");
return false;
}else if (dir==="left") {
alert("删除内容："+content_box.firstChild.innerText);
content_box.removeChild(content_box.firstChild);
text_box.value="";
}else if(dir==="right"){
alert("删除内容："+content_box.lastChild.innerText);
content_box.removeChild(content_box.lastChild);
text_box.value="";
}else{
content_box.removeChild(event.target);
}
}
btn_left_to.addEventListener("click", function(){insert("left")}, false);
btn_right_to.addEventListener("click", function(){insert("right")}, false);
btn_left_out.addEventListener("click", function(){del("left")}, false);
btn_right_out.addEventListener("click", function(){del("right")}, false);
//点击查询按钮 search.addEventListener('click',function(e){
// 查询方法，定义变量并获取查询框中需要查询的值，新建数组newArray,遍历已经插入的内容，并将值利用push()方法添加到newArray数组中。
var search_val=document.getElementById("search_con").value;
var newArray=[];
for(let i=0;i<content_box.childNodes.length;i++){
newArray.push(content_box.childNodes[i].innerText);
}
//遍历newArray数组，并将要查询的值利用search()与之每一个进行对比，若返回值不等于-1，则说明找到匹配的结果，此时给其添加特殊的样式效果
for (let s = 0; s < newArray.length; s++) {
if(newArray[s].search(search_val)！==-1){
content_box.childNodes[s].className="red";
}
}
},false);
content_box.addEventListener('click',function(e){
if(e.target.nodeName.toLowerCase() == 'li'){
content_box.removeChild(e.target);
}
});
}
</script>
</body>
</html>
Get到的新知识
1.输入多个内容，多个符号间隔
stringObject.split(separator,howmany)可以进行字符串的分割。
Separator:字符串或正则表达式，从该参数指定的地方分割 stringObject，题中用回车，逗号，顿号，空号进行分割，自然是用正则表达式。
howmany:该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
回车：\r
逗号：,
顿号：、
空号：\s
var mon=text_box.value.split(/[,\s、\r]/);
正则速查表
2.点击查询时，将查询词在各个元素内容中做模糊匹配
//首先需要一个查询文本框和查询按钮 <p> <input type="text" name="" id="search_con"> <input type="button" id="search" name="" value="查询"> </p>
//然后对查询按钮绑定事件，事件能查询到li里面是否有匹配的单位。
search.addEventListener('click',function(e){
// 查询方法，定义变量并获取查询框中需要查询的值，新建数组newArray,遍历已经插入的内容，并将值利用push()方法添加到newArray数组中。
var search_val=document.getElementById("search_con").value;
var newArray=[];
for(let i=0;i<content_box.childNodes.length;i++){
newArray.push(content_box.childNodes[i].innerText);
}
//遍历newArray数组，并将要查询的值利用search()与之每一个进行对比，若返回值不等于-1，则说明找到匹配的结果，此时给其添加特殊的样式效果
for (let s = 0; s < newArray.length; s++) {
if(newArray[s].search(search_val)！==-1){
content_box.childNodes[s].className="red";
}
}
},false);
stringObject.search(regexp)
regexp:该参数可以是需要在 stringObject 中检索的子串，也可以是需要检索的 RegExp 对象。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串;
如果没有找到任何匹配的子串，则返回 -1,这里利用这一特性，如果返回值不等于-1，则找到匹配结果，对其样式进行处理。
注意：search（）方法总是返回 stringObject 的第一个匹配的位置，所以代码中我做了遍历处理，使每一个数组元素与目标值进行比较，而不是将整个数组与之比较。
3.push()方法的概念及语法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法：arrayObject.push(newelement1,newelement2,....,newelementX)
