使用 Angular js、jQuery 和 Css 突出显示搜索到的文本答案

【问题标题】：High light the searched text using Angular js , jQuery and Css使用 Angular js、jQuery 和 Css 突出显示搜索到的文本
【发布时间】：2012-07-25 23:52:00
【问题描述】：

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

但我无法将此代码包装在 Angular js 中，我的意思是说“我无法编写指令来调用这个 jquery 插件”......！！！

更新：

Google 群组中的相同帖子：

This is the group

【问题讨论】：

您的问题非常含糊。更具体一点，提供一些示例代码

标签： javascript jquery css angularjs

【解决方案1】：

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

您不需要 RegExp 比较。让我们简单地使用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] 附加到上述结果等等。

简单....

搜索到的文本只需要突出显示匹配的部分，其余文本保持原样吗？

【讨论】：

我正在使用这个 jquery 插件来搜索文本“code.google.com/p/jquery-highlight/downloads/list”..但是我无法将这段代码包装在 angular js 中，我的意思是说“我无法编写一个指令来调用这个jquery插件”
Google 群组中的相同帖子：非常活跃的群组“groups.google.com/forum/#!topicsearchin/angular/…”

【解决方案2】：

您可以使用Angular-UI Highlight 过滤器。

【讨论】：