正在复制网页以供以后处理

Question

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

所以我想做的是：

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

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

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

Answer 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>');
    }
}

Answer 2

我将引导您找到正确的路径。这个片段不是最好的解决方案，但它将向您展示如何做到这一点的示例：

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

然后样式.match类

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

Answer 3

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

var text=document.body.innerHTML;

你可以用javascript来替换每一个出现在下面的标记中的单词

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

然后可以将高亮显示类添加到css文件中进行样式设置。

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

Answer 4

您可以在这里看到一个关于JS Bin的示例。

$(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); 
    });   
  });
});