<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="box">
<div id="content">
目前主要針對的是javascript培訓，同時還提供了css教程、javascript視頻、js特效等，最新推出了外地學員們喜歡的javascript網絡課程服務，同時還爲處於javascript入門階段的朋友錄製了大量javascript視頻，其中涉及了大量javascript基礎知識，希望妙味課堂推出的javascript網絡培訓課程能帶給大家更多驚喜。目前主要針對的是javascript培訓，同時還提供了css教程、javascript視頻、js特效等，最新推出了外地學員們喜歡的javascript網絡課程服務，同時還爲處於javascript入門階段的朋友錄製了大量javascript視頻，其中涉及了大量javascript基礎知識，希望妙味課堂推出的javascript網絡培訓課程能帶給大家更多驚喜。目前主要針對的是javascript培訓，
</div>
<div id="open">
<a href="javascript:;">展開</a>
<ul style="display: none;">
<li><a href="javascript:;">查找</a></li>
<li><a href="javascript:;">替換</a></li>
</ul>
</div>
<div id="fun">
<div class="btns">
<a href="javascript:;" class="active">查找</a>
<a href="javascript:;">替換</a>
</div>
<div id="search" >
<input type="text" />
<input type="button" value="" />
</div>
<div id="replace" style="display: block;">
<input type="text" />
<input type="text" />
<input type="button" value="" />
</div>
</div>
</div>
<script type="text/javascript">
function $(cssSelector,parent){
parent = parent||document; // 給 parent 設置了一個默認值是document
var els = parent.querySelectorAll(cssSelector);
return els.length > 1?els:els[0];
};
// // 查找功能
// (function(){
// var content = $("#content");
// var startContent = content.innerHTML;
// var txt = $('#search input[type="text"]');
// var btn = $('#search input[type="button"]');
// btn.onclick = function(){
// var str = txt.value;
// if(!str.trim()){
// alert("請輸入要查找的內容");
// txt.focus();//讓元素得到焦點
// return;
// }
// var inners = startContent.split(str);
// // 判斷有沒有要查找的內容
// if(inners.length < 2){
// alert("沒有您要查找的內容");
// txt.focus();//讓元素得到焦點
// return;
// }
// content.innerHTML = inners.join('<mark>'+str+'</mark>');
// };
// })();
// 查找功能
(function(){
var content = $("#content");
var startContent = content.innerHTML;
var txt = $('#replace input[type="text"]');
var btn = $('#replace input[type="button"]');
btn.onclick = function(){
var str = txt[0].value;
var newStr = txt[1].value;
var inners = startContent.split(str);
content.innerHTML = inners.join('<mark>'+newStr+'</mark>');
// 替換完之後，同步修改原始字符
startContent = inners.join(newStr);
};
})();
</script>
</body>
</html>