JavaScriptで文字列の指定位置にHTMLタグを入れる方法
JavaScriptで、ある文字列の指定位置にHTMLタグを入れたい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装例
See the Pen
JavaScriptで指定位置にHTMLタグを差し込む by Kohei (@kouk05)
on CodePen.0
codepenを使った実装サンプルです。
HTMLで見るとpタグ内にタグが無いですが、JavaScriptを使って指定位置にbrタグを入れてます。
上記の結果、文字列の途中で改行されてる事がわかります。
実装方法は以下の通りです。
文字列の指定位置にHTMLタグを入れる方法
// HTMLを指定
let p = document.querySelector('p');
// HTML内の文字列を取得
let str = document.querySelector('p').innerHTML;
// 文字列の5文字目までをスライス
const a = str.slice(0, 5);
// brタグを格納
const b = '<br>';
// 文字列の5文字目以降をスライス
const c = str.slice(5);
// 文字列と差し込みタグを組み合わせる
p.innerHTML = a + b + c;
文字列の指定位置にHTMLタグを入れるコード例です。
コードの詳細は以下の通りです。
HTMLタグを差し込みたい文字列を取得
// HTMLを指定
let p = document.querySelector('p');
// HTML内の文字列を取得
let str = document.querySelector('p').innerHTML;
まず最初にHTMLタグを差し込みたい文字列を取得します。
文字列が入ってるタグをquerySelectorを使って取得。
innerHTMLで文字列を取得。
上記をそれぞれ変数に代入します。
sliceメソッドを使って文字列を分割
// 文字列の5文字目までをスライス
const a = str.slice(0, 5);
// brタグを格納
const b = '<br>';
// 文字列の5文字目以降をスライス
const c = str.slice(5);
次にsliceメソッドを使って文字列を分割します。
sliceメソッドの使い方は以下の通りです。
分割したい文字列.slice(分割開始位置, 分割終了位置);
HTMLタグを差し込む箇所で文字列を前後に分け分割。
それぞれ分割した文字列を変数に格納します。
分割した文字列と差し込むHTMLタグを連結
// 文字列と差し込みタグを組み合わせる
p.innerHTML = a + b + c;
最後に分割した文字列と差し込むHTMLタグをプラス演算しで連結します。
以上で実装完了です。
まとめ
JavaScriptで文字列の指定位置にHTMLタグを入れる方法について紹介しました。
以上で解説を終わります。
目次