Полный текстовый поиск в HTML, игнорирующий теги/&

Недавно я видел много библиотек для поиска и выделения терминов на странице HTML. Тем не менее, каждая библиотека, которую я видел, имеет ту же проблему, они не могут найти текст, частично заключенный в оболочку в теге html, и/или они не смогут найти специальные символы, которые являются & -expressed.

Пример a:

<span> This is a test. This is a <b>test</b> too</span>

Поиск "теста" найдет первый экземпляр, но не второй.

Пример b:

<span> Pencils in spanish are called l&aacute;pices</span>

Поиск "lápices" или "lapices" не приведет к результату.

Есть ли библиотека JS, которая делает это или, по крайней мере, способ обойти эти препятствия?

Спасибо в Advance!

Бруно

Ответ 1

Вы можете использовать window.find() в браузерах, отличных от IE, и TextRange findText() в IE. Вот пример:

http://jsfiddle.net/xeSQb/6/

К сожалению, Opera до перехода на механизм рендеринга Blink в версии 15 не поддерживает ни window.find, ни TextRange. Если это вас беспокоит, альтернатива довольно тяжелая - использовать комбинацию TextRange и CSS class applier модули моей Rangy, как в следующем демо: http://rangy.googlecode.com/svn/trunk/demos/textrange.html

код:

function doSearch(text) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.execCommand("HiliteColor", false, "yellow");
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("BackColor", false, "yellow");
            textRange.collapse(false);
        }
    }
}

Ответ 2

Здесь есть две проблемы. Один из них - проблема с вложенным контентом или поисковые совпадения, охватывающие границу элемента. Другой - символы с экранированным HTML.

Один из способов обработки символов с экранированием HTML - это, если вы используете jQuery, например, использовать метод .text() и запускать поиск по этому вопросу. Текст, который возвращается от этого, уже имеет экранированные символы, переведенные в их реальный характер.

Другим способом обработки этих специальных символов будет замена фактического символа (в строке поиска) на экранированную версию. Тем не менее, существует множество разнообразных возможностей, которые могут быть длительным поиском в зависимости от реализации.

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

Я не знаю никаких библиотек, которые это делают.

Ответ 3

Чтобы выделить ключевые слова поиска и удалить выделение с веб-страницы, используя JavaScript

    <script>


    function highlightAll(keyWords) { 
        document.getElementById('hid_search_text').value = keyWords; 
        document.designMode = "on"; 
        var sel = window.getSelection(); 
        sel.collapse(document.body, 0);
        while (window.find(keyWords)) { 
            document.execCommand("HiliteColor", false, "yellow"); 
            sel.collapseToEnd(); 
        }
        document.designMode = "off";
        goTop(keyWords,1); 
    }

    function removeHighLight() { 
        var keyWords = document.getElementById('hid_search_text').value; 
        document.designMode = "on"; 
        var sel = window.getSelection(); 
        sel.collapse(document.body, 0);
        while (window.find(keyWords)) { 
            document.execCommand("HiliteColor", false, "transparent"); 
            sel.collapseToEnd(); 
        }
        document.designMode = "off"; 
        goTop(keyWords,0); 
    }

    function goTop(keyWords,findFirst) { 
        if(window.document.location.href = '#') { 
            if(findFirst) { 
                window.find(keyWords, 0, 0, 1);
            }
        }
    }
    </script>

    <style>
    #search_para {
     color:grey;
    }
    .highlight {
     background-color: #FF6; 
    }
    </style>

    <div id="wrapper">
        <input type="text" id="search_text" name="search_text"> &nbsp; 
        <input type="hidden" id="hid_search_text" name="hid_search_text"> 
        <input type="button" value="search" id="search" onclick="highlightAll(document.getElementById('search_text').value)" >  &nbsp; 
        <input type="button" value="remove" id="remove" onclick="removeHighLight()" >  &nbsp; 
        <div>
            <p id="search_para">The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages.</p>
        </div>
    </div>

Ответ 4

Просто нажмите F3 и используйте команды <p> и </p>, чтобы рассказать другим на своем сайте. Например: у вас есть информация о кнопке поиска F3, чтобы текст на экране отображался другими, которые вы бы набрали.

<p><h4>If your having trouble finding something press F3 to highlight the text<h4></p>