如何在我的网站上实施 Mozilla readability.js？答案

【问题标题】：How can I implement Mozilla readability.js to my Website?如何在我的网站上实施 Mozilla readability.js？
【发布时间】：2020-06-10 22:38:01
【问题描述】：

https://github.com/mozilla/readability（readability.js 用于为网页创建阅读视图）

我怎样才能在这个测试网页上实现 readability.js 问题是，readability.js 删除了该网站的元素，我想保留这些元素并留下那些应该删除的元素。我希望有一个人可以帮助我。谢谢！有没有关于如何使用 readability.js 的文档？

<html><head>
<title>Reader View shows only the browser in reader view</title>
    <script src="https://raw.githack.com/mozilla/readability/master/Readability.js"></script>
</head>
<body>
Everything outside the main div tag vanishes in Reader View<br>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<div>
   <h1>H1 tags outside ot a p tag are hidden in reader view</h1>
   <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
   <p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</div>
</body>
    <script>
    var article = new Readability(document).parse();
    </script>
</html>

测试页面来源：Optimize website to show reader view in Firefox

【问题讨论】：

标签： javascript html mozilla readability

【解决方案1】：

您可以像他们在文档中提到的那样一起使用 DOMPurify 和 Readability -

import { Readability } from '@mozilla/readability'
import DOMPurify from 'dompurify';

function readable(doc) {
  const reader = new Readability(doc)
  const article = reader.parse()
  return article
}

let cloneDoc = document.cloneNode(true)
let parsed = readable(cloneDoc)
const markup = DOMPurify.sanitize(parsed.content)

markup 将是可读内容的 html 字符串。试试console.log(parsed) 看看可用的属性。

【讨论】：

【解决方案2】：

你试过了吗？

来自他们的 github 页面：

“Readability 的 parse() 通过修改 DOM 来工作。这会删除网页中的一些元素。您可以通过在创建 Readability 对象时传递文档对象的克隆来避免这种情况。”

var documentClone = document.cloneNode(true); 
var article = new Readability(documentClone).parse();

你可以制作一个 dom 对象的副本，这样你就不会真正修改真实的 dom

【讨论】：

【解决方案3】：

好的……

    document.getElementById("body").innerHTML = "<font face='Calibri' size='4'> 
    <h1>"+article.title+"</h1>"+article.content;

【讨论】：