使用 Angular js、jQuery 和 Css 突出显示搜索到的文本
Posted
技术标签:
【中文标题】使用 Angular js、jQuery 和 Css 突出显示搜索到的文本【英文标题】：High light the searched text using Angular js , jQuery and 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
【问题讨论】：
您的问题非常含糊。更具体一点，提供一些示例代码 【参考方案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 过滤器。
【讨论】：
以上是关于使用 Angular js、jQuery 和 Css 突出显示搜索到的文本的主要内容，如果未能解决你的问题，请参考以下文章
Django：如何在 Jquery 中使用 $getJSON 或在 Angular.js 中使用 $http.get 接收 QuerySet？
用于渐进式web和混合应用程序（纯JS、jQuery、Angular和React）的跨平台UI控件
使用 Angular js 验证 jquery 下拉插件不起作用
如何将事件侦听器添加到 ag 网格单元格内的元素（使用 js 或 jquery，不是 angular，不是 reactjs，不是 vue）