☰

Paper Clip (Save as HTML, Markdown and Text)

Edit and save selection as clean HTML, Markdown or Text file optimized for printing. Hotkey: Command + Shift + S.

当前为 2024-01-29 提交的版本，查看 最新版本。

  1. // ==UserScript== 
  2. // @name        Paper Clip (Save as HTML, Markdown and Text)
  3. // @description Edit and save selection as clean HTML, Markdown or Text file optimized for printing. Hotkey: Command + Shift + S.
  4. // @author      Schimon Jehudah, Adv.
  5. // @namespace   i2p.schimon.paperclip
  6. // @homepageURL https://greasyfork.org/en/scripts/465960-paper-clip
  7. // @supportURL  https://greasyfork.org/en/scripts/465960-paper-clip/feedback
  8. // @copyright   2023, Schimon Jehudah (http://schimon.i2p)
  9. // @license     MIT; https://opensource.org/licenses/MIT
  10. // @require     https://unpkg.com/turndown/dist/turndown.js
  11. // @exclude     devtools://*
  12. // @match       file:///*
  13. // @match       *://*/*
  14. // @version     24.01.29
  15. // @run-at      document-end
  16. // @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCB5PSIuOWVtIiBmb250LXNpemU9IjkwIj7wn5OOPC90ZXh0Pjwvc3ZnPgo=
  17. // ==/UserScript==
  18.  
  19. /*
  20.  
  21. TODO
  22.  
  23. 0) ePUB and HTMLZ
  24.  
  25. 1) Display preview
  26.  
  27. 2) Bookmarklet
  28.  
  29. 3) jsPDF /parallax/jsPDF
  30.  
  31. 4) Remove style="background-image: url('https://torrentfreak.com/images/canada-featured.jpg');"
  32.    https://torrentfreak.com/movie-companies-cannot-use-piracy-notice-scheme-to-facilitate-class-action-230629/
  33.    
  34. 5) Save description too for MD and TXT. example: restoreprivacy.com
  35.  
  36. 6) Footnotes for TXT
  37.    * Collect all hyperlinks (array)
  38.    * Scan for text
  39.    NO
  40.    AGAIN
  41.    * For each hyperlink detected, enter an pointer of some sort
  42.    NO
  43.    AGAIN
  44.    * Detect hyperlink
  45.    * Place links into an array
  46.    * Replace each hyperlink by text and a number (i.e. [1])
  47.      * Replace hyperlink
  48.      * Append link to array
  49.    * Extract all links from array as footnotes
  50.  
  51. FIXME
  52.  
  53. 1) https://vision.gel.ulaval.ca/~klein/duke3d/
  54.  
  55. 2) Replace element-img enclosed in element-a by href of element-a
  56.    NO
  57.    Better use place these as footnotes
  58.  
  59. 3) Rense.com & epubbooks.com
  60.  
  61. 4) Replace element img with attribute alt to element span
  62.    https://datawrapper.dwcdn.net/qBzPR/6/
  63.  
  64. */
  65.  
  66. // Check whether HTML; otherwise, exit.
  67. //if (!document.contentType == 'text/html')
  68. if (document.doctype == null) return;
  69.  
  70. var
  71.   originalBackground, originalColor,
  72.   originalDisplay, originalOutline;
  73.  
  74. const time = new Date();
  75. const namespace = 'i2p.schimon.paperclip';
  76.  
  77. // FIXME set hotkey
  78. document.onkeyup = function(e) {
  79.   //if (e.ctrlKey && e.shiftKey && e.which == 49) { // Ctrl + Shift + 1
  80.   if (e.metaKey && e.shiftKey && e.which == 83) { // Command + Shift + S
  81.     console.info('Saving selection to HTML.')
  82.     generateXHTML();
  83.   }
  84. };
  85.  
  86. // TODO https://community.arm.com/support-forums/f/architectures-and-processors-forum/5814/what-is-difference-between-arm7-and-arm-cortex-m-series/13573#13573
  87. // event listener
  88. // event "click" and "mouseup" are the most sensible, albeit not accurate
  89. // event "mousemove" is the most manipulative (per user), yet (almost) the most accurate
  90. // event "select" seem to work only inside element input
  91. window.addEventListener('click',event => {
  92. //document.addEventListener('click',event => {
  93.   let selection = document.getSelection();
  94.   let btn = document.getElementById(namespace);
  95.   if (!btn && selection.toString().length) {
  96.     btn = createButton(event.pageX, event.pageY);
  97.     // TODO Move "append"s to a function
  98.     btn.append(actionButton('close'));
  99.     btn.append(actionButton('save'));
  100.     btn.append(actionButton('edit'));
  101.     btn.append(actionButton('send'));
  102.     document.body.append(btn);
  103.   } else
  104.   if (btn && !selection.toString().length) {
  105.     btn.remove();
  106.   }
  107. }, {passive: true});
  108.  
  109. // TODO declare variables once
  110. // NOTE consider "mousedown"
  111. // NOTE consider moving this functionality into function createButton()
  112. window.addEventListener('mousemove',function(){
  113.   let selection = document.getSelection();
  114.   let btn = document.getElementById(namespace);
  115.   if (btn && !selection.toString().length) {
  116.     btn.remove();
  117.   }
  118. });
  119.  
  120. function createButton(x, y) {
  121.   // create element
  122.   let btn = document.createElement(namespace);
  123.   // set content
  124.   btn.id = namespace;
  125.   // btn.textContent = '📎'; // 🖇️ 💾
  126.   // set position
  127.   btn.style.position = 'absolute';
  128.   //btn.style.left = x + 5 + 'px';
  129.   //btn.style.top = y + 'px';
  130.   btn.style.left = x + 'px';
  131.   btn.style.top = y - 50 + 'px';
  132.   // set appearance
  133.   btn.style.direction = 'ltr';
  134.   btn.style.fontFamily = 'system-ui'; // cursive sans-serif emoji
  135.   btn.style.background = 'black'; // cornflowerblue, grey, rosybrown
  136.   btn.style.border = 'thin solid white';
  137.   //btn.style.borderWidth = 'thin';
  138.   //btn.style.border = 'solid'; // ridge
  139.   //btn.style.borderColor = 'darkred';
  140.   btn.style.borderRadius = '3px';
  141.   btn.style.padding = '1%';
  142.   //btn.style.marginTop = '100px';
  143.   //btn.style.marginLeft = '10px';
  144.   btn.style.minWidth = '30px';
  145.   btn.style.minHeight = '30px';
  146.   //btn.style.width = '10px';
  147.   //btn.style.height = '10px';
  148.   //btn.style.fontSize = '20px';
  149.   btn.style.zIndex = 10000;
  150.   btn.style.opacity = 0.7;
  151.   // center character
  152.   btn.style.justifyContent = 'center';
  153.   btn.style.alignItems = 'center';
  154.   btn.style.display = 'flex';
  155.   // disable selection marks
  156.   btn.style.outline = 'white'; // none
  157.   btn.style.userSelect = 'none';
  158.   btn.style.cursor = 'default';
  159.   btn.onmouseleave = () => {btn.style.opacity = 0.27;};
  160.   btn.onmouseover = () => {btn.style.opacity = 1;};
  161.   return btn;
  162. }
  163.  
  164. function actionButton(type) {
  165.   let content = getSelectedText().outerText; // textContent
  166.   content = content.replace(/%0D%0A%0D%0A/g, " ");
  167.   content = removeMultipleWhiteSpace(content);
  168.   let item = document.createElement('span');
  169.   item.id = `${namespace}-${type}`;
  170.   //item.style.borderRadius = '50%';
  171.   item.style.outline = 'none';
  172.   item.style.padding = '3px';
  173.   item.style.margin = '3px';
  174.   //item.style.fontSize = '10px';
  175.   item.style.fontWeight = 'bold';
  176.   item.style.color = 'white';
  177.   item.onmouseleave = () => {resetStyle();};
  178.   switch (type) {
  179.     case 'back':
  180.       item.textContent = '<';
  181.       item.onclick = () => {
  182.         item.parentElement.replaceChildren(
  183.           actionButton('close'),
  184.           actionButton('save'),
  185.           actionButton('edit'),
  186.           actionButton('send')
  187.         )
  188.       };
  189.       break;
  190.     case 'close':
  191.       item.textContent = 'x';
  192.       item.title = 'Double-click to close';
  193.       item.ondblclick = () => {item.parentElement.remove();};
  194.       break;
  195.     case 'delete':
  196.       item.textContent = 'Delete';
  197.       item.title = 'Double-click to delete content';
  198.       item.ondblclick = () => {getSelectedText().remove();};
  199.       item.onmouseenter = () => {drawBorder('darkred', 'rgb(255 182 182)', '2px dashed hotpink');};
  200.       break;
  201.     case 'edit':
  202.       item.textContent = 'Edit';
  203.       //item.style.cursor = 'context-menu';
  204.       item.onclick = () => {
  205.         item.parentElement.replaceChildren(
  206.           actionButton('back'),
  207.           actionButton('delete'),
  208.           actionButton('editable')
  209.         )
  210.       };
  211.       break;
  212.     case 'editable':
  213.       item.onmouseenter = () => {drawBorder('darkblue', 'rgb(200 182 255)', '2px solid blue');};
  214.       if (getSelectedText().contentEditable == 'true') {
  215.         item.textContent = 'Stop Editing';
  216.         item.title = 'Turn off edit mode';
  217.       } else {
  218.         item.textContent = 'Start Editing';
  219.         item.title = 'Turn on edit mode';
  220.       }
  221.       item.onclick = () => {
  222.         let texts = toggleEditeMode();
  223.         item.textContent = texts[0];
  224.         item.title = texts[1];
  225.       }
  226.       break;
  227.     case 'email':
  228.       item.textContent = 'Email';
  229.       item.title = 'Send via Email as reference';
  230.       item.onclick = () => {window.location = `mailto:?subject=Content on ${location.hostname}&body=${document.title}%0D%0A%0D%0A${content}%0D%0A%0D%0A${location.hostname}${location.pathname}`};
  231.       break;
  232.     case 'irc':
  233.       item.textContent = 'IRC';
  234.       item.title = 'Send via IRC as reference';
  235.       item.onclick = () => {alert('This button will be supported in next update')};
  236.       break;
  237.     case 'markdown':
  238.       item.textContent = 'Markdown';
  239.       item.title = 'Save to Markdown';
  240.       item.onclick = () => {generateMD();}; //TODO URL reference to source URL
  241.       break;
  242.     case 'text':
  243.       item.textContent = 'Text';
  244.       item.title = 'Save to Plain Text';
  245.       item.onclick = () => {generateTXT();};
  246.       break;
  247.     case 'xhtml':
  248.       item.textContent = 'HTML';
  249.       item.title = 'Save to HTML (valid XHTML)';
  250.       item.onclick = () => {generateXHTML();};
  251.       break;
  252.     case 'xmpp':
  253.       item.textContent = 'Jabber';
  254.       item.title = 'Send via XMPP as reference';
  255.       item.onclick = () => {window.location = `xmpp:?subject=Content on ${location.hostname}&body=${document.title}%0D%0A%0D%0A${content}%0D%0A%0D%0A${location.hostname}${location.pathname}`};
  256.       break;
  257.     case 'save':
  258.       item.textContent = 'Save';
  259.       //item.style.cursor = 'context-menu';
  260.       item.onmouseenter = () => {drawBorder('black', 'rgb(250 250 210)', '2px double rosybrown');};
  261.       item.onclick = () => {
  262.       item.parentElement.replaceChildren(
  263.         actionButton('back'),
  264.         actionButton('xhtml'),
  265.         actionButton('markdown'),
  266.         actionButton('text')
  267.         )
  268.       };
  269.       break;
  270.     case 'send':
  271.       item.textContent = 'Send';
  272.       //item.style.cursor = 'context-menu';
  273.       item.onclick = () => {
  274.       item.parentElement.replaceChildren(
  275.         actionButton('back'),
  276.         actionButton('email'),
  277.         actionButton('irc'),
  278.         actionButton('xmpp')
  279.         )
  280.       };
  281.       break;
  282.   }
  283.   return item;
  284. }
  285.  
  286. function toggleEditeMode() {
  287.   let texts;
  288.   if (getSelectedText().contentEditable == 'true') {
  289.     getSelectedText().contentEditable = 'false';
  290.     texts = ['Continue Editing', 'Edit content'];
  291.   }
  292.   else {
  293.     getSelectedText().contentEditable = 'true';
  294.     texts = ['Stop Editing', 'Turn off edit mode'];
  295.   }
  296.   return texts;
  297. }
  298.  
  299. function drawBorder(color, background, outline) {
  300.   let sel = getSelectedText();
  301.   originalColor = sel.style.color;
  302.   originalOutline = sel.style.outline;
  303.   originalBackground = sel.style.background;
  304.   // Draw border around input without affecting style, layout or spacing
  305.   // /questions/29990319/draw-border-around-input-without-affecting-style-layout-or-spacing
  306.   //sel.style.outline = '3px solid';
  307.   //sel.style.background = 'lightgoldenrodyellow';
  308.   //sel.style.outline = '3px dashed';
  309.   //sel.style.background = 'rgba(250,250,210,0.3)';
  310.   //sel.style.outline = '3px double darkblue';
  311.   //sel.style.background = 'rgba(210,250,250,0.8)';
  312.   sel.style.outline = '2px double rosybrown';
  313.   sel.style.outline = outline;
  314.   //sel.style.background = 'rgba(250,250,210,0.7)';
  315.   sel.style.background = 'rgb(250 250 210)';
  316.   sel.style.background = background;
  317.   sel.style.color = 'black'; // DarkRed
  318.   sel.style.color = color;
  319. }
  320.  
  321. // TODO remove attribute 'style' of first element after 'body'
  322. // FIXME
  323. // http://gothicrichard.synthasite.com/what-i-fond-on-the-net.php
  324. // https://darknetdiaries.com/episode/65/
  325. function resetStyle() {
  326.   let sel = getSelectedText();
  327.   sel.style.color = originalColor;
  328.   sel.style.outline = originalOutline;
  329.   sel.style.background = originalBackground;
  330. }
  331.  
  332. function generateTXT() {
  333.   let data = getSelectedText().outerText;
  334.   data = `${data}
  335.  
  336. Created: ${time.toDateString()} ${time.toLocaleTimeString()}
  337. Source:  ${location.href}
  338. Title:   ${document.title}
  339.  
  340. Document generated using Paper Clip
  341. https://greasyfork.org/en/scripts/465960-paper-clip
  342. Save selected content into clean HTML, Markdown or Text
  343. `;
  344.   savePage(
  345.     data,
  346.     createFilename('txt'),
  347.     "text/plain"
  348.   );
  349. }
  350.  
  351. function generateMD() {
  352.   let domParser = new DOMParser();
  353.   let data = domParser.parseFromString('', 'text/html'); // Falkon: TrustedHTML
  354.   data.body.innerHTML = getSelectedText().outerHTML;
  355.   console.log(data)
  356.   let elementsToRemove = [
  357.     'button', 'form', 'frame', 'frameset', 'iframe', 'textarea',
  358.     //'svg', 'input', 'path',
  359.     'script', 'style',
  360.     'select'];
  361.   data = removeMediaElements(data, elementsToRemove);
  362.   let turndownService = new TurndownService();
  363.   data = turndownService.turndown(data);
  364.  
  365.   let title;
  366.   if (document.title) {
  367.     title = document.title;
  368.   } else {
  369.     title = location.pathname.split('/');
  370.     title = title[title.length-1];
  371.     //title = location.pathname.split('/');
  372.     //title = title[title.length-1];
  373.   }
  374.  
  375.   data = `# [${title}](${location.href})
  376. ${getDescription()}
  377. ${data}
  378.  
  379. ---
  380.  
  381. This page was saved at ${time.toDateString()} ${time.toLocaleTimeString()} from [${location.hostname}](${location.href})
  382. using [Paper Clip](https://greasyfork.org/en/scripts/465960-paper-clip) and converted into Markdown with [Turndown](https://mixmark-io.github.io/turndown/)
  383. `;
  384.   console.log(data)
  385.   savePage(
  386.     data,
  387.     createFilename('md'),
  388.     "text/plain"
  389.   );
  390. }
  391.  
  392. function generateXHTML() {
  393.   let domParser = new DOMParser();
  394.   let data = domParser.parseFromString('', 'text/html'); // Falkon: TrustedHTML
  395.   // set title
  396.   if (document.title.length > 0) {
  397.     data.title = document.title;
  398.   }
  399.   // set base
  400.   // NOTE do not "set base".
  401.   // TODO Complete links of ./ and / etc. by fetching complete
  402.   //      url and replace href with it (it = complete url)
  403.   base = data.createElement('base');
  404.   base.href = data.head.baseURI; // location.href;
  405.   data.head.append(base);
  406.   const metaTag = [
  407.     'url',
  408.     'date',
  409.     'creator',
  410.     'user-agent',
  411.     //'connection-type',
  412.     'content-type-sourced',
  413.     'charset-sourced'
  414.     //'character-count'
  415.     //'word-count'
  416.   ];
  417.   const metaValue = [
  418.     location.href,
  419.     time,
  420.     namespace,
  421.     navigator.userAgent,
  422.     //navigator.connection.effectiveType,
  423.     document.contentType,
  424.     document.charset
  425.   ];
  426.   for (let i = 0; i < metaTag.length; i++) {
  427.     let meta = document.createElement('meta');
  428.     meta.name = metaTag[i];
  429.     meta.content = metaValue[i];
  430.     data.head.append(meta);
  431.   }
  432.   const metaData = [
  433.     //'content-type',
  434.     'viewport',
  435.     'description',
  436.     'keywords',
  437.     'generator'
  438.   ];
  439.   for (let i = 0; i < metaData.length; i++) {
  440.     let meta = document.createElement('meta');
  441.     meta.name = metaData[i] + '-imported';
  442.        try {
  443.          meta.content = document.querySelector('meta[name="' + metaData[i] + '" i]')
  444.            // .querySelector('meta[http-equiv="' + metaData[i] + '" i]')
  445.            .content;
  446.        }
  447.        catch(err) {
  448.          console.warn(metaData[i] + ': Not found.');
  449.          continue;
  450.        }
  451.     data.head.append(meta);
  452.   }
  453.   if (document.dir == 'rtl') {
  454.     data.dir = 'rtl';
  455.   }
  456.   data.body.innerHTML = getSelectedText().outerHTML;
  457.   data = listMediaElements(data);
  458.   let elementsToRemove = [
  459.     'audio', 'embed', 'img', 'video', 'button',
  460.     'form', 'frame', 'frameset', 'iframe', 'textarea',
  461.     'svg', 'input', 'path',
  462.     'script', 'style',
  463.     'select'];
  464.   data = removeMediaElements(data, elementsToRemove);
  465.   data = removeAttributes(data);
  466.   //data = replaceMediaByLinks(data);
  467.   data = correctLinks(data);
  468.   data = removeEmptyElements(data);
  469.   data = removeCommentNodes(data);
  470.   //data = removeWhitespaceFromNodes(data, ['code', 'pre']);
  471.   //data = replaceCodeAndPre(data);
  472.   //data = setStylesheet(data);
  473.   data = new XMLSerializer().serializeToString(data);
  474.   //data = formatPage(data);
  475.   //data = minify(data);
  476.   //data = removeComments(data);
  477.   data = removeMultipleWhiteSpace(data);
  478.   savePage(
  479.     data,
  480.     // NOTE xhtml is also valid
  481.     createFilename('html'),
  482.     "text/html"
  483.   );
  484. }
  485.  
  486. // FIXME
  487. // body::-webkit-scrollbar{width:10.666666666666666px;height:10.666666666666666px;}
  488. function setStylesheet(node) {
  489.   let cssStylesheet = document.createElement('style');
  490.   document.head.append(cssStylesheet);
  491.   cssStylesheet.type = 'text/css';
  492.   if (node.querySelector('code') ||
  493.       node.querySelector('pre')) {
  494.     cssStylesheet.textContent = 'code, pre {overflow: auto; display: grid; max-width: 100vw;}';
  495.   }
  496.   return node;
  497. }
  498.  
  499. // TODO Place plain text inside elements <code> <pre> (eliminate <span>, <br> etc.)
  500. // TODO Eliminate all elements without changing original text layout
  501. function replaceCodeAndPre(node) { // correctCodeElements
  502.   const codeElements = node.getElementsByTagName('code');
  503.   const preElements = node.getElementsByTagName('pre');
  504.   // Replace content of all code elements with their own outerText
  505.   for (let i = 0; i < codeElements.length; i++) {
  506.     const element = codeElements[i];
  507.     element.outerText = element.outerText;
  508.   }
  509.   // Replace content of all pre elements with their own outerText
  510.   for (let i = 0; i < preElements.length; i++) {
  511.     const element = preElements[i];
  512.     element.outerText = element.outerText;
  513.   }
  514.   return node;
  515. }
  516.  
  517. function replaceMediaByLinks(node) {
  518.   for (const imgElement of node.querySelectorAll('img')) {
  519.     // Create a new <a> element
  520.     const aElement = node.createElement('a');
  521.     aElement.setAttribute.href = imgElement.src;
  522.     // Copy the attributes and contents of the <img> element to the new <a> element
  523.     for (let i = 0, l = imgElement.attributes.length; i < l; i++) {
  524.       const name = imgElement.attributes.item(i).name;
  525.       const value = imgElement.attributes.item(i).value;
  526.       aElement.setAttribute(name, value);
  527.     }
  528.     aElement.textContent = imgElement.src;
  529.     // Replace the <img> element with the new <a> element
  530.     imgElement.parentNode.replaceChild(aElement, imgElement);
  531.   }
  532.   return node;
  533. }
  534.  
  535. // TODO
  536. // Catch all elements with attribute
  537. // contains URL, and
  538. // starts with / (add hostname), and
  539. // contains / (add hostname with first parent path), and
  540. // validate using URL API
  541. function listMediaElements(node) {
  542.   let unique = []
  543.   const elements = [
  544.     'audio', 'embed', 'img', 'svg', 'video',
  545.     'frame', 'frameset', 'iframe', '[data-source]',
  546.   ];
  547.   // Find element and add its URL as metadata
  548.   for (let i = 0; i < elements.length; i++) {
  549.     for (const element of node.querySelectorAll(elements[i])) {
  550.       const attributes = ['src', 'data-img-url', 'data-source'];
  551.       for (const attribute of attributes) {
  552.         if (element.getAttribute(attribute) &&
  553.             !unique.includes(element.getAttribute(attribute))) {
  554.           let attr = element.getAttribute(attribute)
  555.           unique.push(attr)
  556.           let meta = node.createElement('meta');
  557.           meta.name = `extracted-media-${element.nodeName.toLowerCase()}`; // Was ${elements[i]}
  558.           meta.content = attr;
  559.           node.head.append(meta);
  560.         }
  561.       }
  562.     }
  563.   }
  564.   return node;
  565. }
  566.  
  567. //Remove graphics, media and scripts
  568. function removeMediaElements(node, elements) {
  569.   /*
  570.   TODO Remove span and preserve its contents
  571.   Movespan content to its parent element/node
  572.   /questions/9848465/js-remove-a-tag-without-deleting-content
  573.  
  574.   FIXME Couldn't remove "iframe" for
  575.   https://www.dailymail.co.uk/health/article-3460321/How-Big-Pharma-greed-killing-tens-thousands-world-Patients-medicated-given-profitable-drugs-little-proven-benefits-leading-doctors-warn.html
  576.   */
  577.   media = ['audio', 'embed', 'frame', 'frameset', 'iframe', 'img', 'video'];
  578.   for (let i = 0; i < elements.length; i++) {
  579.     for (const element of node.querySelectorAll(elements[i])) {
  580.       if (media.includes(elements[i])) {
  581.         let ele = node.createElement('a');
  582.         //ele.textContent = `Click to view removed HTML <${elements[i]}> media element.`.toUpperCase();
  583.  
  584.         //ele.textContent = `[HIDDEN MEDIA]`;
  585.         //ele.title = `${elements[i]} media element`;
  586.         //ele.href = element.getAttribute('src');
  587.  
  588.         //let ele = node.createElement('pre')
  589.         //let ele = node.createElement('code')
  590.         //ele.textContent = `${element.getAttribute('src')}`;
  591.         //ele.title = 'Hidden media';
  592.         element.parentNode.insertBefore(ele, element.nextSibling); // insertAfter
  593.       }
  594.       element.remove();
  595.     }
  596.   }
  597.   return node;
  598. }
  599.  
  600. // Remove all attributes
  601. function removeAttributes(node) {
  602.   // /questions/1870441/remove-all-attributes
  603.   const removeAttributes = (element) => {
  604.     for (let i = 0; i < element.attributes.length; i++) {
  605.       if (element.attributes[i].name != 'href' &&
  606.           element.attributes[i].name != 'name' &&
  607.           element.attributes[i].name != 'id') {
  608.         element.removeAttribute(element.attributes[i].name);
  609.       }
  610.     }
  611.   };
  612.   for (const element of node.querySelectorAll('body *')) {
  613.     removeAttributes(element);
  614.   }
  615.   return node;
  616. }
  617.  
  618. // Correct links for offline usage
  619. function correctLinks(node) {
  620.   for (const element of node.querySelectorAll('a')) {
  621.     //if (element.hash) {
  622.     //if (element.hostname + element.pathname == location.hostname + location.pathname) {
  623.     if (element.href.startsWith(element.baseURI + '#')) {
  624.       element.href = element.hash;
  625.     }
  626.   }
  627.   return node;
  628. }
  629.  
  630. function removeEmptyElements (node) {
  631.   for (const element of node.body.querySelectorAll('*')) {
  632.     //if (/^\s*$/.test(element.outerText)) {
  633.     if (element.tagName.toLowerCase() != 'br' && /^\s*$/.test(element.textContent)) {
  634.       element.remove();
  635.     }
  636.   }
  637.   return node;
  638. }
  639.  
  640. function removeCommentNodes(node) {
  641.   const nodeIterator = node.createNodeIterator(
  642.     node,  // Starting node, usually the document body
  643.     NodeFilter.SHOW_ALL,  // NodeFilter to show all node types
  644.     null,  
  645.     false  
  646.   );
  647.   let currentNode;
  648.   // Loop through each node in the node iterator
  649.   while (currentNode = nodeIterator.nextNode()) {
  650.     if (currentNode.nodeName == '#comment') {
  651.       currentNode.remove();
  652.       console.log(currentNode.nodeName);
  653.     }
  654.   }
  655.   return node;
  656. }
  657.  
  658. function removeComments(str) {
  659.   return str.replace(/<!--[\s\S]*?-->/g, '');
  660. }
  661.  
  662. function removeWhitespaceFromNodes(node, excludedTags) {
  663.   const removeWhitespace = (node) => {
  664.     if (node.nodeType === Node.TEXT_NODE) {
  665.       node.textContent = node.textContent.trim();
  666.     } else if (
  667.       node.nodeType === Node.ELEMENT_NODE &&
  668.       !excludedTags.includes(node.tagName.toLowerCase())
  669.     ) {
  670.       for (let i = 0; i < node.childNodes.length; i++) {
  671.         removeWhitespace(node.childNodes[i]);
  672.       }
  673.     }
  674.   };
  675.   removeWhitespace(node);
  676.   return node;
  677. }
  678.  
  679. function removeMultipleWhiteSpace(str) {
  680.   //return str.replace(/\s+/g, ' ');
  681.   //return str.replace(/(?<!<code>)\s+(?![^<]*<\/code>)/g, " ");
  682.   /*
  683.   return str.replace(/(<(code|pre|code-[^\s]+)[^>]*>.*?<\/\2>)|(\s+)/gs, function(match, p1, p2, p3) {
  684.   if (p1) { // if the match is a code block
  685.     return p1; // return the complete code block as is
  686.   } else { // if the match is whitespace outside of a code block
  687.     return " "; // replace with a single space
  688.   }
  689.   });
  690.   */
  691.   return str.replace(/(<(code|pre)[^>]*>.*?<\/\2>)|(\s+)/gs, function(match, p1, p2, p3) {
  692.     if (p1) { // if the match is a code block
  693.       return p1; // return the complete code block as is
  694.     } else { // if the match is whitespace outside of a code block
  695.       return " "; // replace with a single space
  696.     }
  697.   });
  698. }
  699.  
  700. // Get parent element of beginning (and end) of selected text
  701. // /questions/32515175/get-parent-element-of-beginning-and-end-of-selected-text
  702. function getSelectedText() {
  703.   var selection = document.getSelection();
  704.   var selectionBegin = selection.anchorNode.parentNode;
  705.   var selectionEnd = selection.focusNode.parentNode;
  706.   var selectionCommon =
  707.     findFirstCommonAncestor
  708.     (
  709.       selectionBegin,
  710.       selectionEnd
  711.     );
  712.   return selectionCommon;
  713. }
  714.  
  715. // find common parent
  716. // /questions/2453742/whats-the-best-way-to-find-the-first-common-parent-of-two-dom-nodes-in-javascri
  717. function findFirstCommonAncestor(nodeA, nodeB) {
  718.   let range = new Range();
  719.   range.setStart(nodeA, 0);
  720.   range.setEnd(nodeB, 0);
  721.   // There's a compilication, if nodeA is positioned after
  722.   // nodeB in the document, we created a collapsed range.
  723.   // That means the start and end of the range are at the
  724.   // same position. In that case `range.commonAncestorContainer`
  725.   // would likely just be `nodeB.parentNode`.
  726.   if(range.collapsed) {
  727.     // The old switcheroo does the trick.
  728.     range.setStart(nodeB, 0);
  729.     range.setEnd(nodeA, 0);
  730.   }
  731.   return range.commonAncestorContainer;
  732. }
  733.  
  734. // minify html
  735. // /questions/23284784/javascript-minify-html-regex
  736. // TODO Don't apply on code/pre
  737. function minify( s ){
  738.   return s ? s
  739.     .replace(/\>[\r\n ]+\</g, "><")  // Removes new lines and irrelevant spaces which might affect layout, and are better gone
  740.     .replace(/(<.*?>)|\s+/g, (m, $1) => $1 ? $1 : ' ')
  741.     .trim()
  742.     : "";
  743. }
  744.  
  745. // format html
  746. // /questions/3913355/how-to-format-tidy-beautify-in-javascript
  747. // TODO Don't inset span in code/pre
  748. function formatPage(html) {
  749.   var tab = '\t';
  750.   var result = '';
  751.   var indent= '';
  752.   html.split(/>\s*</).forEach(function(element) {
  753.     if (element.match( /^\/\w/ )) {
  754.         indent = indent.substring(tab.length);
  755.     }
  756.     result += indent + '<' + element + '>\r\n';
  757.     if (element.match( /^<?\w[^>]*[^\/]$/ ) && !element.startsWith("input")  ) { 
  758.       indent += tab;              
  759.     }
  760.   });
  761.   return result.substring(1, result.length-3);
  762. }
  763.  
  764. function getDescription() {
  765.   let desc;
  766.   if (document.querySelector('meta[name=description]')) {
  767.     desc = '## ' + document.querySelector('meta[name=description]').content + '\n';
  768.   } else
  769.   if (document.querySelector('meta[itemprop=description]')) {
  770.     desc = '## ' + document.querySelector('meta[itemprop=description]').content + '\n';
  771.   } else {
  772.     desc = '';
  773.   }
  774.   return desc;
  775. }
  776.  
  777. function createFilename(extension) {
  778.  
  779.   let day, now, timestamp, title, filename;
  780.  
  781.   day = time
  782.     .toISOString()
  783.     .split('T')[0];
  784.  
  785.   now = [
  786.     time.getHours(),
  787.     time.getMinutes(),
  788.     time.getSeconds()
  789.   ];
  790.  
  791.   for (let i = 0; i < now.length; i++) { 
  792.     if (now[i] < 10) {now[i] = '0' + now[i];}
  793.   }
  794.  
  795.   timestamp = [
  796.     day,
  797.     now.join('-')
  798.   ];
  799.  
  800. /*
  801.   address = [
  802.     location.hostname,
  803.     location.pathname.replace(/\//g,'_')
  804.   ]
  805.  
  806.   filename =
  807.     address.join('') +
  808.     '_' +
  809.     timestamp.join('_') +
  810.     '.html';
  811. */
  812.  
  813.   if (document.title) {
  814.     title = document.title;
  815.   } else {
  816.     title = location.pathname.split('/');
  817.     title = title[title.length-1];
  818.   }
  819.  
  820.   // TODO ‘ ’ ·
  821.   title = title.replace(/[\/?<>\\:*|'"\.,]/g, '');
  822.   title = title.replace(/ /g, '_');
  823.   title = title.replace(/-/g, '_');
  824.   title = title.replace(/__/g, '_');
  825.  
  826.   filename =
  827.     title + // TODO replace whitespace by underscore
  828.     '_' +
  829.     timestamp.join('_') +
  830.     `.${extension}`;
  831.  
  832.   return filename.toLowerCase();
  833.  
  834. }
  835.  
  836. // export file
  837. // /questions/4545311/download-a-file-by-jquery-ajax
  838. // /questions/43135852/javascript-export-to-text-file
  839. var savePage = (function () {
  840.   var a = document.createElement("a");
  841.   // document.body.appendChild(a);
  842.   // a.style = "display: none";
  843.   return function (fileData, fileName, fileType) {
  844.     var blob = new Blob([fileData], {type: fileType}),
  845.         url = window.URL.createObjectURL(blob);
  846.     a.href = url;
  847.     a.download = fileName;
  848.     a.click();
  849.     window.URL.revokeObjectURL(url);
  850.   };
  851. }());