【javaScript】selectタグのoptionタグ内の連続する半角空白が省略されてしまう場合の対処方法

JavaScript

2026.03.04

htmlに連続する半角空白を入れても省略されて一つになってしまい困ることあると思います。
今回はselectタグのoptionタグ内での対処方法です。

事象
対処方法

事象

以下のような、optionタグの中で半角空白で間隔をあける場合があるとします。

<select id="fruit">
  <option>りんご</option>
  <option>みかん  ジュース</option>
  <option>バナナ    シェイク</option>
  <option>ぶどう       ワイン</option>
</select>

これをそのまま表示すると、以下のように連続する半角空白はhtmlの仕様で省略されて1つになってしまいます。

対処方法

javascriptで以下のように、半角空白を に置換します。

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll("#fruit option").forEach(option => {
    // 連続する半角スペースを &nbsp; に置換
    option.innerHTML = option.innerHTML.replace(/ {2,}/g, function(match) {
      return '&nbsp;'.repeat(match.length);
    });
  });
});

すると、以下のように連続する半角空白が省略されずにそのまま表示されます。

※開発者ツールで見ると以下のように置換されています。

このように一工夫必要です。

ちなみに、動的にoptionタグが変更されない場合は、以下のように最初から&nbspを入れればよいです。

<select id="fruit">
  <option>りんご</option>
  <option>みかん&nbsp&nbspジュース</option>
  <option>バナナ&nbsp&nbsp&nbsp&nbspシェイク</option>
  <option>ぶどう&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspワイン</option>
</select>