内容来自百度前端学院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的用法