https://github.com/mozilla/readability 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>
测试页面来源:优化网站以在 Firefox 中显示读者视图 https://stackoverflow.com/questions/30730300/optimize-website-to-show-reader-view-in-firefox
您可以像他们在文档中提到的那样一起使用 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)
查看可用的属性。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)