소금디자인

웹페이지 검색어 마킹

· 2022-01-04 (화) 18:04:45 · 6116 · 2

   자바스크립트 이용 웹페이지의 검색어를 노란색으로 마킹합니다.

 

     <form id="f1" name="f1" action="javascript:void()">

        <input type="text" id="t1" name="t1" size=20 style="width:150px; font-size:20px; border:1px solid #eee;">

        <input type="button" value="검색" id="search_btn" style="font-size:16px; border:1px solid #eee; background-color:pink; padding:5px; color:white; border-radius:5px; cursor:pointer;">

      </from>

 

<script>

    var k;

    var temp;

    $(document).ready(function() {

      $('#search_btn').on('click',function(){

        k = $("#t1").val();

        if (k != ''){

        var text = $('.textbook').html();

        $('.textbook').html(text.replaceAll(`${k}`, "<span class='textspot' style='background-color:yellow;'>" + `${k}` + "</span>"));

        }

      });

    })

    </script>

|

댓글 2개

2022-01-07 (금) 12:42:40
감사합니다!!
2022-01-24 (월) 16:25:16
필요한거였는데 잘쓰겠습니당.

추신 : </from> =>> </form>
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
22-01-07 조회 5,754
22-01-07 조회 5,604
22-01-04 조회 6,117
22-01-03 조회 7,685
21-12-30 조회 6,157
21-12-30 조회 6,630
21-12-26 조회 7,144
21-12-19 조회 6,296
21-12-18 조회 6,541
21-12-17 조회 5,745
21-12-14 조회 6,230
21-12-10 조회 1만
21-12-10 조회 5,913
21-12-08 조회 9,956
21-12-08 조회 1.2만
21-12-07 조회 6,950
21-12-04 조회 7,250
21-12-04 조회 5,894
21-12-03 조회 6,609
21-12-02 조회 5,967
21-12-02 조회 6,465
21-12-02 조회 6,165
21-12-02 조회 5,689
21-11-30 조회 6,850
21-11-23 조회 6,785
21-11-23 조회 5,924
21-11-23 조회 7,458
21-11-23 조회 6,404
21-11-23 조회 5,550
21-11-22 조회 6,692