Tファイル

【jQuery】指定位置に文字列を挿入・置換・削除する方法をサンプルコードで解説

文字列を挿入・置換・削除する方法

こんにちは、現役WEBエンジニアのtakaです。

今回はjQueryを利用し、pタグ内などの特定のタグに文字列を挿入・置換・削除する方法をサンプルコードを見ながら解説していきます。
早速行ってみましょう。

文字列を挿入する方法

このようなHTMLがあります。

// HTML
<p>文字列を挿入「<span id="addText"></span>」</p>
<button type="button" id="addTextButton">文字列を挿入</button>

text()メソッドに引数を設定すると、その文字列を挿入することができます。

// javaScript
$(function() {
  $('#addTextButton').on('click',function(){ // buttonタグをクリックした場合
    $('#addText').text('挿入文字列');
  });
});

出力結果

文字列を挿入「

tips!

JavaScriptで操作する要素はclass属性ではなくid属性を指定するのが一般的です。
今回の例ではpタグの「#text」とbuttonタグの「#addTextButton」のことです。
別の開発者がコードを読んだ時に「id属性が出てきたからなんかJavaScriptを利用しているな」気づいてくれます。

もちろん複数の要素を操作したい場合はclass属性を利用します。

tips!

JavaScriptを操作するid属性名はケバブケースを避けましょう。
※ケバブケースはハイフンで区切っているもの(change-textやselect-textとか)です。
この記事ではキャメルケース(addTextButtonやselectText)を利用しています。
スネークケース(change_textやselect_text)でも良いです。

理由は、スライダーを実装する際に利用するslcikをはじめJavaScriptのプラグインはケバブケースで記載されていることが多いので、自分のid名と競合しないようにするためです。
しかし会社のコーディング規約がある場合は、それを最優先させましょう。

文字列を別の文字列に置換する

このようなHTMLがあります。

// HTML
<p id="changeText">テキスト</p>
<button type="button" id="changeTextButton">文字列を変更</button>

textメソッドに引数を設定すると、その文字列に置換することができます。

// javaScript
$(function() {
  $('#changeTextButton').on('click',function(){
    $('#changeText').text('変更後のテキスト。');
  });
});

出力結果

テキスト

文字列を空にする・削除する方法

textメソッドに空文字を指定すると、文字列を空にすることができます。

// HTML
<p id="emptyText">このテキストを削除</p>
<button type="button" id="emptyTextButton">文字列を変更</button>
// JavaScript
$(function() {
  $('#emptyTextButton').on('click',function(){
    $('#emptyText').text(''); // 空文字を設定
  });
});

出力結果

このテキストを削除

htmlタグを挿入する方法

先ほどまでの例はただ文字列を挿入する方法をお伝えしましたが、このようなhtmlタグ毎入れたい場合を考えてみましょう。

// HTML
<p>こんにちは、私の名前は<span class="bold">田中</span>です。</p>

「田中」の部分がspanタグで囲まれており、太字にしたいという状況です。

このような場合はhtmlメソッドを利用します。

// HTML
<div id="addHtml"></div>
<button type="button" id="addHtmlButton">HTMLを追加</button>
// JavaScript
$(function() {
  $('#addHtmlButton').on('click',function(){
    $('#addHtml').html('<p>こんにちは、私の名前は<span class="bold">田中</span>です。</p>');
  });
});

出力結果

まとめ

今回はtextメソッド・htmlメソッドを利用し、文字列やhtmlタグを挿入・置換・削除する方法をサンプルコードを見ながら解説していきました。

良い開発ライフを!!

モバイルバージョンを終了