javascript简单的正则表达式入门

内容来自百度前端学院javascript入门课程
基本的HTML：

<textarea placeholder="请输入字符并用不同符号分隔" rows="5" cols="20"></textarea>        <input type="button" value="插入" id="insert"/>        <input type="button" value="查询" id="search"/>        <input type="text" id="keyword"/>        <div id="container" class="container"></div>

样式：

            .found{                background-color: #fff;                color:red;            }            textarea{                resize: none;            }            .container div{                display: inline-block;                float: left;                padding:0 10px;                margin: 5px 5px 0 0;                height:50px;                line-height:50px;                background-color: #FF0000;                color: #fff;                font-size: 30px;                font-weight: bold;            }            .container{                overflow: auto;            }

javascript：

var text = document.getElementsByTagName('textarea');var container = document.getElementById('container');var data = [];window.onload = function(){    var insert = document.getElementById('insert');    var search = document.getElementById('search');    insert.onclick = function(){        var words =text[0].value;//获取textarea内容，为什么要用text[0]？    console.log(words);        words = words.replace(/[^0-9a-zA-Z]/g, '');//过滤掉除字母和数字外其他值        var arr = words.split(' ');//将字符串分割为字符(串)数组        for(var i = 0; i < arr.length; i++){            var oDiv = document.createElement('div');            oDiv.innerHTML = arr[i];            container.appendChild(oDiv);            data.push(arr[i]); //字符数组内容逐一加入新数组        }    }    search.onclick = function(){        var input = document.getElementById('keyword').value;//对新数组中的字符(串)遍历操作        container.innerHTML = data.map(function(d){            if(input != null && input.length > 0){                d = d.replace(new RegExp(input, 'g'), '<span class="found">' + input + '</span>');//新建一个针对输入内容的正则对象，匹配模式为全局。选中的内容通过span标签包裹并增加样式            }            return "<div>" + d + "</div>" //将最后结果返回        }).join(''); //加入到一个数组中    }}

document.write和innerHTML有什么区别
前者是直接将内容写入文档流，如果写入之前没有调用document.open，那么回自动调用document.open（每打开一次文档流都会清除之前的所有内容包括变量）。每次写完关闭后重新调用该函数的话，会导致页面重写。
innerHTML是将内容写入某个DOM节点，会导致目标节点重构。
如果是加载时用脚本输出，那么使用document.write合适；
如果是加载完成之后要加入内容，使用innerHTML比较适合

innerHTML和appendChild有什么区别？
前面讲到innserHTML会破坏目标元素，所以如果要在目标元素后面加入内容，那么就要在目标元素后添加一个空白节点，然后将需要插入的节点样式赋予目标元素.innerHTML。
使用appendChild之前要createElement，然后目标元素.appendChild。
一般来说appendChild的性能更优

<div id="target">目标元素</div>要在其后加入内容innerHTML:<div id="target">目标元素</div><div></div>var tar = document.getElementById("target");tar.innerHTML = "<div>新建元素</div>"appendChild:<div id="target">目标元素</div>var tar = document.getElementById("target");var add = document.createElement("div");tar.appendChild(add);

网上找到一张图，来自知乎：

相关问题页：https://www.zhihu.com/question/24927450

map方法就是对一个数组的内容都做同一件事，然后输出
思考一下，jquery的$.each和$.map有什么区别？
实际上，它们两个方法都是遍历，但是each没有返回值，所以不会新建一个数组，而map有返回值，会新建一个数组。

function fun1() {    return this + 1;}function fun2(el) {    return el + 1;}var item = [5,4,3,2,1];var newitem1 = $.each(item, fun1);var newitem2 = $.map(item, fun2);console.log(newitem1); // [5, 4, 3, 2, 1] console.log(newitem2); // [6, 5, 4, 3, 2] 

map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。

参考：
jQuery的each与map的区别(很详细)
https://stackoverflow.com/questions/749084/jquery-map-vs-each
jQuery内置函数map和each的用法