「改行以外のホワイトスペース系の文字」を置換

前提・実現したいこと

入力ボックスを作っています。「改行以外のホワイトスペース系の文字」は半角スペースのみに限定したいです。

例

こんにちは😀

→普通にこのままでOK

こんにち
は😀

→改行はこのままでOK

こんにち　は😀

→全角スペースがあるので、半角スペースに変換してこんにちは😀にしたい

発生している問題

正規表現で「改行以外のホワイトスペース系の文字」を指示すればできそうだと考えてtext.replace(/[^\n]\s/,' ');を使ったところ、どういうわけか、テキストの先頭にスペースが入ってしまいます。

該当のソースコード

こちらなんですが、こんにちは😀にこんにち　は😀と全角スペースを入れると　こんにち　は😀と先頭にスペースが入ってしまいます。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>半角だけ</title>
6<style>
7* {
8  margin:0;
9  padding:0;
10}
11</style> 
12
13</head>
14
15<body>
16<div contenteditable="true">こんにちは😀</div>
17
18<script>
19$(document).on('input','div[contenteditable="true"]', function(){
20	let text = $(this).text();
21	text.replace(/[^\n]\s/,' ');
22	$(this).text(text);
23});
24</script>
25</body>
26</html>

試したこと

他のテキストでも同様でしたので、絵文字がダメとかいうわけではないと思います。

あとconsole.log(text)で見るとその時点で先頭にスペースがあるので、正規表現がおかしいのかとも思いますが、それでも先頭にスペースが入るという現象の原因にはならないと思うので、何か自分の知らない原因があるのだと思い質問させて頂きました。

もし可能であれば宜しくお願い致します。

行動規範の内容に同意します

回答2件

javascript
1const str=`こ　んに
2ち\tは
3また ね`;
4const res=str.replace(/\s/g,x=>x=='\n'?'\n':' ');
5console.log(res);

投稿2022/04/20 00:24

yambejp

総合スコア117678

kemusi

2022/04/20 02:56

ありがとうございます。アロー関数に参考演算子ですか？そんな風にも書けるとわ。 "/(?!\n)\s/" としないのはどうしてでしょうか？

yambejp

2022/04/20 03:05

> "/(?!\n)\s/" としないのはどうしてでしょうか？あー、たしかにそれで十分ですね単純にjsの正規表現はコールバックで処理できますよというサンプルです

kemusi

2022/04/20 04:04

そんな風に書けるっていうのはすごい知見でした。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

js
1	text.replace(/[^\n]\s/,' ');
2	$(this).text(text);

この正規表現は「改行ではない1文字の後に空白類が1文字」という意味です。期待する動作をする正規表現は /(?!\n)\s/ でしょうか。
text.replace() は変数textを変更しません。関数の返り値を使う必要があります。
$(this).text(text); をすると、テキスト入力キャレットが要素の先頭に移動します。ユーザビリティを考慮すると、できるだけキャレットの位置を変更しないよう配慮が必要です。

投稿2022/04/20 00:04

編集2022/04/20 00:50