【jQuery】スペースをハイライト

Question

前提・実現したいこと

特定要素のテキストにスペース（半角や全角テキストエディタ上での改行）を可視化させたい

replaceで「\s」と「全角スペース」を対象に置換させようとしてるのですが、全く置換してくれず、、、

どこか記述方法が間違っているのでしょうか。ご教授のほどお願い致します。

該当のソースコード

$("p").each(function(){
		$(this).replace(/\s/g,"<span style=\"background: #f00; display: inline;\"> </span>");
		$(this).replace(/　/g,"<span style=\"background: #f00; display: inline;\">　</span>");
});

Comments

[m.ts10806]

pタグの中に他のタグがあるケースを今のところは考慮しないということでよろしいでしょうか？

[namnium1125]

(ここに書くことお許しください。)確かに他のタグがあると私の回答した方法だと問題がありそうですね。ちょっと検討してみます。

[退会済みユーザー]

> mts10806様 最終的には「子要素を含まないテキストに対してのみ」を対象にする予定です。質問させていただく時にコードをよりシンプルにしたく、今回はpタグのみを対象としたコードを記述しました。 お心遣いありがとうございました。

[m.ts10806]

なるほど。次のステップですね。頑張ってください。

Answer 1

・replaceがDOMにかかっているので、文字列を置換するようにする
・replace()は、元の文字列が書き換わるわけではなく、『置換した値を返すだけ』なので、置換後、html()などで書き換える必要がある
の2点かと思います

$("p").each(function(){
	var replace = $(this).html().replace(/\s/g,"<span style=\"background: #f00; display: inline;\"> </span>");
	$(this).html(replace);
});

Comments

[退会済みユーザー]

値を返すだけだからconsole上では表示されるけど、要素には反映されなかったのですね...ありがとうございました！

Answer 2

$(this).replace(…) → $(this).html($(this).html().replace(…))

これでどうでしょうか？

解決後であり、また子要素は含まないと考えて良い、ということでしたが、
調べてみると良さそうなプラグインがあったのでここに紹介しておきます。

jQuery.highlightRegex

• github : jbr/jQuery.highlightRegex

• cdn : jQuery.highlightRegex - cdnjs.com

• scriptタグ :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.highlightRegex/0.1.2/highlightRegex.min.js"></script>

(↑をjQueryの読み込みの直後に記述してください。)

• jsFiddle

下手に方法を考えるより、せっかくjQueryを使っているのですから、プラグインを使うのも手だと思います。

Comments

[退会済みユーザー]

html()で反映させるのですね。ありがとうございました！