查找和替换
2019-04-15 本文已影响0人
沫忘丶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;
}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;
}
a{
text-decoration:none;
}
img{
border:none;
}
ol,ul{
list-style:none;
}
#box{
margin: 50px auto;
padding: 10px;
width: 500px;
height:200px;
border: 1px dotted #333;
}
#box span{
font-size: 18px;
color: red;
font-weight: bold;
}
#box p{
margin-top: 10px;
line-height: 30px;
font-size: 14px;
text-indent: 2em;
}
</style>
</head>
<body>
<div id="box">
<input id="inp1" type="text">
<input id="inp2" type="text">
<input id="btn1" type="button" value="查找">
<input id="btn2" type="button" value="替换">
<p id="txt">faksjhfkasfhafhoaisf
fjaiosjfoaijfosjifajsofija
asfjaoisfjoaifjoaisfjoai</p>
</div>
<script type="text/javascript">
var oInp1 = document.getElementById("inp1");
var oInp2 = document.getElementById("inp2");
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oTxt = document.getElementById("txt");
var txtHTML = oTxt.innerHTML;
oBtn1.onclick = function (){
var val = oInp1.value;
var arr = txtHTML.split(val);
//console.log(arr);
oTxt.innerHTML = arr.join("<span>"+val+"</span>");
};
oBtn2.onclick = function (){
var val1 = oInp1.value;
var val2 = oInp2.value;
if(val1){
var arr = txtHTML.split(val1);
oTxt.innerHTML = arr.join("<span>"+val2+"</span>");
txtHTML = arr.join(val2);
}
}
</script>
</body>
</html>
