Каков самый быстрый способ выделить различные строки в html-документе?

Я пытаюсь найти строки на html-странице, у меня есть объект с 1000 именами в нем, и мне нужно найти, существуют ли эти имена в документе html. Если они существуют, мне нужно обернуть их в промежуток или что-то еще и применить класс.Каков самый быстрый способ выделить различные строки в html-документе?

Я использовал этот jQuery Highlight Plugin, но для сканирования и выделения всей страницы требуется около 17 секунд, это, очевидно, меняется в зависимости от того, сколько разных имен есть на странице.

Я пробовал несколько разных плагинов, но не нашел ничего быстрее, есть ли способ сделать это в ванильном JS, который быстрее? Он должен работать только в Chrome.

Любая помощь была бы действительно оценена.

Благодаря

Edit: Структура объекта, который содержит имена:

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

источник

2014-12-09 Giles Butler

Можете ли вы предоставить образец структуры объекта, который содержит 1000 наименований? – navigator

Возможно, вы используете плагин в цикле, который запускает _n_ раз. Вам нужна настраиваемая функция, которая сразу же ищет несколько строк. –

Обычный javascript.

В основном я перебираю ваш объект и извлекаю все соответствующие имена. Как только у меня есть это, я передаю массив функции highlightString, где я присоединяюсь ко всем строкам, которые вы хотите сопоставить с символом pipe, и создавайте регулярное выражение, которое выполняется глобально и игнорирует регистр. Это приводит к тому, что поиск 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>

источник

2014-12-09 05:13:22 Calummm

Не отвечает на вопрос. –

Вопрос был изменен после того, как я ответил. Изменен мой ответ, чтобы отразить это. – Calummm

спасибо за это @Calummm - мне нужно & 0 быть исходной строкой, но вместо того, чтобы заменить ее на $ 0. Будет ли это работать и на document.body, а не на элементе с идентификатором теста, поскольку мне нужно искать всю страницу? –

попробовать это.

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 

      } 

     }); 

    });

источник

2014-12-09 05:02:30 kag

Каков самый быстрый способ выделить различные строки в html-документе?

ответ

Смежные вопросы