使用Angular js，jQuery和Css高光搜索文本

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

题

我使用这个jquery插件来搜索文本："http://code.google.com/p/jquery-highlight/downloads/list "..

但是我无法将此代码包装在angular js中 , 我的意思是说"我无法编写调用此jquery插件的指令"。..!!!

更新后的 :

在谷歌集团相同的职位:

这是组

有帮助吗？

解决方案

更新资料:这只是一个例子。您可以根据您的需要进行修改。

你不需要正则表达式比较。让我们简单地使用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() 将根据您的searchString打破targetString。这类似于我们检索逗号分隔值的方式。唯一的事情是在这种情况下，你的搜索字符串就像逗号:)

然后保持 arr[0] 因为它是。突出显示您的搜索字符串并将其附加到 arr[0].追加 arr[1] 到上述结果等等。

简单。...

搜索的文本，你必须只突出匹配的部分保持其余的文本，因为它是？

其他提示

您可以使用 Angular-UI突出显示过滤器。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top