JavaScriptで文字列内の特定の文字列の出現回数をカウントする方法
JavaScriptでは、ある文字列(str1)の中に、別の文字列(str2)が何回出現するかを数えたいケースはよくあります。本記事では、2つの文字列を受け取り、str2がstr1の中に現れる回数をカウントして返す関数の実装方法を解説します。
要件の確認
まず、期待する動作を例で確認しましょう。
count('this is a string', 'is') → 2 を返すこの例では、「this is a string」という文字列の中に「is」が2回含まれているため、結果として 2 が返されます。
実装コード
以下が実際のコードです。
const str1 = 'this is a string';
const str2 = 'is';
const countOccurrences = (str1, str2, allowOverlapping = true) => {
str1 += "";
str2 += "";
if (str2.length <= 0) return (str1.length + 1);
var n = 0,
pos = 0,
step = allowOverlapping ? 1 : str2.length;
while (true) {
pos = str1.indexOf(str2, pos);
if (pos >= 0) {
++n;
pos += step;
} else break;
}
return n;
};
console.log(countOccurrences(str1, str2));
コードの解説
この関数の仕組みを順を追って見ていきましょう。
- 引数の正規化:
str1 += ""とstr2 += ""によって、数値などが渡された場合でも自動的に文字列へ変換され、安全に処理できるようになります。 - 空文字列への対応: 検索対象の文字列(str2)が空の場合は、str1の長さ + 1 を返します。これは空文字列がどの位置にもマッチし得るためです。
- 重複マッチの制御: 第3引数
allowOverlappingが true の場合、検索位置は1文字ずつ進むため、互いに重なり合う一致もカウントされます。false の場合は、見つかった文字列の長さ分だけ位置をスキップするので、重複しない一致だけが数えられます。 - ループによる検索:
indexOf()メソッドを使って、一致が見つからなくなる(-1が返る)まで繰り返し検索し、見つかるたびにカウンタ n を1ずつ増やしていきます。
実行結果
コンソールには次のように出力されます。
2
「this is a string」の中に「is」は2回出現するため、正しく 2 が返されていることが確認できます。allowOverlapping オプションを活用すれば、単純なカウントだけでなく、より柔軟な文字列マッチングにも対応できます。
-
JavaScriptオブジェクトの内容を文字列として表示する方法
JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h
-
【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説
Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要