主要使用方法： 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>