想请问如何在ajax的页面查找关键字并高亮。

Question

业务需要用浏览器插件，目的是在页面查找到关键字以后高亮显示，如果是普通页面测试可以显示（有些糙，不是专业前端），但是在ajax的页面下，页面无法正常显示，一片空白。关了插件就正常显示：

$('body').bind('keyup', function(event) {
  if (event.keyCode == "13") {
    var a = ["淡季","景点"];
    var bodyHtml = $("#test_id").innerHTML;
    for (i=0; i<a.length; i++){
      if (bodyHtml.indexOf(a[i])) {
        document.body.innerHTML = document.body.innerHTML.replaceAll(a[i],"<span style='background: yellow'>$&</span>");
      }
    }
  }
});

请问在ajax的页面下，如何等页面加载完成能正常显示后可以高亮显示关键字？

Answer 1

使用了jquery，那么js要加载ready()方法下,等待页面加载完成之后再来执行ajax操作

$(document).ready(function(){
    $('body').bind('keyup', function(event) {
      if (event.keyCode == "13") {
        var a = ["淡季","景点"];
        var bodyHtml = $("#test_id").innerHTML;
        for (i=0; i<a.length; i++){
          if (bodyHtml.indexOf(a[i])) {
            document.body.innerHTML = document.body.innerHTML.replaceAll(a[i],"<span style='background: yellow'>$&</span>");
          }
        }
      }
    });   
})