Функция замены не работает в ie8 ie7

Question

Мой простой текстовый поиск хорошо работает в IE9, но не в IE8 & IE7. В функции замены должно быть что-то неправильное. Не могли бы вы помочь? http://jsfiddle.net/8zuCP/

<input type="text" id="searchfor"/> 
    <span class="search">"Wrecking Ball"</span> 
    <span class="search">We clawed, we chained our hearts in vain</span> 
    <span class="search">We jumped never asking why</span> 
    <span class="search">We kissed, I fell under your spell.</span> 
    <span class="search">A love no one could deny</span> 


    <script> 
    $('#searchfor').keyup(function(){ 
    $('.search').each(function() { 
     var line = $(this); 
     var lineText = line.text().replace("<hl>","").replace("</hl>"); 
     var searchedText = $('#searchfor').val(); 
     var regText = new RegExp("("+searchedText+")", "igm"); 
     var newHtml = lineText.replace(regText,"<hl>$1</hl>"); 
     line.html(newHtml); 
    }); 
    }); 
    </script> 

CSS:

.search hl 
    { 
      background-color:orange; 
    } 

Answer 1

Это удушья, потому что <hl> (который, во-первых, я думал, что число 1, а не нижний регистр "L") не является допустимым HTML тегов и более ранним версиям IE это не нравится.

Я бы рекомендовал превратить ваш «hl» в класс и присвоить его тегам <span> вместо вашего пользовательского тега <hl>. Ваш HTML в порядке. , , вам просто нужно изменить JS и CSS:

JS

$('#searchfor').keyup(function(){ 
    $('.search').each(function() { 
     var line = $(this); 
     var lineText = line.text().replace(/<\/?span[^>]*>/, ""); 
     var searchedText = $('#searchfor').val(); 
     var regText = new RegExp("("+searchedText+")", "igm"); 
     var newHtml = lineText.replace(regText,"<span class='hl'>$1</span>"); 
     line.html(newHtml); 
    }); 
}); 

CSS

.search span.hl {background-color: orange;} 

С другой стороны, если вы никогда не будете иметь никаких других <span> тегов в "поиск" пролеты, вы можете просто добавить равнину <span>, без класса, например:

 var lineText = line.text().replace(/<\/?span>/, ""); 
      . . . 
     var newHtml = lineText.replace(regText,"<span>$1</span>"); 

. , , и изменить стиль:

.search span {background-color: orange;} 

Пару боковых нот:

1. Я также обновил свой первоначальный .replace() удалить существующие теги. , , используя regex, вы можете сделать это за один вызов вместо двух.
2. У исходного .replace("</hl>") отсутствовал заменяемый текст. , , это должно было быть .replace("</hl>", ""). Это фактически заставило его потерпеть неудачу в IE9, когда я его протестировал (подумал, что Firefox принял это как чемпион :))