スキルアップを始める!

【JavaScript】特定のクラス名の中にある特定の文字を別の文字に書き換える

JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
この記事は約2分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

JavaScriptで、特定のクラス名の中にある特定の文字を別の文字に書き換えるコードは次のようになります。

特定の文字を別の文字に書き換えるコード

document.getElementsByClassName()メソッドを使って、指定したクラス名の要素を取得しています。このメソッドは、HTMLCollectionオブジェクトを返すので、後で要素にアクセスできるようになります。

// ターゲットの要素を取得
const targetElements = document.getElementsByClassName('クラス名');

// 取得した要素の内容を置換
for (let i = 0; i < targetElements.length; i++) {
const element = targetElements[i];
const originalText = element.textContent;
const replacedText = originalText.replace('置換前の文字列', '置換後の文字列');
element.textContent = replacedText;
}

コードの解説

このコードでは、以下の手順で文字列の置換を行っています。

  1. targetClassNameで置換対象のクラス名を指定します。
  2. document.getElementsByClassName()メソッドで指定したクラス名の要素を取得します。
  3. 取得した要素について、textContentプロパティで要素の文字列を取得し、replace()メソッドで文字列置換を行います。
  4. 置換後の文字列をtextContentプロパティに再度設定することで、要素内の文字列を置換します。

まとめ

このコードを使用する際は、適宜、値を変更してください。また、このコードは同じクラス名の要素がある場合、すべての要素について置換を行うことに注意が必要です。

URLをコピーしました!