jquery에서 강조표시되는 내용-일반적인 문제-php.cn

집

일반적인 문제

jquery에서 강조표시되는 내용

百草

Jun 13, 2023 am 10:12 AM

jquery

jQuery에서 강조 표시란 페이지에서 키워드를 검색할 때 강조 표시하는 것을 의미합니다. 구현 방법은 다음과 같습니다. 1. 먼저 강조 표시할 행을 가져오고, 검색 내용을 가져온 다음, 콘텐츠의 전체 행을 순회하고, 마지막으로 강조 색상을 추가합니다. 2. "jQuery 하이라이트" 플러그인을 사용합니다. 공식 웹사이트에서 js 파일을 다운로드한 후 html 파일에 js 파일을 추가하고 "$("h1").highlight("highlight)를 사용합니다. ")"를 사용하여 검색 텍스트를 강조 표시합니다.

jquery에서 강조표시되는 내용

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.4, Dell G3 컴퓨터.

jQuery의 강조 표시는 페이지에서 키워드를 검색할 때 강조 표시하는 것을 의미합니다. 구현 방법은 다음과 같습니다.

방법 1

$(function () {
    //1.获取要高亮显示的行
    var rowNode = $(&#39;.tiBlock_3NhqL&#39;);
    //2.获取搜索的内容
    var searchContent = $(".searchInput_29REY").val();
    //3.遍历整行内容，添加高亮颜色
    rowNode.each(function () {
        var word = $(this).html();
        word = word.replace(searchContent, &#39;<span style="color: #c00;">&#39; + searchContent + &#39;</span>&#39;);
        $(this).html(word);
    });
});

rowNode는 모든 검색 결과이고, searchContent는 특정 검색 텍스트입니다.

참고: jQuery를 도입해야 합니다.

이 방법은 권장되지 않지만 버그가 있습니다.

검색 내용이 a인 경우 var word = $(this).html을 사용합니다. (); 찾을 요소의 HTML 코드를 얻은 후 "span 태그의 a를 >... " 나타날거야.

우리에게 필요한 것은 HTML 코드가 아닌 텍스트 내용만 바꾸는 것이므로 두 번째 방법을 살펴보겠습니다.

방법 2

jquery 하이라이트 플러그인을 사용하는 방법입니다.

js 파일을 다운로드하려면 공식 웹사이트로 이동하세요. jQuery 하이라이트 플러그인 | bartaz @ GitHub

다운로드하려면 하단의 Where to get it? 위치로 스크롤하세요.

내가 지금 사용하고 있는 것은: http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js

이 js 파일을 html 파일에 참조한 다음 스타일을 추가하세요:

<style>
.highlight {background-color: #FFFF88; }
</style>

그러면 검색 텍스트를 강조 표시하려면 다음과 같은 j만 필요합니다: $("h1").highlight("highlight");

전체 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>regex.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="../jquery/jquery-1.11/jquery.min.js"></script>
  <script type="text/javascript" src="../jquery/jquery-highlight/jquery-hightlight.js"></script>
  <style>
  .highlight {background-color: #FFFF88; }
  </style>
  <script>
  $(function(){
  $(&#39;#search&#39;).click(function(){
  var key = $(&#39;#key&#39;).val();
    if(key != undefined  && key.length > 0) { //注意要判断key是否为undefined
    var body = $(&#39;#body&#39;);
    body.removeHighlight();
    body.highlight(key);
    } else {
    alert("请输入关键字！")
    }
  });
  });
  </script>
  </head>
  <body>
  <div>
  <input id="key" type="text">
  <input id="search" type="button" value="搜索">
  </div>
    <div id="head">
    This is a test head!
    <div>
    input the search key.
    </div>
    <div>
    click "搜索" button.
    </div>
    </div>
    <h1 id="如下是搜索区域">如下是搜索区域!</h1>
    <div id="body">
    This is a test body!
    <div>
    This is a test, a test, test, tes, te, t!
    Do you know and listen this test, I think you don&#39;t know this test!
    </div>
    <div>
    这是一个简答的测试,测试.
    <p>你知道或者听过这个测试吗，我认为你没有听过这个测试！</p>
    </div>
    <div>
    This is a test, a test, test, tes, te, t!
    I know&#39;t know this test, yes, this test is a not famous test!
    <p>Follow me test, to test the test! I don&#39;t know what do you say?</p>
    </div>
    <div>
    <div>
    这是一个简答的测试,测试.
    我不知道这个测试，是的，这不是一个注明的测试，
    <span>跟随我，去测试这个测试，我都不知道我在说什么！</span>
    </div>
    </div>
    <div>
    What do you say? test, only a test?
    <p>你们说什么呢？测试，一个测试？</p>
    </div>
    </div>
  </body>
</html>

위 내용은 jquery에서 강조표시되는 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.