效果圖

示例代碼

html文件：

<div id="all">
    <div class='content'>
        <p>從最基礎(chǔ)的 HTML5移動端&PC端布局脓恕、CSS3動畫洼冻、3D交互特效、JS原理笆载、JS基礎(chǔ)樟凄、
          JS中級的DOM\BOM\EVENT模叙、ajax數(shù)據(jù)交互，再到JS的面向?qū)ο笱嗯肌S組件開發(fā)追城、JS模
          塊化開發(fā)（seaJS）逾条、 正則表達(dá)式、node.js宴合、jQuery庫實戰(zhàn)教程焕梅、JQ源碼分析、
          PC端布局實戰(zhàn)卦洽、電商網(wǎng)站實戰(zhàn)贞言、HTML5+CSS3實戰(zhàn)、移動端實戰(zhàn)阀蒂、交互動畫教程该窗、
          前端面試題、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("請輸入內(nèi)容昧绣！");
    } else if (oP.innerHTML.indexOf(aFind[0].value) == -1) {
        alert("沒有找到相同的內(nèi)容");
    } 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("請輸入內(nèi)容规肴！");
    } else if (oP.innerHTML.indexOf(aChange[0].value) == -1) {
        alert("沒有相同的內(nèi)容");
    } else { 
       var str = oP.innerHTML.split(aChange[0].value);
        oP.innerHTML = str.join("<span style='color:red;background: #ccc;'>" + aChange[1].value + "</span>");
    }
}