JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

jQueryで表示中のテキストのみを取得・表示する方法

Webページ上に表示されているテキストのみを取得したい場合は、jQueryの「:visible」セレクターを活用しましょう。このセレクターは、CSSによって非表示にされていない、現在画面に表示されている要素だけを選択します。:hidden（非表示要素）とは逆の働きをするため、「display:none」が設定された要素などは自動的に除外されます。

以下では、親要素の子ノードの中から表示中の要素のみを取り出して、そのテキストを取得する具体例を紹介します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="myDiv">
<span class="test" style="display:none"><b>Test Class</b></span>
<span class="demo"> <b>Demo class</b></span>
</div>
<script>
   $('#myDiv').children(":visible").text()
</script>
</body>
</html>

コードのポイント

$('#myDiv').children(":visible") の部分で、idが「myDiv」の要素直下にある子要素の中から、表示状態にあるものだけを抽出しています。この例では display:none が指定された「Test Class」のspanは除外され、「Demo class」のspanのみが対象となります。最後に .text() を呼び出すことで、その要素内のテキストを取得できます。

実行手順

上記のプログラムを実行するには、ファイル名を「anyName.html」（例：index.html）として保存し、そのファイルを右クリックします。VS Codeエディターを使用している場合は、「Open with Live Server」というオプションを選択してください。ブラウザーが起動し、ページが表示されます。

実行結果

プログラムを実行すると、以下のように表示されているテキストのみが出力されます。非表示に設定された「Test Class」は結果に含まれず、「Demo class」のテキストだけが取得できていることが確認できます。

jQueryで表示中のテキストのみを取得・表示する方法

  1. JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】

    JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>