Выделите искомый текст с помощью Angular js, jQuery и Css

StackOverflow https://stackoverflow.com//questions/11685473

Вопрос

Я использую этот плагин jquery для поиска текста:"http://code.google.com/p/jquery-highlight/downloads/list "..

Но я не могу обернуть этот код в angular js , Я хочу сказать "я не могу написать директиву для вызова этого плагина jquery"...!!!

Обновленный :

Тот же пост в группе Google:

Это группа

Это было полезно?

Решение

ОБНОВЛЕНИЕ:Это всего лишь пример.Вы можете вносить изменения в соответствии с вашими потребностями.

Для этого вам не нужно сравнение регулярных выражений.Давайте просто воспользуемся javascript split() функция

1) Определите стиль выделения.

.srchslctn{
    background-color: yellowgreen;
    color: red;
}

2) Ваш образец HTML

<body>
    <div>
        <div id="serach-Paragraph">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </div>
        <input type="button" id="h" value="Highlight"/>
        <div id="target"></div>
    </div>
</body>

3) JavaScript

            $(document).ready(function(){
            $("#h").on('click',function(){
                highlight(); 
            });
        });

        function highlight(){
            $("#target").empty();
            var mainString = $("#serach-Paragraph").html();
            var searchString = "ipsum";
            var arr = mainString.split(searchString);
            var len = arr.length;
            var finalString="";
            for(var i=0;i<arr.length;i++){

                finalString+=arr[i];

                if(i<len-1){
                    finalString+='<span class="srchslctn">'+searchString+'</span>';
                }
            }
            $("#target").html(finalString);
        }

Вот и все....

Объяснение -: split() разобьет целевую строку в соответствии с вашей строкой поиска.Это похоже на то, как мы извлекаем значения, разделенные запятыми.Единственное, что в этом случае ваша строка поиска действует как запятая :)

Затем продолжайте arr[0] как оно есть.Выделите строку поиска и добавьте ее в arr[0].Добавлять arr[1] к приведенному выше результату и так далее.

Простой....

Искомый текст, как в случае, когда вам нужно выделить только совпадающую часть, сохраняя остальную часть текста такой, какая она есть?

Другие советы

Вы можете использовать engular-ui highlight фильтр.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top