基础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)

参考文献

JavaScript数组、字符串相关操作
Javascript 基础知识

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容