Last active
July 3, 2018 17:22
-
-
Save TakamiChie/da7b2a616a0e6e13c0bd8aa2c3db74fe to your computer and use it in GitHub Desktop.
コンパイラはhttps://closure-compiler.appspot.com/home などを使うといいです ref:https://qiita.com/TakamiChie/items/4a2e5aa484877896854c
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// note用 プロパティ表示ツール | |
// noteの編集画面において、文字数や段落数、マークダウン記法版文章を表示します。 | |
// ==ClosureCompiler== | |
// @output_file_name default.js | |
// @compilation_level ADVANCED_OPTIMIZATIONS | |
// ==/ClosureCompiler== | |
(function() { | |
let nb = (document.getElementById("note-body") || | |
document.querySelector("note-body div")); | |
if(!nb){ | |
alert("ノードが見つかりません。Noteのテキストページが正しく表示されているかどうか確認してください"); | |
return; | |
} | |
const ID_DLG = "noteex_detail_dialog"; | |
const ID_MDV = ID_DLG + "_mdview"; | |
const ID_LEN = ID_DLG + "_txtlen"; | |
const ID_PARA = ID_DLG + "_txtpara"; | |
var dialog; | |
dialog = document.getElementById(ID_DLG); | |
if(!dialog){ | |
/* ダイアログ作成 */ | |
dialog = document.createElement("dialog"); | |
let mdview = document.createElement("textarea"); | |
let lenview = document.createElement("div"); | |
let paraview = document.createElement("div"); | |
let mdlabel = document.createElement("label"); | |
let close = document.createElement("button"); | |
dialog.id = ID_DLG; | |
dialog.style.width = "90%"; | |
dialog.style.height = "90%"; | |
lenview.id = ID_LEN; | |
lenview.style.marginLeft = "1em"; | |
paraview.id = ID_PARA; | |
paraview.style.marginLeft = "1em"; | |
mdview.id = ID_MDV; | |
mdview.readonly = true; | |
mdview.style.display = "block"; | |
mdview.style.width = "100%"; | |
mdview.style.minHeight = "20em"; | |
mdview.addEventListener("focus", () => { | |
mdview.select(); | |
}); | |
mdlabel.textContent = "マークダウン書式"; | |
mdlabel.appendChild(mdview); | |
close.textContent = "閉じる"; | |
close.addEventListener("click", () => { dialog.close(); }); | |
dialog.appendChild(lenview); | |
dialog.appendChild(paraview); | |
dialog.appendChild(mdlabel); | |
dialog.appendChild(close); | |
document.body.appendChild(dialog); | |
} | |
/* テキスト取得 */ | |
var lines = []; | |
nb.childNodes.forEach((item) => { | |
let text = item.innerHTML.split("<br>").join("\n"); | |
switch(item.nodeName){ | |
case "P": | |
if(item.childNodes && item.childNodes[0] && item.childNodes[0].nodeName == "IMG"){ | |
let src = item.childNodes[0].src; | |
lines.push(`![画像](${src})`); | |
}else{ | |
text = text.replace(/<a.[^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/g, "[$2]($1)"); | |
text = text.replace(/<b>(.*?)<\/b>/g, "**$1**"); | |
lines.push(text); | |
} | |
break; | |
case "H3": | |
lines.push("### " + text); | |
break; | |
case "BLOCKQUOTE": | |
lines.push("> " + text.split("\n").join("\n> ")); | |
break; | |
case "PRE": | |
lines.push("```\n" + text + "\n```"); | |
break; | |
case "FIGURE": | |
let href = item.querySelector("a").href; | |
let title = item.querySelector("a strong").textContent; | |
lines.push(`[${title}](${href})`); | |
break; | |
} | |
}); | |
dialog.querySelector("#" + ID_MDV).value = lines.join("\n\n"); | |
dialog.querySelector("#" + ID_LEN).textContent = | |
"文字数:" + nb.textContent.length + "文字"; | |
dialog.querySelector("#" + ID_PARA).textContent = | |
"段落数:" + nb.querySelectorAll("p").length + "段落"; | |
dialog.showModal(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment