任务目的
- 实践JavaScript数组、字符串相关操作
任务描述
- 基于 Task05 进行升级
- 将新元素输入框从input改为textarea
- 允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔
- 增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识
整体思路
首先根据题目要求将HTML写出来，一个div用来存放textarea、input和button。一个div用以最终数据的显示。
<div class="myForm">
<textarea id="data-input" class="form-control" rows="3"></textarea>
<!-- <input type="text" id="data-input"> -->
<div class="btn-container">
<button id="left-in" class="btn btn-success">左侧入</button>
<button id="right-in" class="btn btn-success">右侧入</button>
<button id="left-out" class="btn btn-danger">左侧出</button>
<button id="right-out" class="btn btn-danger">右侧出</button>
</div>
<div class="search">
<input type="text" id="search-input" class="form-control">
<button id="search" class="btn btn-primary">查询</button>
</div>
</div>
<div id="list-wrap"></div>
然后给页面的各个元素添加事件监听器
function init(){
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener("click",function(e){
btnHandle(e.target);
});
}
$("data-input").addEventListener("focus",function(e){
e.target.value = "";
});
$("search-input").addEventListener("focus",function(e){
e.target.value = "";
});
}
init();
写一个btnhandler用以处理不同的事件，针对不同的元素事件调用对应的函数
//点击按钮时的处理逻辑
function btnHandle(target){
var id = target.id;
switch(id){
case 'left-in':
dataIn("left");
break;
case 'right-in':
dataIn("right");
break;
case 'left-out':
leftOut();
break;
case 'right-out':
rightOut();
break;
case 'search':
search();
break;
}
renderData();
}
然后就是完成数据的输入和输出函数
//输入数据处理函数
function dataIn(tag){
var str = $("data-input").value.trim();
var dataWord = str.split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/);
if(tag == "left"){
for(var i=0;i<dataWord.length;i++){
data.unshift(dataWord[i]);
}
}else if(tag == "right"){
for(var i=0;i<dataWord.length;i++){
data.push(dataWord[i]);
}
}else{
return;
}
}
//左出数据处理函数
function leftOut(){
if(data.length > 0){
var item = data.shift();
alert(item);
}else{
alert("目前为空，请先输入");
}
}
//右出数据处理函数
function rightOut(){
if(data.length > 0){
var item = data.pop();
alert(item);
}else{
alert("目前为空，请先输入");
}
}
由于新增了查询功能，所以需要写一个函数用以标记哪些数据被查询，将被包含被查询数据的下标存储在一个数组里
//模糊匹配函数
function search(){
if(data.length){
indexs = [];
var str = $("search-input").value.trim();
if(str){
for(var i=0;i<data.length;i++){
if(data[i].indexOf(str) != -1){
indexs.push(i);
}
}
// console.log(indexs);
}
// console.log(str);
renderData();
}
}
最后是数据的渲染函数
//渲染数据
function renderData(){
var text = '';
for(var i=0;i<data.length;i++){
if(isSearched(i)){
text += '<div class="selected">' + data[i] + '</div>';
}else{
text += '<div class="list">' + data[i] + '</div>';
}
}
var list = $("list-wrap");
list.innerHTML = text;
//给list-wrap中的div添加点击删除事件
// var lists = document.getElementsByClassName("list");
var lists = list.children;
for(var i=0;i<lists.length;i++){
lists[i].addEventListener("click",function(e){
var node = e.target;
//获取当前div在数组中的索引
var index = [].indexOf.call(node.parentNode.children,node);
data.splice(index,1);
//更新查询标记数组
search();
//渲染数据
renderData();
})
}
}
数据渲染函数在进行数据渲染时，使用了一个函数来检测该数据是否是被检测到的数据
//是否被匹配函数
function isSearched(value){
var flag = false;
for(var i=0;i<indexs.length;i++){
if(value == parseInt(indexs[i])){
flag = true;
return flag;
}
}
return flag;
}