JavaScript系列---【字符串对象(String)--查找替换案例】

    <input type="text" value="查找" id="txt1">
    <input type="text" value="替换" id="txt2">
    <input type="button" id="btn1" value="按钮">

    <div id="div1">内容</div>
    <script>
        //   获取元素
        var oInputs = document.getElementsByTagName("input");
        var div1 = document.getElementById("div1");

        // 绑定事件
        oInputs[2].onclick = function () {
            // 获取查找值和替换
            var searchStr = oInputs[0].value;
            var replaceStr = oInputs[1].value;

            // 字符串替换
            // 判断条件：看当前这个div中内容是否包含这个字符串(查找那个)
            // while(div1.innerHTML.indexOf(searchStr) != -1){
            //     // 给div重新赋值
            //     div1.innerHTML = div1.innerHTML.replace(searchStr,"<span>"+replaceStr+"</span>");
            // }

            // for (; div1.innerHTML.indexOf(searchStr) != -1;) {
            //     // 给div重新赋值
            //     div1.innerHTML = div1.innerHTML.replace(searchStr, "<span>" + replaceStr + "</span>");
            // }

            // split及join
            // 给div1重新赋值
            // var str = div1.innerHTML;
            // console.log(str.split("人").join("<span>哈哈</span>"));

            div1.innerHTML = div1.innerHTML.split(searchStr).join("<span>" + replaceStr + "</span>");
        }
    </script>