html 문서에서 다른 문자열을 강조 표시하는 가장 빠른 방법은 무엇입니까?

Question

HTML 페이지에서 문자열을 검색하려고하는데 1000 개의 이름을 가진 객체가 있는데 그 이름이 html 문서에 있는지 찾아야합니다. 그들이 존재한다면 나는 스팬이나 어떤 것으로 그들을 감싸고 클래스를 적용 할 필요가있다.

나는이 jQuery Highlight Plugin을 사용했지만 전체 페이지를 스캔하고 강조 표시하는 데 약 17 초가 걸렸습니다. 이는 페이지에 몇 개의 다른 이름이 있는지에 따라 분명히 다릅니다.

몇 가지 플러그인을 시도했지만 더 빨리 찾지 못했습니다. 더 빠른 바닐라 JS에서이를 수행 할 수있는 방법이 있습니까? Chrome에서만 작동하면됩니다.

도움이 될 것입니다.

편집

감사 : 이름을 보유하고있는 개체의 구조 :

var PEOPLE = { "fred" : { loaded : false, elements : [] }, "dave" : { loaded : false, elements : [] }, "bob" : { loaded : false, elements : [] } }

Answer 1

일반 자바 스크립트.

기본적으로 개체를 반복하고 모든 관련 이름을 추출합니다. 일단이 배열을 사용하면 파이프 문자와 일치시킬 모든 문자열을 조인하고 전역 적으로 실행되고 대/소문자를 무시하는 정규 표현식을 만드는 highlightString 함수에 배열을 전달합니다. 결과적으로 검색된 div는 한 번만 검색됩니다. 이는 상당한 속도 향상을 가져와야합니다.

var PEOPLE = { 
 
    "fred" : { 
 
    loaded : false, 
 
    elements : [] 
 
    }, 
 
    "dave" : { 
 
    loaded : false, 
 
    elements : [] 
 
    }, 
 
    "bob" : { 
 
    loaded : false, 
 
    elements : [] 
 
    } 
 
}, 
 
name, 
 
search = []; 
 

 
for (name in PEOPLE) { 
 
    search.push(name); 
 
}  
 

 
function highlightStrings(input, toMatch) { 
 
    var reg = new RegExp('(' + toMatch.join('|') + ')', "gi"); 
 
    input.innerHTML = input.innerHTML.replace(reg, '<span class="myHighLight">$1</span>'); 
 
} 
 

 
highlightStrings(document.getElementById("test"), search);

.myHighLight {background-color:yellow;}

<div id="test"> 
 
    test1 test2 fred test4 test5 test6 test7 test8 dave test10 test11 test12 bob test14 test15 
 
</div>

Answer 2

이 시도.

jQuery.expr[':'].contains = function(a, i, m) { 
     return jQuery(a).text().toUpperCase() 
     .indexOf(m[3].toUpperCase()) >= 0; 
    }; // this is just for ignore case 

    $("#id_of_Input_Tag").keyup(function() { 
     $(".UserItem a").hide(); // hide all content 
     var rows = $(".UserItem").find("a"); 
     var data = this.value.split("~"); 
     $.each(data, function(i, v) { 
      rows.filter(":contains('" + v + "')").show(); // this will only show the maching content. 
      if(v == ''){ 
       $(".UserItem a").show(); // when input is empty then show all 

      } 

     }); 

    });