如何以编程方式从浏览器控制台重新格式化网页的文本

I was reading a license agreement and getting annoyed at the long list of definitions with no salient formatting to guide my eye, so I decided to take advantage of their use of quote marks around keywords to bolden all of those keywords.

我正在阅读一份许可协议,并对很长的定义列表感到恼火,没有明显的格式来指导我的眼睛,所以我决定利用他们在关键字周围使用引号来加强所有这些关键字。

I ended up using

我最终使用了

lis = $$("li")
for(var i=0; i<lis.length; i++)
{ lis[i].innerHTML=lis[i].innerHTML.replace(/^(".*?")/,"<b>$1</b>") }

Basically, the above code works in the Chrome console to get a list of all <li> tags and uses a regex to check if each one starts with a quoted phrase. If it does, we replace that phrase with itself, but surrounded by <b> tags. Thus all the quoted bulleted terms in the list become boldened for easy reading. (Really it operates on all lists, but I was lazy and this worked on the page I'm looking at.)

基本上,上面的代码可以在Chrome控制台中使用,以获取所有

标记的列表,并使用正则表达式检查每个标记是否以引用的短语开头。如果是,我们用自己替换该短语,但用标签包围。因此,列表中所有引用的项目符号术语都会变得粗糙,以便于阅读。 (它确实在所有列表上运行,但我很懒,这在我正在查看的页面上有效。)

My problem is that this was a pain to figure out (especially regex) and feels too verbose for my use case. Isn't there an easier way? Perhaps a JS library I can load that's more suited to reformatting webpages via console?

我的问题是,这是一个很难找到(尤其是正则表达式)并且对我的用例感觉过于冗长。有没有更简单的方法?也许我可以加载的JS库更适合通过控制台重新格式化网页?

1 个解决方案

#1

I regularly use the Google Chrome Developer Tools "Elements" tab to manipulate the look of web-based documentation before saving as a PDF for off-line use. It's quite easy to quickly locate what you want to hide by adding display: none, or whatever you want, to the right places.

我定期使用Google Chrome开发者工具“元素”标签来操作基于Web的文档的外观,然后保存为PDF以供离线使用。通过将display:none或任何你想要的东西添加到正确的位置,可以很容易地快速找到要隐藏的内容。