複数の半角スペースが1つにトリムされてしまう

入力値.

あい     うえお

表示.

あい うえお

HTMLのルール上、複数の半角スペースは1つにトリムされてしまいます

上記の例では、5つの半角スペースを入力したにも関わらず、表示上は1つに。

実際に入力したスペースの分表示されるようにしたいと思います

解決策1：white-spaceでcssをあてる

@juner さんのご指摘より 解決策1 追記

white-space: pre-wrap;

連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や
要素のあるときか、行ボックスを埋めるのに必要なときに行います。

jsでゴニョゴニョする必要は無く、割と簡単に正しく表示できました

入力値.

あい     うえお

表示.

あい     うえお

sample.html

<pre>あい     うえお</pre>

要素内のホワイトスペース文字はそのまま表示します

sample.js

function replace_space(s) {
  return s.replace(/ /g, "\xa0");
}

replaceで半角スペースを （ノーブレークスペース）として表示します
\xa0は、Unicodeでプログラム内のハードスペースまたはノーブレークスペースを指します

ちなみに、"\xa0"ではなく,"\u00A0"でも同じ結果です。
どちらも、表記が異なるだけで を表します

また、textareaで以下のように改行を入れて入力した場合、

表示時には改行も半角スペースとして判断されてしまいます。
そのため、

sample.html

<p style="white-space: pre-line;"></p>

で行の折り返しも判断できるようにする必要があります

sample.js

function replace_space(s) {
  return s.replace(/ /g, "&nbsp;");
}

~~特殊文字の でも試してみたのですが、表示では~~

あい&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;うえお

~~となってしまいます。~~

2023/2/8 @ss8826 さんよりご指摘

HTMLタグ同様、HTMLエンティティが生きた状態で更新するには、innerHTMLプロパティを使います

\s だと、半角スペース以外にも改行も含まれるので×

sample.js

function replace_space(s) {
  return s.replace(/\s/g, "\xa0");
}