<!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>
