|
需求：
创建一个HTML页面，您可以在其中过滤来自输入字段的电子邮件地址。 #应该怎么样 HTML页面应包含以下元素: . 输入字段以输入电子邮件地址列表。 . 输入字段输入按索字符串。 显示结果的输出字段成表。 . 提交按钮(或另一种触发过滤方式) #应该如何工作 提交时，输入的电子邮件地址应被过滤。 在输出中应显示所有“有效的"电子邮件地址，其中包含*搜索字符申*。 输出中显示的电子邮件地址应按字母顺序排列。 电子邮件验证检查不一定要复杂。它可以是一个简单的验证。 在input.bxt中。您可以看到应该在输入字段中输入的数据示例。 如果输入@ webpower. com"作为搜索字符串，则outputbxt包含过滤的数据。 其他 如果可以，JavaScrip代码应该进行单元测试。在码之前我们可以写一下文档理清思路，推荐先看第二种 下面是第一种写法： ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ html代码如下： <div> <input type="text" id="txtSearch"> <button id="btnSearch">搜索</button> </div> <div> <textarea name="txtContentList" id="txtContentList" cols="30" rows="10"></textarea> </div> <div id="divResult"> </div> 运行后可以看到基本的界面效果。 js代码如下： let txtSearch = $("txtSearch"); let txtContentList = $("txtContentList"); let btn = $("btnSearch"); let emailArr = []; let search,contentList; // 1.把数组根据\n分隔 btn.onclick = function(){ $("divResult").innerHTML = ""; contentList = txtContentList.value; search = txtSearch.value; emailArr = contentList.split("\n"); // 2.进行搜索，返回一个新数组 let newArr = emailArr.filter((item)=>{ // 如果返回的是true就加入到新数组中，false则不加入 return item.indexOf(search) > -1; }) return newArr; // 3.添加到页面上显示 $("divResult").innerHTML = newArr.join(" "); } function $(id){ return document.getElementById(id); } 我们可以封装一下，便于以后的使用。就把第二步提取出来吧~ 创建一个 email.js代码如下： (function(){ function filterEmail(email,search){ // 2.进行搜索，返回一个新数组 let newArr = emailArr.filter((item)=>{ // 如果返回的是true就加入到新数组中，false则不加入 return item.indexOf(search) > -1; }) return newArr; } window.filterEmail = filterEmail; })() 此时，我们原来的第二步应该改为： // 2 let newArr = filterEmail(emailArr,search); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 下面是第二种写法： 思路为： /** * 1.获取textarea多行文本框的内容:myContent * 2.将textarea中获取到的多行文本数据按每一行进行识别，分隔成每一行一条单独的数据：code * 3.将code进行第一次过滤，过滤出符合邮箱格式的内容：checkArr * 4.将搜索框的内容和checkArr的对比，进行第二次过滤并存到searchArr中 * 5.将searchArr这个数组转换为字符串并在显示框输出 html代码为： <div>搜索框：<input type="text" id="mySearch"></div> <div> <textarea name="t1" id="t1" cols="30" rows="10"></textarea> </div> <!-- 搜索结果 --> <div id="myResult" class="myResult"> </div> <button id="btn">按钮</button> js代码为： // 记得引入jquery.js！ $('#btn').click(function(){ let myContent = $("#t1").val(); let mySearch = $("#mySearch").val(); let checkArr=[]; let searchArr=[]; let myList = ""; //console.log(mySearch); //console.log(myContent); let code = myContent.split(/[(\r\n)\r\n\s]+/); //console.log(code); // 第一次过滤 checkArr = code.filter(function(value){ let reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/; if(reg.test(value)){ return value; } }) //console.log(checkArr); // 第二次过滤 searchArr = checkArr.filter(function(value){ if(value.search(mySearch)!=-1){ return value; } }) console.log(searchArr); for( let j in searchArr){ myList+=searchArr[j]; myList+='\n' } console.log(myList); $("#myResult").html(myList); } ) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 好啦，以上就是两种方法~ |
|
公众号
