需求:
需求分析:
实现查找和替换
实现思路:
1.用要找的字符作为分隔符,分割整个字符串成数组,因为分隔符会被删掉,所以不用操心它的去留
2.用包装后的字符串格式的结点作为连接符,将1得到的数组join()回去,实现高亮或替换
难点:
因为css只能对节点设置样式,所以查找高亮本质上是给要找的文字包装了一下,如果自己的js写,肯定要涉及到:删掉所有原查找的原字符串,按顺序保存剩下的字符串并在空位添加一些标识,将替换或查找的字符串包装一下,通过上面的标识符插入回去,这中间肯定涉及到几个for循环,而且代码也许会很凌乱。
难点解决方案
用js提供的str.split 和 arr.join来实现就挺不错的
解决不了的难点
查找的字符太多或查找的字符包含回车有可能会查找不出
涉及的新知识
str.split();
att.join();
优化方向:
可以直接通过复制原文黏贴进查找框进行查找,用正则
备注:
查找的字符太多或查找的字符包含回车有可能会查找不出,不知到是不是作为分隔符,它的长度有限制,
还是html标签的<br/>它也会找到,例如【尊敬的领导: 您好....】,中间的空格实际上是回车,而在复制的时候回车标签<br/>显示不出,而 原始文本是通过innerHTML获得的里面包含<br/>这个标签,所以找的时候会因为没有<br/>而提示找不到。
又或者是因为在编辑器里为了格式好看做的缩进在html里生成了一些innerHTML找不到的字符,所以查找的时候也找不到。
【因为innerHTML会得到包括html标签和一些想不到的字符,所以可能要用到正则去掉这些东西】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin: 0; padding: 0; }
a{ text-decoration: none; }
p{
width: 400px;
height: 300px;
overflow-y: scroll;
float: left;
text-indent: 2em;
}
.con{ width: 520px; height: 330px; }
#btns{ float: left; width: 70px; margin-left: 16px; height: 30px; overflow: hidden; }
#btns a,#btns span{
width: 70px;
height: 30px;
background: #673AB7;
float: left;
color: #fff;
text-align: center;
line-height: 30px;
}
#btns span:hover{
cursor: pointer;
}
#btns .ac:hover{
background: #34146d;
padding-top: 2px;
height: 28px;
}
#inputWrap{
width: 410px;
height: 108px;
position: relative;
display: none;
}
#btnDiv{
width: 100%;
height: 30px;
border-bottom: 3px solid #9C27B0;
}
#btnDiv a{
width: 50%;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
color: #333;
font-weight: bold;
background: #cbafd0;
}
#btnDiv a:hover,#btnDiv .active2{ background: #9C27B0; color: #fff; }
.bar{
width: 400px;
border: 3px solid #9C27B0;
border-top: none;
padding: 20px 0 20px 4px;
position: absolute;
top: 33px;
left: 0;
z-index: 1;
}
.bar input{ outline: none; font-size: 14px; }
.bar input[type="button"]{
width: 80px;
height: 28px;
}
.bar input[type="text"]{
width: 146px;
height: 28px;
}
#btnDiv #close{
position: absolute;
width: 30px;
height: 30px;
background: #dbdbdb;
color: #999;
}
#btnDiv #close:hover{ color: #010101; }
</style>
</head>
<body>
<div class="con">
<p id="content">
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT培训品牌。
创办多年来我们一直恪守住IT培训的原则与底限,扎扎实实研发课程、不断提升服务质量,
在公司需求和学员进度中巧妙把握平衡,帮助学员打下坚实技术基础,不断向各大IT公司输送优秀开发人才!
2007年12月07日 - “妙味课堂” 品牌名称和网站域名 “www.miaov.com” 诞生;
2008年05月14日 - 研发完成 “XHTML+CSS2精品课程”,第二年后,妙味第一版网站上线;
2010年09月06日 - 研发完成 “JavaScript实战课程”,并配合2010年新官网上线,同时对外发布;
2011年至2013年,妙味课堂精准研发出领先行业的 “HTML5&CSS3课程”,并配合2013年最新官网同时对外发布;
2014年至今,妙味课堂重磅推出超值的“VIP会员”收费服务,并配合优良的IT培训资源、成熟的远程课堂方案,
彻底打通线上线下环节,为广大学习爱好者提供了一个更加便捷、有效、实用的IT学习方案!
</p>
<div id="btns">
<span href="javascript:;" style="margin-bottom: 14px;">展开</span>
<a href="javascript:;" class="ac">查找</a>
<a href="javascript:;" class="ac">替换</a>
</div>
</div>
<div id="inputWrap">
<div id="btnDiv">
<a href="javascript:;">查找</a>
<a href="javascript:;">替换</a>
<a href="javascript:;" id="close">X</a>
</div>
<div class="bar">
<input type="text" />
<input type="button" value="查找" />
</div>
<div class="bar">
<input type="text" />
<input type="text" />
<input type="button" value="替换" />
</div>
</div>
<script src="getId.js"></script>
<script src="main.js"></script>
</body>
</html>
$(function(){
var oBtns = $('btns');
oBtns.onOff = true;
var oSpan = oBtns.getElementsByTagName('span')[0];
var oBtn0 = oBtns.getElementsByTagName('a')[0];
var oBtn1 = oBtns.getElementsByTagName('a')[1];
oBtn0.index = 0;
oBtn1.index = 1;
var oCloseBtn = $('close');
var inputWrap = $('inputWrap');
var oDivBtn = $('btnDiv');
var oBar0 = inputWrap.getElementsByTagName('div')[1];
var oBar1 = inputWrap.getElementsByTagName('div')[2];
var eBtn0 = oDivBtn.getElementsByTagName('a')[0];
var eBtn1 = oDivBtn.getElementsByTagName('a')[1];
//文本标签
var oP = $('content');
//原始文本
var originalStr = oP.innerText;
//收缩展开
oSpan.onclick = function(){
if(oBtns.onOff){
oBtns.style.height = 104 + 'px';
oSpan.innerHTML = '收缩';
}else{
oBtns.style.height = 30 + 'px';
oSpan.innerHTML = '展开';
}
oBtns.onOff = !oBtns.onOff;
}
//叉叉按钮
oCloseBtn.onclick = function(){
inputWrap.style.display = 'none';
}
//****侧边栏按钮
oBtn0.onclick = function(){
inputWrap.style.display = 'block';
alertDisplayA();
alertClassA();
}
oBtn1.onclick = function(){
inputWrap.style.display = 'block';
alertDisplayB();
alertClassB();
}
////
//****tab按钮
eBtn0.onclick = function(){
oP.innerHTML = originalStr;
alertDisplayA();
alertClassA();
clearInputCon(oBar1.getElementsByTagName('input')[0]);
clearInputCon(oBar1.getElementsByTagName('input')[1]);
}
eBtn1.onclick = function(){
oP.innerHTML = originalStr;
alertDisplayB();
alertClassB();
clearInputCon(oBar0.getElementsByTagName('input')[0]);
}
////
//****变换样式函数
function alertDisplayA(){
oBar1.style.display = 'none';
oBar0.style.display = 'block';
}
function alertDisplayB(){
oBar0.style.display = 'none';
oBar1.style.display = 'block';
}
function alertClassA(){
eBtn0.className = 'active2';
eBtn1.className = '';
}
function alertClassB(){
eBtn1.className = 'active2';
eBtn0.className = '';
}
////
//清除輸入框內容
function clearInputCon(ele){
ele.value = '';
}
//****主要功能区
var eInputBar0 = oBar0.getElementsByTagName('input')[0];
var eBtnBar0 = oBar0.getElementsByTagName('input')[1];
var eInputBar1_0 = oBar1.getElementsByTagName('input')[0];
var eInputBar1_1 = oBar1.getElementsByTagName('input')[1];
var eBtnBar1 = oBar1.getElementsByTagName('input')[2];
eBtnBar0.onclick = function(){
var strOri = eInputBar0.value;
reString(strOri,strOri);
}
eBtnBar1.onclick = function(){
var strOri = eInputBar1_0.value;
var reStr = eInputBar1_1.value;
reString(strOri,reStr);
}
//进入函数默认reStr=ele2,即要替换的内容,如果要查找就传两个一样的参数,如果替换就传不一样的,总之后面都后面的代码都行得通
/*
如果没有输入查找内容,警告提示,否则进入else
通过分割字符串数组的长度确定有没有这个字符,没有警告提示return停止,否则下一步
##替换比查找多了一个警告的操作,本质上都是将内容拿出来包装一下再插回去,如果第二个参数为空,插入的就是空的span,实现了替换
##如果两个参数不一样,说明要替换,如果ele2无内容,提示是否要删除,否就return停止
*/
function reString(ele1,ele2){
var reStr = ele2 ? ele2 : ele1;
if( !ele1 ){
alert('请输入要查找或替换的内容');
return;
}else{
var splitArr = originalStr.split(ele1);
if(splitArr.length == 1){
alert('找不到【'+ele1+'】,请重新输入');
console.log( originalStr.indexOf(reStr) );
return;
}
if( !ele2 && ele1!=ele2 ){
reStr = '';
if( !confirm('您确定要删除【'+ ele1 +'】吗?') ){
console.log(reStr);
return;
}
}
var newStr = '<span style="background: yellow">'+ reStr +'</span>'
oP.innerHTML = splitArr.join(newStr);
originalStr = splitArr.join(reStr);
alert('查找或替换成功');
console.log(originalStr.charAt( originalStr.indexOf(reStr) ));
}
}
});