25:["$","title",null,{"children":"Text - Clipboard, HTML Preview, Text Decode, Data Extract | playground | Observable"}] 49:T5f5,Inputs.button([ [ "⬆️ Replace", () => { const text = output; textarea.value = text; textarea.dispatchEvent(new Event("input")); } ], [ "Copy original", () => { const text = input; navigator.clipboard.writeText(text); mutable output = text; } ], [ "JSON stringify", () => { const text = JSON.stringify(input); navigator.clipboard.writeText(text); mutable output = text; } ], [ "JSON parse", () => { mutable output = ""; const text = JSON.parse(input); navigator.clipboard.writeText(text); mutable output = text; } ], [ "Base64 encode", () => { const text = btoa(input); navigator.clipboard.writeText(text); mutable output = text; } ], [ "Base64 decode", () => { const text = atob(input); navigator.clipboard.writeText(text); mutable output = text; } ], [ "\\ escape", () => { const text = input.replace(/[\\"']/g, "\\$&").replace(/\u0000/g, "\\0").replace(/\n/g, '\\n'); mutable output = text; } ], [ "\\ unescape", () => { const text = input.replace(/\\([\\"'])/g, "$1").replace(/\\n/g, '\n').replace(/\\t/g, '\t'); mutable output = text; } ], [ "\\uXXXX ->", () => { const text = input.replace(/\\u([a-fA-F0-9]{4})/g, (match, p1) => { return String.fromCharCode(parseInt(p1, 16)); }) mutable output = text } ] ])4a:[] 29:{"id":"22bb29b17a5dfcfb","slug":null,"title":"Text - Clipboard, HTML Preview, Text Decode, Data Extract","thumbnail":"28b12574e64b4e980cd1919e53e8be8bb6fbe770e36db27e254865b545bafff4","access_level":"public","create_time":"$D2023-01-12T05:17:39.968Z","update_time":"$D2025-11-17T07:05:47.674Z","view_time":null,"first_public_time":"$D2023-01-12T05:17:39.968Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":798,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"role":"editor"},{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"eba082665fbdc4ff","slug":"tools","title":"TOOLS","owner":{"id":"3533f3924f76c1f3","login":"lab-pg","name":"playground"}},"type":"notebook","body":{"titling":"auto","title":"Text - Clipboard, HTML Preview, Text Decode, Data Extract","cells":[{"id":0,"value":"# Text - Clipboard, HTML Preview, Text Decode, Data Extract","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"viewof format = Inputs.radio(formats, {label: \"Format\", value: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"textarea = {\n const textarea = Inputs.textarea({ rows: 8, width: \"100%\" });\n\n textarea.onpaste = (e) => {\n e.preventDefault();\n const f = window.format;\n let v = \"\";\n window.clipboardData = {};\n for (let format of formats) {\n if (format == \"auto\") continue;\n const data = e.clipboardData.getData(format);\n window.clipboardData[format] = data;\n }\n v = window.clipboardData[f];\n if (!v && f == \"auto\") {\n v = window.clipboardData[\"text/plain\"];\n }\n\n console.log(e, v);\n textarea.value = textarea.value + v;\n mutable input = v;\n mutable output = v;\n };\n textarea.oninput = (e) => {\n mutable input = e.target.value;\n mutable output = e.target.value;\n };\n\n return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"mutable output = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"mutable input = \"\"","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"{\n const length = input.length\n return `length: ${length} size: ${length / 1000}kB`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"Inputs.button([\n [\n \"Copy HTML\",\n async () => {\n try {\n const container = document.querySelector(\"#html-content\");\n const html = container.innerHTML;\n const item = new ClipboardItem({ \"text/html\": html });\n await navigator.clipboard.write([item]);\n console.log(\"copied\");\n } catch (err) {\n console.error(err);\n }\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"preview = html`\n

HTML Preview

${output}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"## Link, Image...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"data = {\n output;\n return new Promise((resolve) => {\n setTimeout(() => {\n const content = document.querySelector(\"#html-content\");\n const list = Array.from(content.querySelectorAll(\"[href],[src]\") || []).map(\n (e, i) => ({\n Index: i,\n NodeName: e.nodeName,\n Host: e.host || new URL(e.src).host,\n URL: e.href || e.src,\n IMG: e.src || e.href,\n })\n );\n if (!list[0]) {\n // list.push({Index: 0, NodeName: \"\", Host: \"\", URL: \"\" });\n }\n resolve(list);\n }, 100);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"Inputs.table(data, {\n format: {\n URL: (x) => html`${x}`,\n IMG: (x) => html`

`\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"## SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"svgList = {\n output;\n return new Promise((resolve) => {\n setTimeout(() => {\n const content = document.querySelector(\"#html-content\");\n const list = Array.from(content.querySelectorAll(\"svg\") || []).map(\n (e, i) => ({\n Index: i,\n NodeName: e.nodeName,\n Preview: e.outerHTML\n })\n );\n if (!list[0]) {\n // list.push({ Index: 0, NodeName: \"\", Preview: \"\" });\n }\n resolve(list);\n }, 150);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"Inputs.table(svgList, {\n format: {\n Preview: (x) => html`${x}`\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"## Readability","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"viewof readabilityView = Inputs.radio([\"html\", \"markdown\", \"render\"], {\n value: \"render\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"{\n if (!article) {\n return html``;\n }\n\n if (readabilityView == \"render\") {\n return html`\n

${article.content}

\n `;\n }\n\n if (readabilityView == \"markdown\") {\n return html`\n

${service.turndown(article.content)}

\n `;\n }\n\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"article = {\n const dom = new DOMParser().parseFromString(input, \"text/html\");\n const article = new Readability(dom).parse();\n return article;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"## setup","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":701,"value":"MozillaReadability = await import('https://esm.sh/@mozilla/readability')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"Readability = MozillaReadability.Readability","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"Turndown = (await import('https://esm.sh/turndown')).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"service = new Turndown({\n headingStyle: \"atx\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"formats = [\"auto\", \"text/html\", \"text/plain\", \"text/url\", \"text/url-list\", \"text\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"{\n window.format = format;\n\n const f = format == \"auto\" ? \"text/html\" : format;\n const value = window.clipboardData?.[f];\n if (value) {\n textarea.value = value;\n textarea.dispatchEvent(new Event(\"input\"));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"{\n const files = [\"$1favicon.ico\", \"$1favicon.png\", \"$1favicon.svg\", \"\"];\n const handleError = (e) => {\n const el = e.target;\n if (el.classList?.contains(\"fb-404\")) {\n if (!el.src) return;\n let i = parseInt(el.dataset.i ?? \"0\");\n if (i < files.length) {\n console.log(\"src\", el.src, files[i]);\n el.src = el.dataset.src?.replace(/(.+:\\/\\/.+?\\/)(.*)/, files[i]);\n console.log(\"src replace\", el.src);\n el.dataset.i = i + 1;\n }\n }\n };\n window.rmErrorHandle?.();\n document.addEventListener(\"error\", handleError, true);\n window.rmErrorHandle = () =>\n document.removeEventListener(\"error\", handleError, true);\n\n return html`image 404 fallback`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"

css style

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null