ウエブでBlogger HTMLビューを見やすく整形する
以前の記事で
Blogger HTMLビューを見やすくする
を書きましたが、エディターで操作するために、行ったり来たりと、我ながら、面倒くさいと思っていました。ウエブで簡単に置換して、整形するページ(ここです)を作りました。タブの切り替えで、簡単に移動できます。(お気に入りに登録してご利用ください)
(バグがありましたので、修正しました2022/8/31)
「置換対象テキスト」エリアにHTMLビューのコードを貼り付けてください。置換ボタンを押すと、貼り付けられたテキスト中の、「><」を、「>改行<」にすべて置換します。確認後、コピーボタンを押すと、クリップボードに置換済みのテキストが収納されます。元のHTMLビューのページに戻って、すべて選択、貼り付けをしてください。すぐに、作成ビューに移って、問題ないことを確認してください。
加工前のテキストは、下の「元テキスト保存場」に残されますので、何かあれば、これをご利用ください。
置換対象テキスト(ここに貼り付けてください、置換ボタンを押すと、ここに置換されたテキストが入ります)
元テキスト保存場(何かトラブった時、これで巻き返してください)
使ったJavaScriptは、次のようなものです。
<script>function textarea_replaceall() {var tarea = document.querySelector("#test");var stock_area = document.querySelector("#stock");stock_area .value=tarea.value;tarea.value=tarea.value.replaceAll(">"+"<", ">\n<") ;}function textarea_copy() {var tarea = document.querySelector("#test");navigator.clipboard.writeText(tarea.value);}</script>
注意点
HTMLビューのコードをコピーする時に、サイドバーの文字までコピーしてしまう場合があります。その時は、HTMLビューのコードをクリックして、全てを選択、コピー、をやり直してください。
貼り付けた後、作成ビューに戻った途端に、改行を外されてしまう場合があります。たとえば、
<textarea id="stock"></textarea>は、<textarea id="stock"></textarea>
にされてしまいます。少しの辛抱、ということで、お願いします。
では、Bloggerをお楽しみください。
(2022/8/31追記)
大変なバグがありました。
テキストエリアの文字数が制限されて、尻切れになってしまうのでした。cols、rowsの設定をしないと、制限がなくなるみたいです。
本日、修正しました。すみません。テストも不足していました。