任務(wù)描述
- 基于基礎(chǔ)JavaScript練習(xí)（一）進(jìn)行升級(jí)
- 將新元素輸入框從input改為textarea
- 允許一次批量輸入多個(gè)內(nèi)容，格式可以為數(shù)字、中文、英文等，可以通過用回車，逗號(hào)（全角半角均可），頓號(hào)，空格（全角半角、Tab等均可）等符號(hào)作為不同內(nèi)容的間隔
- 增加一個(gè)查詢文本輸入框，和一個(gè)查詢按鈕，當(dāng)點(diǎn)擊查詢時(shí)，將查詢?cè)~在各個(gè)元素內(nèi)容中做模糊匹配，將匹配到的內(nèi)容進(jìn)行特殊標(biāo)識(shí)，如文字顏色等。舉例，內(nèi)容中有abcd，查詢?cè)~為ab或bc，則該內(nèi)容需要標(biāo)識(shí)
解決思路
首先分析本節(jié)練習(xí)與練習(xí)一之間有哪些邏輯需要改動(dòng)，再在練習(xí)一的基礎(chǔ)上追加本節(jié)練習(xí)的其他功能，需要改動(dòng)的內(nèi)容有以下幾點(diǎn)：
1.將輸入框從input改為textarea；
2.由原先的只允許輸入一個(gè)數(shù)字改為允許一次批量輸入多個(gè)內(nèi)容，格式可以為數(shù)字、中文、英文等，可以通過用回車，逗號(hào)（全角半角均可），頓號(hào)，空格（全角半角、Tab等均可）等符號(hào)作為不同內(nèi)容的間隔，這里需要將原有的限制輸入只能為數(shù)字的正則表達(dá)式刪除，然后使用split方法將字符串按照要求分割成字符串?dāng)?shù)組；
3.增加查詢功能,利用遍歷和search()方法實(shí)現(xiàn)；
整體代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>JS練習(xí)</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="左側(cè)入">
<input id="btn-right-to" type="button" value="右側(cè)入">
<input id="btn-left-out" type="button" value="左側(cè)出">
<input id="btn-right-out" type="button" value="右側(cè)出">
<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");
//判斷，如果有值并且符合判斷條件，添加這條數(shù)據(jù)數(shù)據(jù)
function insert(dir){
if(text_box.value==""){
alert("未輸入值");
text_box.focus();
}else{
//進(jìn)行字符串的分割
var mon=text_box.value.split(/[,\s、\r]/);
//遍歷分割后的字符串?dāng)?shù)組并將每一個(gè)字符串?dāng)?shù)組塞進(jìn)新建的li元素中，判斷方向，執(zhí)行左側(cè)插入/右側(cè)插入
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="";
}
}
}
}
//刪除數(shù)據(jù)
function del(dir){
if (content_box.childNodes.length<=0) {
alert("沒有可以刪除的元素");
return false;
}else if (dir==="left") {
alert("刪除內(nèi)容："+content_box.firstChild.innerText);
content_box.removeChild(content_box.firstChild);
text_box.value="";
}else if(dir==="right"){
alert("刪除內(nèi)容："+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);
//點(diǎn)擊查詢按鈕 search.addEventListener('click',function(e){
// 查詢方法，定義變量并獲取查詢框中需要查詢的值，新建數(shù)組newArray,遍歷已經(jīng)插入的內(nèi)容，并將值利用push()方法添加到newArray數(shù)組中。
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數(shù)組，并將要查詢的值利用search()與之每一個(gè)進(jìn)行對(duì)比，若返回值不等于-1，則說明找到匹配的結(jié)果，此時(shí)給其添加特殊的樣式效果
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到的新知識(shí)
1.輸入多個(gè)內(nèi)容，多個(gè)符號(hào)間隔
stringObject.split(separator,howmany)可以進(jìn)行字符串的分割。
Separator:字符串或正則表達(dá)式，從該參數(shù)指定的地方分割 stringObject，題中用回車，逗號(hào)，頓號(hào)，空號(hào)進(jìn)行分割，自然是用正則表達(dá)式。
howmany:該參數(shù)可指定返回的數(shù)組的最大長(zhǎng)度。如果設(shè)置了該參數(shù)，返回的子串不會(huì)多于這個(gè)參數(shù)指定的數(shù)組。如果沒有設(shè)置該參數(shù)，整個(gè)字符串都會(huì)被分割，不考慮它的長(zhǎng)度。
回車：\r
逗號(hào)：,
頓號(hào)：、
空號(hào)：\s
var mon=text_box.value.split(/[,\s、\r]/);
正則速查表
2.點(diǎn)擊查詢時(shí)，將查詢?cè)~在各個(gè)元素內(nèi)容中做模糊匹配
//首先需要一個(gè)查詢文本框和查詢按鈕 <p> <input type="text" name="" id="search_con"> <input type="button" id="search" name="" value="查詢"> </p>
//然后對(duì)查詢按鈕綁定事件，事件能查詢到li里面是否有匹配的單位。
search.addEventListener('click',function(e){
// 查詢方法，定義變量并獲取查詢框中需要查詢的值，新建數(shù)組newArray,遍歷已經(jīng)插入的內(nèi)容，并將值利用push()方法添加到newArray數(shù)組中。
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數(shù)組，并將要查詢的值利用search()與之每一個(gè)進(jìn)行對(duì)比，若返回值不等于-1，則說明找到匹配的結(jié)果，此時(shí)給其添加特殊的樣式效果
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:該參數(shù)可以是需要在 stringObject 中檢索的子串，也可以是需要檢索的 RegExp 對(duì)象。
search() 方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串;
如果沒有找到任何匹配的子串，則返回 -1,這里利用這一特性，如果返回值不等于-1，則找到匹配結(jié)果，對(duì)其樣式進(jìn)行處理。
注意：search（）方法總是返回 stringObject 的第一個(gè)匹配的位置，所以代碼中我做了遍歷處理，使每一個(gè)數(shù)組元素與目標(biāo)值進(jìn)行比較，而不是將整個(gè)數(shù)組與之比較。
3.push()方法的概念及語法
push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。
語法：arrayObject.push(newelement1,newelement2,....,newelementX)
