js实现字符串的查找和替换

最新推荐文章于 2024-01-17 11:31:29 发布

啾啾哒

最新推荐文章于 2024-01-17 11:31:29 发布

阅读量7.2k

点赞数 2

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/zj128548/article/details/72869217

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 600px;
				margin: 0 auto;
				border: 10px solid #9632cc;
			}
			#span1{
				display:block;
				width: 560px;
				overflow:hidden;
				background: #ccc;
				font-size: 20px;
				padding: 20px;
			}
			a{
				text-decoration: none;
				font-size: 20px;
				float: left;
				display: block;
				width: 100px;
				padding: 10px;
				text-align:center;
				color:black;
			}
			.active{
				background: orange;
				color: #fff;
			}
			p{
				clear: both;
			}
			#oprate{
				padding: 15px;
			}

		</style>
		<script type="text/javascript">
			window.οnlοad=function(){
				var ospan=document.getElementById("span1");
				var odiv= document.getElementsByTagName("a");//获取到所有div
				var op=document.getElementsByTagName("p");
				var oinput=document.getElementsByTagName("input");

		        //第一个div
				op[1].style.display="none";
				odiv[0].οnclick=function(){
					for(i=0;i<odiv.length;i++){
						odiv[i].className="";
					}
					this.className="active";
					op[1].style.display="none";
			        op[0].style.display="block";
					
				}
				
				//第二个div
				odiv[1].οnclick=function(){
					for(i=0;i<odiv.length;i++){
						odiv[i].className="";
					}
					this.className="active";
					op[0].style.display="none";
			        op[1].style.display="block";
				}


				//查找部分
				oinput[1].οnclick=function(){
					if(oinput[0].value==""){
						alert("输入为空，请重新输入")
					}else{
                        var oValue=oinput[0].value;
                        if(oText.indexOf(oValue)!=-1)
                        {
                            ospan.innerHTML=oText;
                            var arr=ospan.innerHTML.split(oValue);
                            oValue = arr.join('<span style="background:yellow;">'+oValue+'</span>');
                            ospan.innerHTML=oValue;
                        }else{
                            alert('未查找到');
                            oinput[0].value='';
                        }
					}

				}


				//查找并替换部分

                oinput[4].οnclick=function(){
                        if(oinput[2].value==""){
                            alert("输入为空，请重新输入")
                        }else{
                            var oValue2=oinput[2].value;
                            var oValue3=oinput[3].value;
                            var oText = ospan.innerHTML;
							if(oText.indexOf(oValue2)!=-1)
                                {

                                    ospan.innerHTML=oText;
                                    var arr=ospan.innerHTML.split(oValue2);
                                    oValue = arr.join('<span style="background:#f1bbff;">'+oValue3+'</span>');
									ospan.innerHTML=oValue;
                                }else{
                                    alert('未查找到');
                                    oinput[2].value='';
                                }
							}

                        }


            }
		</script>
	</head>
	<body>
		<div id="box">
			<span id="span1">
				教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，
				但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，
				未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己
				更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必
				强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必
				较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失
				去的赢回来；要敢于担当，回避不是办法。风霜的雕刻，永远保留自己的棱角。不要做河流
				里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。
			</span>
			<div id="oprate">
				<a href="javascript:;" class="active">查找</a>
			    <a href="javascript:;">替换</a>
		    <br/>
		    <p>
			    <input type="text" />
			    <input type="button" value="查找">
		    </p>
		    <p>
				<input type="text" />
			    <input type="text" />
				<input type="button" value="替换">
		    </p>
			</div>
		</div>
	</body>
</html>

啾啾哒

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
js实现字符串的查找和替换

#box{ width: 600px; margin: 0 auto; border: 10px solid #9632cc; } #span1{ display:block; width: 560px; overflow:hidden; background: #ccc; font-size: 20px; pad
复制链接

扫一扫