Полнотекстовый поиск в HTML без учета тегов / & - PullRequest
Новая
       41

Полнотекстовый поиск в HTML без учета тегов / &

14 голосов
/ 04 мая 2011

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

Пример 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, которая делает это или, по крайней мере, способ обойти эти препятствия?

Заранее спасибо!

Бруно

Ответы [ 4 ]

33 голосов
/ 04 мая 2011

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

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

К сожалению, Opera до перехода на движок рендеринга Blink в версии 15 не поддерживает window.find или TextRange. Если это вас беспокоит, то довольно тяжелой альтернативой является использование комбинации TextRange и CSS класса 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);
        }
    }
}
0 голосов
/ 11 июня 2019

Чтобы выделить ключевые слова для поиска и удалить выделение с веб-страницы, используя 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>
0 голосов
/ 17 февраля 2015

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

<p><h4>If your having trouble finding something press F3 to highlight the text<h4></p>
0 голосов
/ 04 мая 2011

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

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

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

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

Однако я не знаю ни одной библиотеки, которая бы делала это.

...