Question

我是Javascript的新手。我正在为我的问题学习JavaSript和jQuery。

所以这就是我想要做的事情：

我有一个单词列表（＆＃34; foo＆＃34;，＆＃34; bar＆＃34;）
获取当前网页的内容（html，css，content）
我想再次重新渲染页面，但这次是用＃34; foo＆＃34;和＆＃34; bar＆＃34;突出显示页面中出现的任何位置。

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

到目前为止，我完全陷入了第1阶段。有人可以指点一下我可以阅读的方法吗？

Answer 1

您可以在网页上运行此功能以突出显示文字。例如，假设我们想要突出显示的关键字是＆＃34;完全＆＃34;：

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

您可以看到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); 
    });   
  });
});

复制网页以供以后处理

4 个答案: