zoukankan      html  css  js  c++  java
  • 查找替换文字

    代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #txt{
                border:5px solid #123098;
                padding:10px;
                width:500px;
                margin: 10px 0;
            }
            span{
                background:darkviolet;
                color:#fff;
            }
        </style>
    </head>
    
    <body>
        <input type="text" name="" id="inp1" placeholder='查找'> 替换 <input type="text" name="" id="inp2" placeholder='替换'> <button id="btn">点我替换</button>
        <div id="txt">
            5月12日是母亲节,老师教了我们一首古诗《游子吟》:“慈母手中线,游子身上衣。临行密密缝,意恐迟迟归。谁言寸草心,报得三春晖。”初学这首古诗,我大致懂得了诗句的意思——妈妈为了远行的儿女,一针一线缝着衣服。这首诗描绘了辛苦的母亲把对远行孩子的爱和思念之情缝进密密的针脚里,温暖着孩子。而作为孩子,要用什么来报答母亲这份浓浓的恩情呢?
        </div>
        <script>
            var inp1 = document.getElementById('inp1');
            var inp2 = document.getElementById('inp2');
            var btn = document.getElementById('btn');
            var txt = document.getElementById('txt');
            /*
                1.按钮点击事件 获取两个输入框的值
                2.文本中,按照 关键字 拆分 ,再按照 新内容拼接
            */
           btn.onclick = function(){
               var val1 = inp1.value;
               var val2 = inp2.value;
               txt.innerHTML = txt.innerHTML.trim().split(val1).join('<span>'+val2+'</span>');
           }
        </script>
    </body>
    
    </html>

    效果

  • 相关阅读:
    ASCII&Base64
    CentOS自动同步时间
    Java的HashMap
    Java线程同步操作
    Nginx基本配置与应用
    vc中调用Com组件的方法详解
    VC++ try catch (转)
    oracle中exp,imp的使用详解
    jdbc oracle 连接字符串
    标准的开源实现
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13230076.html
Copyright © 2011-2022 走看看