範囲選択中のテキストをJavaScript(jQuery)で装飾する方法がわかりません。

Question

【実現したいこと】

マウスをドラッグしてテキストを範囲選択する。
特定のボタンをクリックすると、範囲選択中の文字がjQueryで装飾(文字を赤く)される。

※昨日、teratailにて質問させて頂き、「範囲選択中の文字をjQueryで取得してalertで表示する」ことは叶ったのですが、その応用で上記の装飾に挑戦したところ、見事に挫けてしまいました。

書いたコード

// html
<div class="sample-button">このボタンを押すと選択範囲中のテキストを装飾</div>
<div contenteditable="true" class="sampe-textarea">ここに文章があり、この文章内の任意の箇所を範囲選択したいです。</div>

// jQuery
<script>
$(function(){
  const selection = getSelection();
  var selectText = '';
  var start,end,focus;
  $(document).on('selectionchange',function(){
    focus = selection.focusNode; //選択範囲の終点を含むノード
    // 指定されたノードのDOMツリー内の親ノードが.sampe-textareaのとき
    if(focus.parentNode.closest('.sampe-textarea')){
      setTimeout(()=>{
        start = selection.anchorOffset;
        end = selection.focusOffset;
        selectText = focus.data.substring(start,end);
      },100);
    }
  });
  $('.sample-button').on('click',function(){
    selectText.replaceWith('<span style="color:#ff0000;">' + selectText + '<span>');
    // alert(selectText); と記載すると、範囲選択した文字がalertされるので、文字は選択できているはずです。
  });
});
</script>

問題点

テキストを範囲選択後、ボタンをクリックすると、Chromeのconsoleで、
Uncaught TypeError: selectText.replaceWith is not a function at HTMLDivElement.<anonymous>
上記のように表示されます。

テキストを範囲選択後、ボタンを「クリック」することで、それまで範囲選択していたテキストを装飾(文字を赤く)する方法がわからずにおります。

もし、上記についておわかりになる方がいらっしゃいましたら、どうかご教授いただけましたら幸いです。

何卒、よろしくお願い申し上げます。

Comments

[hentaiman]

jqueryとjavascriptごっちゃになってませんか？
そこまでコード書けてログもちゃんと見れるのならconsole.logでも出しながら一行ずつソースを追えば何に対してreplaceWith を使おうとしているのか分かるはず

[m.ts10806]

selectTextは要素ではなく文字列ですよね。

[yayak]

hentaiman様、掲載しているコードはteratailで熟練の方がご親切で教えてくださったものであり、私の実力ではございません。私は頂いたコードを理解することに努めたのですが、自分の未熟さを痛感しております。もう少しコードを１つずつ理解してみます＞＜

[yayak]

m.ts10806様、ご指摘いただいた通りでした。取得した文字列をいじったところで、ブラウザ上に表示されている要素が置き換えられるはずないですものね。。要素を置き換えするためにどうしたらよいかずっとネットを模索しているのですが、調べ方が悪いせいか悪戦苦闘しております。。JavaScript本当に難しいです。。

[hentaiman]

なるほどな
では、上から順に読み直してみて、不明点があれば質問に追記してみてください
ex: txt_aにはこのhtmlが入ると思うが、違う値が入っているのはなぜか？
ex: size_bには30が入ると思ったが、空になっているのはなぜか？

と言うような具体的な質問だと説明が出来ます。
それとgetSelectionが何なのかは質問文を見ただけだと分かりません。

[yayak]

hentaiman様、とても暖かいお言葉、心より感謝申し上げます。日常でプログラミング知識を教えてくれる人がおらず、独学のためちぐはぐの知識のため、一つずつ分析してみようと思います。そしてどうしてもわからなかったら再度ご質問させて頂けましたら幸いです。ご指導心よりお礼申し上げます。ありがとうございます。

Answer 1

replaceWith()の使い方間違っているのは指摘した通り。
.replaceWith()
あくまで「セレクタ」に作用するので、単なる文字列であるselectTextに対しては使えません。
想定通りに動くわけではないですが、今のHTMLに対して動作させるのはこう。

    $('.sampe-textarea').replaceWith('<span style="color:#ff0000;">' + selectText + '<span>');

「選択したところだけ赤字にしたい」という場合、色々なやり方が考えられます。

1. 全文に対してそこだけ置換した文字列を入れなおす
2. 選択した前後にタグを入れる

teratailのマークダウンの補助機能はおそらく2です。

例：
何か文字打つ→任意の場所を選択→マークダウン補助機能のBを押下
何か**文字**打つ

蛇足：
<span>閉じれてないので、今のままだと「スタートから後ろ全部」にフォントカラー適用されるので注意です。
selectText + '<span>'

Comments

[m.ts10806]

結局どっちも置換は必要かな。

[phpman]

https://teratail.com/questions/289790

[yayak]

m.ts10806様、ご提示いただいたコードで書き換えができました。
現状は、狙った箇所ではなく全ての文が書き換えられてしまうため、m.ts10806様のおっしゃるように何かマークなどを利用するなどして、狙った箇所をずばり書き換えできるように再度熟考したいと思います。
いつも知恵を貸してくださり、ありがとうございます。本当に助けられております。
勉強を続けてまいります。

[yayak]

phpman様、URLをご提示いただきありがとうございます。ぜひ参考にさせて頂きます。

[m.ts10806]

yayakさん
phpmanという人は無視していいですよ。
本件と関係なく、自分のコメント（それも本件とは全く関係ない）に構ってほしいだけの追っかけなので（すごくいい風に言うと）

[yayak]

m.ts10806様、そうだったんですね！この質問に何がどう関係してるのだろうと不思議に思っていたので、謎が解決しました！有難うございます！

[phpman]

m.ts10806
男らしく、自分の誤りを認めた方がよろしいのではありませんか？