Лучше "найти и выделить" внедрение в HTML-элемент


Я пытаюсь выяснить, что лучший и самый быстрый реализация браузера-Как найти и выделить функцию внутри сайта с помощью JavaScript. Эта функция предназначена для одного HTML-элемента, без детей. Конечно, его можно разложить на элементы с детей с некоторыми простыми петлями. Что не является частью вопроса. Я написал небольшой код, чтобы сделать здесь что-то работает:

УСБ

span.highlight{background:yellow; padding:3px;}

HTML-код

<input type="search"/>
<p>The Ama...</p>

В JavaScript

var s = document.querySelector('input[type="search"]'),
    p = document.querySelector('p'),
    find = function(){
    var words = p.innerText.split(' ');
    for(var i=0; i<words.length; i++){
        if(words[i].toLowerCase() == s.value.toLowerCase()){
            words[i] = '<span class="highlight">' + words[i] + "</span>";
            p.innerHTML = words.join(' ');
        }
        else{

        }   
    }
}
s.addEventListener('keydown', find , false);
s.addEventListener('keyup', find , false);

Этот код работает нормально. Оформить живой пример здесь. Но это не быстро и иногда краху браузера. Как я могу сделать эту функцию с лучшим подходом?

Обратите внимание, я не хочу здесь полный обзор кода. Так что не напоминать мне, что querySelector не поддерживается в IE7 и те же вещи.



16106
2
задан 28 ноября 2011 в 04:11 Источник Поделиться
Комментарии
1 ответ

Давайте начнем с оптимизации кода. Просто сказал, петли опасность здесь.


  1. В то время как цикл может быть быстрее, чем в цикле, особенно в таких случаях. Что-то длины.

  2. Не смотреть в массивы. Сделать слово = слова[я] когда-то, что гораздо быстрее.

  3. Вы присоединяетесь в каждой итерации. Вы должны присоединиться только после того, как вы обновили ваш массив.

  4. Я думаю, пустой еще не закончил.

var s = document.querySelector('input[type="search"]'),
p = document.querySelector('p'),
find = function(){
var words = p.innerText.split(' '),
i = words.length,
word = '';

while(--i) {
word = words[i];
if(word.toLowerCase() == s.value.toLowerCase()){
words[i] = '<span class="highlight">' + word + "</span>";
}
else{

}
}

p.innerHTML = words.join(' ');
}

s.addEventListener('keydown', find , false);
s.addEventListener('keyup', find , false);

Последнее, но, безусловно, не менее важное, страницы, которую вы хотите прочитать.

2
ответ дан 28 ноября 2011 в 05:11 Источник Поделиться