复制网页以供以后处理[关闭]答案

【问题标题】：Copying a webpage for later processing [closed]复制网页以供以后处理[关闭]
【发布时间】：2015-11-16 19:15:31
【问题描述】：

我对 Javascript 完全陌生。我正在为下面的问题学习 JavaSript 和 jQuery。

这就是我想要做的：

我有一个单词列表（“foo”、“bar”）
获取当前网页的内容（html、css、内容）
我想再次重新呈现页面，但这次“foo”和“bar”在页面中出现的任何位置都会突出显示。

我只想突出显示用户打开的任何页面，其中包含页面中出现的一组单词。

到目前为止，我完全陷入了第 1 步。有人可以指出我可以阅读的方法吗？

【问题讨论】：

您可以使用js 在html 页面中查找单词，然后添加标签<span class="match">{word}</span> 并使用特定背景颜色设置.match 类的样式跨度>
要求推荐或查找...教程的问题在 StackOverflow 上是题外话。也许与其寻找如此具体的东西，不如简单地逐个学习。如何在 CSS 中突出显示文本？如何在 JavaScript 中替换文本？
Highlighting search words like Chrome with jQuery的可能重复
如果你需要用 Javascript 处理抓取，我推荐 Node 和 Cheerio.

标签： javascript jquery html css

【解决方案1】：

您可以在网页上运行它以突出显示文本。例如，假设我们要突出显示的关键字是“完全”：

var keyword = 'completely';
var items = document.querySelectorAll('*');
for(var i = 0; i < items.length; i++) {
    var element = items[i];
    if(element.innerHTML.split('<')[0].indexOf(keyword) > -1) {
       element.innerHTML = element.innerHTML.replace(keyword, '<span style="background-color: yellow">'+keyword+'</span>');
    }
}

【讨论】：

【解决方案2】：

我会指引你走向正确的道路。这个 sn-p 不是最好的解决方案，但它会向您展示如何完成它的示例：

document.body.innerHTML = document.body.innerHTML.replace(match, '<span class="match">' + match + '</span>');

然后样式.match类

注意 match 变量是您要突出显示的关键字

【讨论】：

【解决方案3】：

您可以使用抓取页面的整个 html

var text=document.body.innerHTML;

您可以使用 javascript 将每个出现的单词替换为以下标记

"the sky is blue".replace(/sky/g,"<span class='highlight'>sky</span>");

然后您可以将突出显示类添加到您的 css 文件以进行样式设置。

您可以优化搜索以将其限制为仅 html 文本

【讨论】：

【解决方案4】：

你可以看到example on JS Bin here.

$(document).ready(function(){
  $("#highlighter").bind('keyup', function(e){
    var text = $.trim($(this).val());
    if(text !== '' && text !== ' '){
        var pattern = new RegExp(text, "gi");
    }
    $('p, div, span').each(function(i){
        var str = this;
        var orgText = $(str).text();
            orgText = orgText.replace(pattern, function($1){
            return "<span style='background:red'>" + $1 + "</span>";
        });
        $(str).html(orgText); 
    });   
  });
});

【讨论】：