概要
・ブラウザの画面上で選択しているhtmlのコードをチェックすることが可能です。
・htmlのコードは部分的なものでも可能です。
・あらかじめブックマークレットを作成しておき、それを呼び出すことでチェックする方法です。
・チェックにはW3C Markup Validation Serviceを使用しています。
方法
ここではChromeを例にします。
１. ブックマークマネージャーを開く。
２. 右クリックから「新しいブックマークを追加」を選択する。
３. 以下のように登録する。
名前：なんでもよい
URL：後述の「ワンライナー版.js」のコードをコピーして貼り付ける
ワンライナー版.js
javascript:(function(){const selected=window.getSelection().toString();if(!selected.trim()){alert("文字列が選択されていません。");return;}const wrappedHTML='<!DOCTYPE html>\n<html lang="ja">\n<head>\n<meta charset="UTF-8">\n<title>Validation</title>\n</head>\n<body>\n↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓\n'+selected+'\n↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑\n</body>\n</html>';const form=document.createElement("form");form.method="POST";form.action="https://validator.w3.org/nu/";form.target="_blank";form.enctype="multipart/form-data";const textarea=document.createElement("textarea");textarea.name="content";textarea.value=wrappedHTML;const output=document.createElement("input");output.type="hidden";output.name="out";output.value="text";form.appendChild(textarea);form.appendChild(output);document.body.appendChild(form);form.submit();document.body.removeChild(form);})();
４. ここまでで準備は整ったのであとは使うだけ。
４.１. チェックしたいhtmlコードを選択状態にして、ブックマークレットをクリックする。
以下を例にすると、aタグを選択したあとにHtmlCheck（ブックマークレットの名前）をクリックする。
４.２. 別タブにチェック結果が表示される。
正常な場合には、以下のような表示になる。（エラーメッセージが表示されていない）
ラッピング（htmlとかbodyタグを付与）してチェックにかけているので、上図のSource部分はそのようなコードになっている。（赤枠部分が今回選択してチェックしようとしたコード）
チェックエラーの場合には、以下のようなメッセージが表示される。
ブックマークレットのコード
中身は「ワンライナー版.js」と一緒だけど見やすいように整形したもの
整形版.js
javascript:(function() {
const selected = window.getSelection().toString();
if (!selected.trim()) {
alert("文字列が選択されていません。");
return;
}
// 完全なHTMLにラップ
const wrappedHTML = `<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
${selected}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
</body>
</html>`;
// フォームを作成してPOST送信
const form = document.createElement("form");
form.method = "POST";
form.action = "https://validator.w3.org/nu/";
form.target = "_blank";
form.enctype = "multipart/form-data";
const textarea = document.createElement("textarea");
textarea.name = "content";
textarea.value = wrappedHTML;
const output = document.createElement("input");
output.type = "hidden";
output.name = "out";
output.value = "text";
form.appendChild(textarea);
form.appendChild(output);
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
})();