Written by Kasumi

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タグを入れる方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptで並列要素の高さを揃える方法【自動調整】

2022.12.25
5033
JavaScript

JavaScriptでクラスを継承。親の関数・メソッドを子で呼び出す方法

2022.12.20
2743
JavaScript

【JavaScript】文字列から必要な特定文字のみ切り出す方法

2023.01.27
821
JavaScript

JavaScriptを使い、目次をプラグイン無しで自動生成する方法

2022.10.31
1481