テキストを強調表示する JavaScript コード

今回は、テキストを強調表示する JavaScript コードを紹介します。JavaScript を使用してテキストを強調表示する場合の 注意事項 は何ですか?実際の事例を見てみましょう。

テキストを強調表示する機能を実装できるJQueryサードパーティライブラリはたくさんありますが、私はこの機能を実装するために次の小さなJavaScriptコードを使用することを好みます。これは非常に短く、状況に応じて柔軟に調整できます。必要に応じて変更し、独自の強調表示スタイルを定義できます。次の 2 つの 関数 は、独自のテキスト強調表示プラグインの作成に役立ちます。

function highlight(text, words, tag) { 
  // Default tag if no tag is provided
  tag = tag || 'span'; 
  var i, len = words.length, re;  for (i = 0; i < len; i++) {    // Global regex to highlight all matches
    re = new RegExp(words[i], &#39;g&#39;);    if (re.test(text)) {
      text = text.replace(re, &#39;<&#39;+ tag +&#39; class="highlight">$&</&#39;+ tag +&#39;>&#39;);
    }
  } 
  return text;
}

強調表示された機能をキャンセルする必要もあります:

function unhighlight(text, tag) {  // Default tag if no tag is provided
  tag = tag || &#39;span&#39;;  var re = new RegExp(&#39;(<&#39;+ tag +&#39;.+?>|<\/&#39;+ tag +&#39;>)&#39;, &#39;g&#39;);  return text.replace(re, &#39;&#39;);
}

使用方法:

$('p').html( highlight(
    $('p').html(), // the text
    ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight
    'strong' // custom tag));

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトに注目してください。 関連記事！

推奨読書:

日付が有効かどうかを判断するためのJavaScriptコードスニペット

Node.jsのイベントループの詳細な説明

JavaScript実行メカニズムのタスクキュー

方法Django のフォームページを防ぐ更新後に自動的に送信

以上がテキストを強調表示する JavaScript コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。