我正在使用这个 jquery 插件来搜索文本:"http://code.google.com/p/jquery-highlight/downloads/list "..
但是我无法将此代码包装在 angular js 中， 我的意思是说“我无法编写指令来调用此 jquery 插件”...!!!
更新:
Google 群组中的相同帖子:
最佳答案
更新:这只是一个例子。您可以根据需要进行修改。
您不需要为此进行 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] 附加到上面的结果等等。
简单....
搜索到的文本是否只需要突出显示匹配的部分，其余文本保持原样？
关于javascript - 使用 Angular js 、 jQuery 和 Css 突出显示搜索到的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11685473/