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

JavaScriptでWebページの要素タグ外にあるテキストを削除する方法

JavaScriptで不要なテキストを削除するには、remove()メソッドを使用します。さらにfilter()メソッドと組み合わせることで、要素タグの内側に含まれていないテキストだけを正確に抽出して削除できます。

対象となるHTMLの例

まず、次のようなHTMLを例に考えてみましょう。

<div><h1>Demo Program</h1></div>
This is also Demo Program

このHTMLでは、2行目の「This is also Demo Program」というテキストがどの要素タグにも囲まれず、body直下に配置されています。このように要素タグの外側に存在するテキストを削除したい場合、filter()とremove()を組み合わせて次のように実装します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=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><h1>Demo Program</h1></div>
This is also Demo Program
<script>
    $('body').contents().filter(function(){
        return this.nodeType != 1;
    }).remove();
</script>
</body>
</html>

コードのポイント

この処理の鍵となるのは、$('body').contents()でbody直下の子ノード（要素ノードとテキストノードの両方）をすべて取得し、this.nodeType != 1という条件で絞り込んでいる点です。

  • nodeTypeが1のノード：要素（Element）
  • nodeTypeが3のノード：テキスト（Text）

つまり、条件「nodeTypeが1ではない」によって要素ノード以外（タグに囲まれていないテキストなど）だけが選択され、最後にremove()が呼ばれることで、これらのノードのみがDOMから取り除かれます。divやh1といった要素タグ内のコンテンツはそのまま保持されるため、意図した通りの結果になります。

プログラムの実行方法

上記のコードを「anyName.html（例：index.html）」などの名前で保存します。その後、VS Codeエディターで保存したファイルを右クリックし、「Open with Live Server」を選択すると、ブラウザ上でプログラムを実行できます。

実行結果

プログラムを実行すると、次のような出力が得られます。

JavaScriptでWebページの要素タグ外にあるテキストを削除する方法

  1. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in

  2. JavaScriptでWebページのvideoタグ（動画）を非表示にする方法

    はじめに Webページに、次のようなサンプルのvideoタグが設置されている場面を想定してみましょう。 <video class="hideVideo" width="350" height="255" controls> <source src="" id="unique_video_id"> こちらでは動画を再生できません...... </video> Webページ上の動画を非表示にしたい場合は、yourVariableName.style