JS-正则表达式进行文本的搜索替换重置demo

css部分

<style>
html.body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#box{
    width:485px;
    height:240px;
    border:1px solid #000;
    margin:10px auto;
}
#box #header{
    margin-top:30px;
    margin-left:30px;
}
#box #header .search{
    width:140px;
    height:30px;
    line-height:30px;
    text-align:center;
}
#box #header .replace{
    width:140px;
    height:30px;
    line-height:30px;
    text-align:center;
}
#box #header .but1{
    width:40px;
    height:30px;
    line-height:30px;
    text-align:center;
}
#box #header .but2{
    width:40px;
    height:30px;
    line-height:30px;
    text-align:center;
}
#box #header .but3{
    width:40px;
    height:30px;
    line-height:30px;
    text-align:center;
}
#text{
    margin-top:15px;
    font-size:13px;
    text-indent:20px;/*首行缩进20px*/
}

.s1{
    background: pink;
}

.s2{
    background: skyblue;
} 
</style>

html部分

js简单版

// 1,获取标签对象和数据信息

// 标签对象

// 文字内容标签
var oText = document.querySelector('#text');

// 输入搜索内容input标签   用type class name哪个获取都可以
var oIptSear = document.querySelector('[name="search"]');
// 输入替换内容input标签
var oIptRep = document.querySelector('[name="replace"]');

// 获取搜索button按钮
var oBtnSear = document.querySelector('.but1');
// 获取替换button按钮
var oBtnRep = document.querySelector('.but2');
// 获取替换button按钮
var oBtnRes = document.querySelector('.but3');

// 建立变量,存储标签中的原始内容
var str = oText.innerHTML;

// 2,给3个按钮添加点击事件

// 给所有按钮添加事件
oBtnSear.addEventListener('click' , function(){
    // 1,获取搜索input中的数据
    var val = oIptSear.value;

    // 2,定义正则表达式,因为有变量要解析,只能写成模板字符串形式
    // 现在是字符串形式,要执行,必须使用 eval() 来执行字符串形式的正则表达式
    var reg = `/${val}/g`;

    // 3,做容错验证

    // 可以写非空判断,如果输入内容是空字符串,不执行之后的程序
    if(val === ''){
        window.alert('不能搜索空内容,请输入内容');
        return;
    }

    // 如果没有匹配的内容,提示并且不执行之后的程序
    // eval(reg).test(str) === false    !eval(reg).test(str)
    if( eval(reg).test(str) === false ){
        window.alert('没有搜索到匹配内容');
        return;
    }

    // 执行查找效果,将匹配查找的内容,替换为标签,并且添加样式
    // str存储的原始内容要执行重置效果,要定义新的变量来存储替换之后的内容
    var newStr = str.replace( eval(reg) , `<span style="background:red">${val}</span>` );
    
    // 将新的字符串,写入标签
    oText.innerHTML = newStr;
})


// 给替换按钮添加事件

oBtnRep.addEventListener('click' , function(){
    // 1,获取数据
    
    // 搜索input的数据
    var valSear = oIptSear.value;

    // 替换input的数据
    var valRep = oIptRep.value;

    // 2,定义正则表达式
    var reg = `/${valSear}/g`;

    // 3,容错验证
    // 可以写非空判断,如果输入内容是空字符串,不执行之后的程序
    if(valSear === ''){
        window.alert('不能搜索空内容,请输入内容');
        return;
    }

    if(valRep === ''){
        window.alert('替换内容不能为空');
        return;
    }

    // 如果没有匹配的内容,提示并且不执行之后的程序
    // 
    if( str.indexOf(valSear) === -1 ){
        window.alert('没有搜索到匹配内容');
        return;
    }

    // 执行替换操作
    // 将搜索的内容,替换为替换的内容
    // 在原始数据中查询匹配
    // 定义一个新的变量,来存储执行结果
    var newStr = str.replace( eval(reg) , valRep );

    // 将结果写入
    oText.innerHTML = newStr;
})


// 给重置添加事件
// 点击回复原始内容

oBtnRes.addEventListener('click' , function(){
    oText.innerHTML = str;
})

js复杂版

// 1,获取标签对象和数据信息

// 标签对象

// 文字内容标签
var oText = document.querySelector('#text');

// 输入搜索内容input标签
var oIptSear = document.querySelector('[name="search"]');
// 输入替换内容input标签
var oIptRep = document.querySelector('[name="replace"]');

// 获取搜索button按钮
var oBtnSear = document.querySelector('.but1');
// 获取替换button按钮
var oBtnRep = document.querySelector('.but2');
// 获取替换button按钮
var oBtnRes = document.querySelector('.but3');

// 建立变量,存储标签中的原始内容
var str = oText.innerHTML;

// 建立变量,存储执行替换之后的内容
var repStr = '';

// 2,给3个按钮添加点击事件

// 给所有按钮添加事件
oBtnSear.addEventListener('click', function () {
    // 1,获取搜索input中的数据
    var val = oIptSear.value;

    // 2,定义正则表达式,因为有变量要解析,只能写成模板字符串形式
    // 现在是字符串形式,要执行,必须使用 eval() 来执行字符串形式的正则表达式
    var reg = `/${val}/g`;

    // 3,做容错验证

    // 可以写非空判断,如果输入内容是空字符串,不执行之后的程序
    if (val === '') {
        window.alert('搜索内容不能为空');
        return;
    }

    // 如果没有匹配的内容,提示并且不执行之后的程序
    // eval(reg).test(str) === false    !eval(reg).test(str)
    // 如果 repStr 为 空字符串,证明没有执行过替换,搜索的是原始字符串
    // 如果 repStr 不是 空字符串,证明执行过替换,搜索的是替换后的字符串

    if (repStr == '') {
        if (eval(reg).test(str) === false) {
            window.alert('没有搜索到匹配内容');
            return;
        }
    } else {
        if (eval(reg).test(repStr) === false) {
            window.alert('没有搜索到匹配内容');
            return;
        }
    }

    // 执行查找效果,将匹配查找的内容,替换为标签,并且添加样式
    // str存储的原始内容要执行重置效果,要定义新的变量来存储替换之后的内容
    // 如果 repStr 为空字符串,证明没有执行过替换,搜索原始内容
    // 如果 repStr 不是空字符串,证明执行过替换,搜索 repStr 内容
    if(repStr === ''){
        var newStr = str.replace(eval(reg), `<span style="background:red">${val}</span>`);
    }else{
        var newStr = repStr.replace(eval(reg), `<span style="background:red">${val}</span>`);
    }
    
    // 将新的字符串,写入标签
    oText.innerHTML = newStr;
})


// 给替换按钮添加事件

oBtnRep.addEventListener('click', function () {
    // 1,获取数据

    // 搜索input的数据
    var valSear = oIptSear.value;

    // 替换input的数据
    var valRep = oIptRep.value;

    // 2,定义正则表达式
    var reg = `/${valSear}/g`;

    // 3,容错验证
    // 可以写非空判断,如果输入内容是空字符串,不执行之后的程序
    
    if (valSear === '') {
        window.alert('搜索内容不能为空');
        return;
    }


    if (valRep === '') {
        window.alert('替换内容不能为空');
        return;
    }

    // 如果没有匹配的内容,提示并且不执行之后的程序

    if (repStr == '') {
        if (str.indexOf(valSear) === -1) {
            window.alert('没有搜索到匹配内容');
            return;
        }
    } else {
        if (repStr.indexOf(valSear) === -1) {
            window.alert('没有搜索到匹配内容');
            return;
        }
    }

    // 执行替换操作
    // 将搜索的内容,替换为替换的内容
    // 在原始数据中查询匹配
    // 定义一个新的变量,来存储执行结果
    // 如果 repStr 为空字符串,证明没有执行过替换,替换原始内容
    // 如果 repStr 不是空字符串,证明执行过替换,替换 repStr 内容 
    
    if(repStr === ''){
        var newStr = str.replace(eval(reg), valRep);
    }else{
        var newStr = repStr.replace(eval(reg), valRep);
    }
    // 将结果写入
    oText.innerHTML = newStr;

    // 将结果,存储在 repStr 中
    repStr = newStr;
})


// 给重置添加事件
// 点击回复原始内容

oBtnRes.addEventListener('click', function () {
    // 将内容恢复到原始内容
    oText.innerHTML = str;
    // 给 repStr 重新赋值 空字符串
    repStr = '';

    // 给两个input标签,定义空内容
    oIptRep.value = '';
    oIptSear.value = '';
})