【jQuery】特定の文字列前に改行を挿入する方法

シュウ

今回は【jQuery】特定の文字列前に改行を挿入する方法について
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
jQueryの基本的な知識があり、ウェブサイトの動的なコンテンツ表示に関心がある人。
今回は特定の文字列前に改行について解説しております。

[記事の内容]

特定の文字列前に改行を挿入について

特定の文字列（この場合は「開催」）の前にbrタグを挿入して改行する処理を行うため、主に以下のような場面で使用されます。

・イベントリストやニュース記事のタイトルなど、特定の文字列を基準に自動で改行処理を行いたい場合に便利です。
・例えば、イベントリストのタイトルが長すぎる場合に、「〇〇」という文字列の前にbrタグを挿入することで、タイトルを2行に分けて表示できます。

私の場合ですが、今回はWordPressでカテゴリーを「東京開催」「名古屋開催」などを作成し変な場所で改行がされ、表示の見え方が悪くなったので、それをjQueryでうまくコントロールできたので記事にしました。

記述方法について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

デモサイトはコチラから。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】特定の文字列前に改行を挿入する方法</title>
</head>
<body>

<ul id="catlist">
<li><a href="#" class="is-active">東京開催</a></li>
<li><a href="#">大阪開催</a></li>
<li><a href="#">愛知開催</a></li>
<li><a href="#">神奈川開催</a></li>
<li><a href="#">京都開催</a></li>	
<li><a href="#">福岡開催</a></li>	
</ul>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function insertBreakBeforeKaiSai(element) {
  const text = element.textContent;
  if (text.includes('開催')) {
    const newText = text.replace('開催', '<br>開催');
    element.innerHTML = newText;
  }
}
window.addEventListener('load', function() {
  const listItems = document.querySelectorAll('#catlist li a');
  listItems.forEach(item => {
    insertBreakBeforeKaiSai(item);
  });
});
</script>
</body>
</html>

●1：insertBreakBeforeKaiSai(element)関数: ・この関数は、引数として渡されたHTML要素（element）内のテキストを操作します。
・element.textContentで要素内のテキストを取得し、text変数に格納します。
・text.includes('開催') でテキスト内に「開催」という文字列が含まれているかを確認します。
・含まれている場合、text.replace('開催', '開催') で「開催」の前に
タグを挿入し、newText 変数に格納します。
・element.innerHTML = newTextで要素内のHTMLを更新し、改行を反映させます。

●2:window.addEventListener('load', ...) 処理: ・ページが読み込まれた後に実行される処理です。
・document.querySelectorAll('#catlist li a') で、idがcatlistのリスト要素内のリンク要素をすべて取得し、listItems変数に格納します。
・listItems.forEach(item => { ... }) で、取得した各リンク要素に対して insertBreakBeforeKaiSai関数を実行し、改行処理を行います。

スマホサイトのみに適用させる場合

上記の場合のコードはPC、スマホサイトどちらにも適用されます。
スマホサイトのみに適用させたい場合は以下のようになります。

<script>
function insertBreakBeforeKaiSai(element) {
  if (window.matchMedia('(max-width: 767px)').matches) {
    const text = element.textContent;
    if (text.includes('開催')) {
      const newText = text.replace('開催', '<br>開催');
      element.innerHTML = newText;
    }
  }
}
window.addEventListener('load', function() {
  const listItems = document.querySelectorAll('#catlist li a');
  listItems.forEach(item => {
    insertBreakBeforeKaiSai(item);
  });
});
</script>

まとめ

今回はこれで以上です。

POINT

今回は、特定の文字列前に改行を挿入する方法についてです。
text.replace('開催', '開催')「開催」という文字列をbr開催に置換します。
document.querySelectorAll('#catlist li a')：CSSセレクタを使用して、特定の要素（この場合は#catlist li a）をすべて取得します。
こちらに「特定の文字列前に改行を挿入する」デモサイトを用意しました。