626566109
贫民
贫民
  • 最后登录2021-11-01
  • 发帖数3
阅读:260回复:0

[es5]【手把手】通过工厂模式过滤来自输入字段的电子邮件地址的两种写法

楼主#
更多 发布于:2021-10-14 12:31
需求:
创建一个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);
        }
        )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

好啦,以上就是两种方法~
游客


返回顶部

公众号

公众号