こんにちは、現役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タグを挿入・置換・削除する方法をサンプルコードを見ながら解説していきました。
良い開発ライフを！！