查找并替换Java的过时方法查找且替换

转载

游侠小影 2024-08-13 21:25:25

文章标签 查找并替换Java的过时方法字符串 IT html 文章分类 Java 后端开发

需求：

查找并替换Java的过时方法查找且替换_html

需求分析：

实现查找和替换

实现思路：

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) ));

    }
    
}









});

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。