百度前端技术学院Task20 笔记

任务描述：http://ife.baidu.com/task/detail?taskId=20

代码地址：https://github.com/Shirley0926/Baidu.IFE/blob/master/JavaScript/task20.js

demo地址：http://shirley0926.github.io/Baidu.IFE/html/task20.html

任务详解：

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

思路：对textarea输入的内容用正则表达式进行替换，把不是英文字母、汉字和数字的内容替换成“ ”，

txt.replace(/[^0-9a-zA-z\u4e00-\u9fa5]/g," ")

　　

然后再利用string.split函数将输入的字符串分成不同的单词存在数组中，对其进行渲染。

问题：测试下来，发现现在的正则表达式还是会保留着"`""_"等内容，不知道问题在什么地方

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

思路：用string.indexOf()方法确定查询文本框中的内容是不是与str中的内容匹配。如果有匹配的，将对应的div中的插入span标签将对应的内容放在span标签内，然后再给其一个不同的文字颜色。

花费巨长的时间实现后，发现别人的代码写的非常的简洁。还是对正则表达式理解不深，在task21的时候要提高改进。

1.string.split()后面的分割符可以跟正则表达式，然后再用filter（）方法把没有内容的字符串删除，就可以完成对textarea输入内容的处理。

        var arrWord = str.split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/).filter(function(e) {
            if (e != null && e.length > 0) {
                return true;
            } else {
                return false;
            }
        })；

 

2.而后面的查询与前面插入的render函数是同一个。render调用的时候可以传入实参，也可以不传入。插入的时候是render（），只是不执行if中的语句。这样可以让代码更加的简洁。我想到的处理方式是render（）好了之后查找到哪个字符串再对其处理，没有这个方式简洁。

后面查找的代码也很简洁，将查找内容采用正则表达式的方式进行匹配，如果发现后就对其进行处理。我的方式……实在是太复杂了。还有一个小疑问，为什么要这么写呢？

if (str != null && str.length > 0)

　　

    function render(str) {
        $('#result').innerHTML = arrData.map(function(d) {
            if (str != null && str.length > 0) {
                d = d.replace(new RegExp(str, "g"), "<span class='select'>" + str + "</span>");
            }
            return '<div>' + d + '</div>';
        }).join('');
    }

　　文中代码地址来源：https://github.com/soulclearm/Learn_front_end/blob/dev/public/second/task20.html

转载于:https://www.cnblogs.com/shirleyyang-fe/p/5700124.html