jqueryでハイライト表示されているもの-よくある問題-php.cn

ホームページ

よくある問題

jqueryでハイライト表示されているもの

百草

Jun 13, 2023 am 10:12 AM

jquery

jQuery におけるハイライトとは、ページ上でキーワードを検索するときにハイライトすることを指します。実装方法は次のとおりです: 1. まずハイライトする行を取得し、検索コンテンツを取得し、次にコンテンツの行全体を走査し、最後にハイライトカラーを追加する; 2.ハイライトプラグイン「jQuery highlight」を利用する公式サイトからjsファイルをダウンロードした後、htmlファイルにjsファイルを導入し、スタイルを追加するには「$("h1").highlightを使用します」 ("highlight")" を使用して、検索テキストを強調表示します。

jqueryでハイライト表示されているもの

このチュートリアルのオペレーティングシステム: Windows 10 システム、jQuery 3.6.4 バージョン、Dell G3 コンピューター。

JQueryのハイライトとは、ページ内でキーワードを検索する際のハイライトのことを指します実装方法は、

Method 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 is all検索結果、searchContent は特定の検索テキストです。

注: jQuery を導入する必要があります

この方法は推奨されません。問題ないようですが、バグがあります:

When検索内容は var word = $(this).html(); を使用して検索する要素の HTML コードを取得する場合、「span タグ内の a を

以下は完全な例です:

<!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 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Deepseek Webバージョンの公式入り口Mar 12, 2025 pm 01:42 PM

国内のAI Dark Horse Deepseekは強く上昇し、世界のAI業界に衝撃を与えました！ 1年半しか設立されていないこの中国の人工知能会社は、無料でオープンソースのモックアップであるDeepseek-V3とDeepseek-R1で世界的なユーザーから広く称賛されています。 Deepseek-R1は完全に発売され、パフォーマンスはOpenAio1の公式バージョンに匹敵します！ Webページ、アプリ、APIインターフェイスで強力な機能を体験できます。ダウンロード方法：iOSおよびAndroidシステムをサポートすると、ユーザーはApp Storeを介してダウンロードできます。 Deepseek Webバージョン公式入り口：HT

deepseekの忙しいサーバーの問題を解決する方法Mar 12, 2025 pm 01:39 PM

DeepSeek：サーバーに混雑している人気のあるAIを扱う方法は？ 2025年のホットAIとして、Deepseekは無料でオープンソースであり、OpenAio1の公式バージョンに匹敵するパフォーマンスを備えており、その人気を示しています。ただし、高い並行性は、サーバーの忙しさの問題ももたらします。この記事では、理由を分析し、対処戦略を提供します。 Deepseek Webバージョンの入り口：https：//www.deepseek.com/deepseekサーバーに忙しい理由：高い並行アクセス：Deepseekの無料で強力な機能が同時に使用する多数のユーザーを引き付け、サーバーの負荷が過剰になります。サイバー攻撃：Deepseekが米国の金融産業に影響を与えることが報告されています。

詳細な検索Deepseek公式ウェブサイトの入り口Mar 12, 2025 pm 01:33 PM

2025年の初めに、国内のAI「Deepseek」が驚くべきデビューを果たしました！この無料のオープンソースAIモデルは、OpenAIのO1の公式バージョンに匹敵するパフォーマンスを備えており、Webサイド、アプリ、APIで完全に起動され、iOS、Android、およびWebバージョンのマルチターミナル使用をサポートしています。 DeepSeekの公式Webサイトおよび使用ガイドの詳細な検索：公式Webサイトアドレス：https：//www.deepseek.com/sing for webバージョンの手順：上記のリンクをクリックして、DeepSeekの公式Webサイトを入力します。ホームページの[会話の開始]ボタンをクリックします。最初に使用するには、携帯電話検証コードでログインする必要があります。ログインした後、ダイアログインターフェイスを入力できます。 DeepSeekは強力で、コードを書き、ファイルを読み取り、コードを作成できます

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。