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;
}
.s1{
background: pink;
}
.s2{
background: skyblue;
}
</style>
html部分
js简单版
var oText = document.querySelector('#text');
var oIptSear = document.querySelector('[name="search"]');
var oIptRep = document.querySelector('[name="replace"]');
var oBtnSear = document.querySelector('.but1');
var oBtnRep = document.querySelector('.but2');
var oBtnRes = document.querySelector('.but3');
var str = oText.innerHTML;
oBtnSear.addEventListener('click' , function(){
var val = oIptSear.value;
var reg = `/${val}/g`;
if(val === ''){
window.alert('不能搜索空内容,请输入内容');
return;
}
if( eval(reg).test(str) === false ){
window.alert('没有搜索到匹配内容');
return;
}
var newStr = str.replace( eval(reg) , `<span style="background:red">${val}</span>` );
oText.innerHTML = newStr;
})
oBtnRep.addEventListener('click' , function(){
var valSear = oIptSear.value;
var valRep = oIptRep.value;
var reg = `/${valSear}/g`;
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复杂版
var oText = document.querySelector('#text');
var oIptSear = document.querySelector('[name="search"]');
var oIptRep = document.querySelector('[name="replace"]');
var oBtnSear = document.querySelector('.but1');
var oBtnRep = document.querySelector('.but2');
var oBtnRes = document.querySelector('.but3');
var str = oText.innerHTML;
var repStr = '';
oBtnSear.addEventListener('click', function () {
var val = oIptSear.value;
var reg = `/${val}/g`;
if (val === '') {
window.alert('搜索内容不能为空');
return;
}
if (repStr == '') {
if (eval(reg).test(str) === false) {
window.alert('没有搜索到匹配内容');
return;
}
} else {
if (eval(reg).test(repStr) === false) {
window.alert('没有搜索到匹配内容');
return;
}
}
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 () {
var valSear = oIptSear.value;
var valRep = oIptRep.value;
var reg = `/${valSear}/g`;
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;
}
}
if(repStr === ''){
var newStr = str.replace(eval(reg), valRep);
}else{
var newStr = repStr.replace(eval(reg), valRep);
}
oText.innerHTML = newStr;
repStr = newStr;
})
oBtnRes.addEventListener('click', function () {
oText.innerHTML = str;
repStr = '';
oIptRep.value = '';
oIptSear.value = '';
})