简单查找替换

效果图

示例代码

html文件：

<div id="all">
    <div class='content'>
        <p>从最基础的 HTML5移动端&PC端布局、CSS3动画、3D交互特效、JS原理、JS基础、
          JS中级的DOM\BOM\EVENT、ajax数据交互，再到JS的面向对象、JS组件开发、JS模
          块化开发（seaJS）、 正则表达式、node.js、jQuery库实战教程、JQ源码分析、
          PC端布局实战、电商网站实战、HTML5+CSS3实战、移动端实战、交互动画教程、
          前端面试题、canvas及游戏、html5视频音频、html5地理位置信息、 html5跨文档
          消息通信……
        </p>
    </div>
    <div class="btn">
        <input type="button" value="展开">
        <input type="button" value="查找">
        <input type="button" value="替换">
    </div>
</div>
<div id="box">
    <ul class="nav">
        <li class="active"><a href="#">查找</a></li>
        <li><a href="#">替换</a></li>
        <li class="closed"><a href="#">X</a></li>
    </ul>
    <div class="find">
        <input type="text" name="" value="">
        <input type="button" name="" value="查找">
    </div>
    <div class="change">
        <input type="text" name="" value="">
        <input type="text" name="" value="">
        <input type="button" name="" value="替换">
    </div>
</div>

css代码：

* {
    padding: 0;
    margin: 0;
    font-family: "micrisoft YaHei";
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    background: #efefe7;
    padding: 30px 300px;
}
#all {
    overflow: hidden;    width: 600px;
}
.content {
    float: left;
    padding: 30px 20px;
    width: 460px;
    height: 190px;
    background: #fff;
    margin: 0 10px;
}
p {
    font-size: 15px;
    line-height: 30px;
    font-family: "Mircrosoft YaHei"
}
.btn {
    width: 80px;
    float: left;
    /*display: none;*/
}
.btn input {
    height: 40px;
    line-height: 40px;
    width: 80px;
    margin-bottom: 2px;
    border: none;
    background: #ccc;
    color: #fff;
    font-size: 16px;
}
.btn input:hover{
    background: #999;
}
#box {
    border: 10px solid yellowgreen;
    width: 460px;
    margin-top: 10px;
    padding: 20px;
    display: none;
}
.nav {
    height: 30px;
    border-bottom: 2px solid coral;
    margin-bottom: 8px;
}
.nav li {
    float: left;
    padding: 0 30px;
    height: 30px;
    line-height: 30px;
}
.nav .closed {
    float: right;
    background: none;
    padding: 0;
}
.nav a {
    color: #000;
}
.nav li:hover, .nav .active {
    background: coral;
}
.nav li:hover a, .nav .active a {
    color: #fff;
}
.nav .closed a {
    color: #000;
}
.nav .closed:hover {
    background: none;
}
.nav .closed:hover a {
    color: #999;
}
#box input {
    height: 30px;
}
.change {
    display: none;
}

js代码：

var oAll = document.getElementById('all'),
        oP = document.getElementsByTagName('p')[0],
        oBtn = oAll.getElementsByTagName('div')[1],
        aInp = oAll.getElementsByTagName('input'),
        oBox = document.getElementById('box'),
        oUl = oBox.getElementsByTagName('ul')[0],
        aLi = oUl.getElementsByTagName('li'),
        aDiv = oBox.getElementsByTagName('div'),
        onOff = true;
fn2();
aInp[0].onclick = function () {
    aInp[0].value = '展开';
    if (onOff) {
        aInp[1].style.display = 'block';
        aInp[2].style.display = 'block';
        aInp[1].onclick = function () {
            fn1();
            find();
            aInp[0].value = '查找';
        };
        aInp[2].onclick = function () {
            fn1();
            change();
            aInp[0].value = '替换';
        }
    } else {
        fn2();
        aInp[0].value = '展开';
    }
    onOff = !onOff;
};
aLi[0].onclick = function () {
    find();
};
aLi[1].onclick = function () {
    change();
};
aLi[2].onclick = function () {
    oBox.style.display = 'none';
};
function fn1() {
    oBox.style.display = 'block';
    aInp[1].style.display = 'none';
    aInp[2].style.display = 'none';
    onOff = !onOff;
}
function fn2() {
    aInp[1].style.display = 'none';
    aInp[2].style.display = 'none';
}
function find() {
    aDiv[0].style.display = 'block';
    aDiv[1].style.display = 'none';
    aLi[0].className = 'active';
    aLi[1].className = '';
}
function change() {
    aDiv[0].style.display = 'none';
    aDiv[1].style.display = 'block';
    aLi[1].className = 'active';
    aLi[0].className = '';
}
var aFind = aDiv[0].getElementsByTagName('input');
var aChange = aDiv[1].getElementsByTagName('input');
aFind[1].onclick = function () {
    if (aFind[0].value == "") {
        alert("请输入内容！");
    } else if (oP.innerHTML.indexOf(aFind[0].value) == -1) {
        alert("没有找到相同的内容");
    } else {
        var str = oP.innerHTML.split(aFind[0].value);
        oP.innerHTML = str.join("<span style='color:red;background: #ccc;'>" + aFind[0].value + "</span>");
    }
};
aChange[2].onclick = function () {
    if (aChange[0].value == "") {
        alert("请输入内容！");
    } else if (oP.innerHTML.indexOf(aChange[0].value) == -1) {
        alert("没有相同的内容");
    } else { 
       var str = oP.innerHTML.split(aChange[0].value);
        oP.innerHTML = str.join("<span style='color:red;background: #ccc;'>" + aChange[1].value + "</span>");
    }
}