簡単なHTMLとJavaScriptで自分だけのテキスト変換ツールをつくろう

ツールや用途に合わせてテキストをある決まったフォーマットに合わせないといけないとき、入力したテキストを自分が欲しいフォーマットに変換して返してくれるツールがあると便利なことがあります。この一連のチュートリアルでは、HTMLとJavaScriptを使って、業務で欲しいニッチなテキスト変換ツールを作ってみようと思います。
1. HTMLとJavaScriptで、タイトルとURLをMarkdownのリンク記法に変換するツールをつくる
  • CodePenにアクセスする
  • Markdownリンク生成ツールの動作を確認する
  • HTMLでテキストボックスを表示する
  • テキスト入力時の処理をJSで定義する
  • テキストボックスの内容をJSで上書きする
2. HTMLとJavaScriptで、入力された全ての行の先頭に> をつける変換ツールをつくる
  • Markdown引用文生成ツールの動作を確認する
  • HTMLでテキストエリアを表示する
  • テキスト中の改行をJSで別の文字列に置換する
3. HTMLとJavaScriptで、カラム名を入力するとMarkdownの表を生成してくれるツールをつくる
  • Markdownの表を生成するツールの動作を確認する
  • 文字列を改行で区切って配列に変換する
  • 配列の要素を1つずつ取り出して同じ処理をする
  • 配列の要素の回数だけ同じ処理をする