字符串查找和替换
程序员文章站
2022-07-14 08:00:24
...
主要使用方法：
1. text.indexOf(“a”) ,在字符串text文本中查找字符串a，若有，返回a首次出现的位置，若没有返回-1。
2. text.split(“a”),以字符串a分割字符串text，并转换为数组形式，若a为空，则分割为单个字符
3. arr.join(“a”),将数组转换为字符串，每项间以a相隔截取字符串text中下标strat到end之间的字符串
主要思路：
1. 通过Id获取要操作的文本内容text
var Otext = document.getElementById(“text”);
var Ovalue = Otext.innerHTML;
2. 设置按钮，实现文本收缩展开功能。
Otext.innerHTML = Ovalue.substring(0,50);
收缩时，截取段落前50个字符
off1=true;
off1=!off1;
为实现一次点击收缩，下次点击展开，需设置开关，设初值为true，点击一次，off1取反。
3. 查找字符串，添加黄色背景。
获取用户输入的字符串str
var arr1 = Ovalue.split(str1 );
用字符串str分割字符串，转换为数组
将数组转换为字符串，每项间以加有黄色背景的str相隔
Ovalue = Otext.innerHTML;
替换后，更新P段落中的大段文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 边框样式 */
#div{
width:500px;
padding:10px;
border:5px solid yellowgreen;
margin:0 auto; }
/* 段落文字样式 */
div p{
line-height:25px;
font-family: "微软雅黑";
color:#333; }
/* 查找、替换按钮样式 */
#div>div{
width:70px;
height:40px;
border:4px solid yellowgreen;
line-height:40px;
text-align: center;
float:left;
margin-left:10px;
margin-bottom:10px; }
.active{ background-color: #ffcd06; font-size: 18px; } /* 被选按钮样式 */
#div >p{ clear:both; padding-left:10px;}
#btn{ display:block; margin:0 auto;}
button{ width:60px; height:30px;} /* 输入框后按钮样式 */
button a{
text-decoration:none;
text-align: center;
line-height:20px;
padding:3px; }
input{ height:25px; text-indent: 1em;} /* 输入框样式 */
</style>
</head>
<body>
<div id="div">
<p id="text">教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么
太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的
积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是
与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人
都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而
苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒
药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石
块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而
世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河
流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。</p>
<div>查找</div>
<div>替换</div>
<p>
<input id="Oinput1" type="text"/>
<button id="btn1"><a href="#">查找</a></button>
</p>
<p>
<input id="Oinput2" type="text"/>
<input id="Oinput3" type="text"/>
<button id="btn2"><a href="#">替换</a></button>
</p>
<button id="btn"><a href="#">收缩</a></button>
</div>
<script>
var Otext = document.getElementById("text");
var Obtn = document.getElementById("btn");
var Ovalue = Otext.innerHTML;
var off1 = true;
var Odiv = document.getElementById("div").getElementsByTagName("div"); //获取两个选择按钮
var Op = document.getElementById("div").getElementsByTagName("p"); //获取两个选择按钮对应输入框
// 初始值，默认选择查找
Odiv[0].className = "active";
Op[2].style.display = "none";
// 选择查找
Odiv[0].onclick = function () {
for(i=0;i<2;i++){
Odiv[i].className = "aaa"; // 取消两个选择按钮的样式
Op[i+1].style.display = "none"; //关闭两个选择按钮对应输入框
}
Odiv[0].className = "active"; //给查找按钮添加active样式
Op[1].style.display = "block"; // 打开查找按钮相应输入框
}
// 选择替换
Odiv[1].onclick = function () {
for(i=0;i<2;i++){
Odiv[i].className = "aaa";
Op[i+1].style.display = "none";
}
this.className = "active";
Op[2].style.display = "block";
}
var Bfind = document.getElementById("btn1"); // 查找按钮
var Breplace = document.getElementById("btn2"); // 替换按钮
var Oinput1 = document.getElementById("Oinput1");
var Oinput2 = document.getElementById("Oinput2");
var Oinput3 = document.getElementById("Oinput3");
// 查找按钮
Bfind.onclick = function () {
if(Oinput1.value=="")
alert("please input"); // 如果点击查找按钮时，输入框为空，弹出警示框
else{
str = Oinput1.value; // 输入内容赋给str
if(Ovalue.indexOf(str)==-1)
alert("未找到查找内容！"); // 若未找到查找内容，弹出警示框
else{
var arr1 = Ovalue.split(str); //以str分割字符串，转化为数组
var Ospan = arr1.join("<span style='background-color: yellow'>"+str+"</span>");
// 数组每项间用带有黄色背景的str连接，转化为字符串，赋给ospan
Otext.innerHTML=Ospan;
}
}
Ovalue = Otext.innerHTML; //更新P段落中的大段文本内容
}
// 替换按钮
Breplace.onclick=function () {
if(Oinput2.value=="")
alert("please input");
else{
str1 = Oinput2.value;
str2 = Oinput3.value;
if(Ovalue.indexOf(str1)==-1)
alert("未找到需替换的内容！");
else{
var arr1 = Ovalue.split(str1);
var Ospan = arr1.join("<span style='background-color: yellow'>"+str2+"</span>");
Otext.innerHTML=Ospan;
}
}
Ovalue = Otext.innerHTML; //替换后，更新P段落中的大段文本内容
}
//收缩、展开按钮
Obtn.onclick = function () {
if(off1){ // 判断off1是否为真
Otext.innerHTML = Ovalue.substring(0,50); // 截取段落前50个字符
Obtn.innerHTML="展开"; // 按钮内文字由‘收缩’变为‘展开’
for(i=0;i<2;i++){ // 收缩时，关闭两个选择按钮及相应输入框
Odiv[i].style.display = "none";
Op[i+1].style.display = "none";
}
}
else{
Otext.innerHTML= Ovalue;
Obtn.innerHTML="收缩";
for(i=0;i<2;i++){
Odiv[i].style.display = "block";
Op[i+1].style.display = "block";
}
Odiv[0].onclick(); // 文本展开式，默认显示选择查找按钮
}
off1=!off1; // 因最终应实现点一次收缩，再点一次展开，故每次点击后off1取反
}
</script>
</body>
</html>上一篇： 我的 UNIX 常用的指令
下一篇： Unity 扫描 二维码