內容來自百度前端學院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);

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物件。