JavaScript数组字符串相关操作

Posted 2020-09-02 刘爽_杭州

任务描述

l  基于任务四进行升级

l  将新元素输入框从input改为textarea

l  允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔

l  增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识

 

<textarea> 标签定义多行的文本输入控件

<textarea id="num" name="num" rows="" cols=""></textarea>

 

输入多个内容，多个符号间隔。

stringObject.split(separator,howmany)可以进行字符串的分割。Separator可以是

字符串或正则表达式，题中用回车，逗号，顿号，空号进行分割，自然是用正则表达式。如下是一个正则速查表：http://www.jb51.net/shouce/jquery1.82/regexp.html

回车：\r;逗号：,顿号：、空号：\s;

num.split(/[,\s、\r]/);

let num = document.getElementById("num").value;

            var arr=[];

            arr = num.split(/[,\s、\r]/);

            for(let i = 0;i<arr.length;i++){

                  //对应的数据处理

            }

 

点击查询时，将查询词在各个元素内容中做模糊匹配

先做一个查询的输入框和按钮

<textarea name="searchText" rows="" cols=""></textarea>

<button id="search">查询</button>

然后对查询按钮绑定事件，事件能查询到li里面是否有匹配的单位。

search.addEventListener("click",function(){

               let text = searchText.value;

               for(let i= 0;i<data.length;i++){              

                    if(data[i].search(text)===0){

                          li[i].style.backgroundColor = "yellow";

                    }

               }
});
完整代码：https://github.com/moeeliu/ife/blob/master/js6.html