split()join()应用之替换效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>前端ABC-qdabc.cn</title>
    <style>
      /**{
        margin: 0;
        padding: 0;
      }*/
      body{
        font-size: 0;
      }
      p{
        border: 1px solid #ccc;
        width: 550px;
        padding: 20px;
        font:16px/2 "arial, helvetica, sans-serif";
      }
      input{
        margin-right: 5px;
      }
      span{
        background: darkred;
        color: white;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <input type="text"/>
    <input type="text"/>
    <input type="button" value="替换" />
    <p> how far i'll go<br />I've been staring at the edge of the water<br />
Long as I can remember never really knowing why<br />I wish I could be the perfect daughter<br />
But I come back to the water no matter how hard I try<br />Every turn I take every trail I track<br />
Every path I make every road leads back<br />To the place I know where I can not go though I long to be<br />
See the line where the sky meets the sea it calls me<br />And no one knows how far it goes<br />
If the wind on my sail on the sea stays behind me<br />One day I'll know if I go there's just no telling how far I'll go</p>
    <script>
      var aInput=document.getElementsByTagName('input');
      var oP=document.getElementsByTagName('p')[0];
      aInput[2].onclick=function(){
        var str=aInput[0].value;
        var str2=aInput[1].value;
        if(!str) return;
        oP.innerHTML=oP.innerHTML.split(str).join('<span>'+str2+'</span>');
      }
    </script>
  </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » split()join()应用之替换效果

赞 (1)
分享到:更多 ()

发表评论 0