プログラミング雑記

【JS】Ctrl + Bの入力で太字マークダウンにする方法

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

はじめに

テキスト投稿させる際にマークダウンで記載してもらい、出力時には装飾したいことがあります。
「ことがあります」と言いましたが、これまでそんなシーンがなかったのでこういう場合どうすればいいのかを考えてみました。


マークダウンについてはこちらの記事が参考になると思いますが、例えば太字にしたい場合は

**ここが太字になります**

といった記載方法です。
基本的には記述ルールに従ってタイプして貰えばいいだけなのですが、頻発するものに関してはショートカットキーを割り当てたいところです。

Ctrl + Bで太字にする

ということでCtrl + Bが押されたら選択された範囲の文字列を太字のマークダウンにする方法です。
jQueryで実装しています。

$(function(){
  $('#input').keydown(function(e){
	 if (((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) && e.keyCode == 66) {
	   /* mac:command, win:ctrl */
	   /* keycode:66 -> B       */
	   if($(this).val()){
	     var selected_text = document.getSelection();//選択範囲のテキスト取得
	     $(this).val($(this).val().replace(selected_text,"**" + selected_text + "**"));
     }
	 }
  });
});

一応、上記で実装することは可能なのですが、上記は

「選択範囲のテキストを**で囲む」

処理なので、選択範囲の文字列と同じ文字列も全部太文字になってしまいます。
簡易的には上記でいいと思いますが、もっといい方法やライブラリがあるんじゃないかなと思います。
ご存知の方がいらっしゃれば教えてください。

最後に

JavaScriptを含めたプログラミング言語の年収と習得の難しさをランキングにしてみました。
合わせてご確認ください。

あわせて読みたい
  • この記事を書いた人

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

-プログラミング雑記