Rad*_*hiu 19 html css search jquery highlight
我一直在尝试使用JQuery在静态HTML页面中进行简单搜索.我不得不提到这是我第一次使用JQuery.
我正在尝试更改页面中找到的单词的背景,这是我到目前为止所尝试的:
myJavascript.js:
$(document).ready(function(){
$('#searchfor').keyup(function(){
page = $('#all_text').text();
searchedText = $('#searchfor').val();
$("p:contains('"+searchedText+"')").css("color", "white");
});
});
这是HTML代码:
page.html中:
<html>
<head>
<title>Test page</title>
</head>
<body bgcolor="#55c066">
<input type="text" id="searchfor"></input>
<p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font>
</p>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="myJavascript.js"></script>
</html>
在用Firebug检查页面后,我可以看到JQuery中的变量确实从输入字段中获取了值,但我想我搞砸了突出显示部分.
在此先感谢您的帮助!
dud*_*ude 22
为什么从头开始构建自己的突出显示功能可能是一个坏主意的原因是因为你肯定会遇到其他人已经解决的问题.挑战:
innerHTML)听起来很复杂？如果你想要一些功能,比如忽略突出显示,变音符号映射,同义词映射,iframe内搜索,分离词搜索等一些元素,这就变得越来越复杂.
使用现有的,实现良好的插件时,您不必担心上面提到的东西.Sitepoint上的第10篇jQuery文本荧光笔插件比较了流行的荧光笔插件.这包括来自这个问题的答案插件.
mark.js是一个用纯JavaScript编写的插件,但也可以作为jQuery插件使用.它的开发目的是提供比其他插件更多的机会,可以选择:
或者你可以看到这个小提琴.
用法示例:
// Highlight "keyword" in the specified context
$(".context").mark("keyword");
// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);
它是免费的,并在GitHub上开发了开源(项目参考).
$(function() {
$("input").on("input.highlight", function() {
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm);
}).trigger("input.highlight").focus();
});mark {
background: orange;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
Lorem ipsum dolor test sit amet
</div>sci*_*uff 11
做这样的事情
$("p:contains('"+searchedText+"')").each( function( i, element ) {
var content = $(element).text();
content = content.replace( searchedText, '<span class="search-found">' + searchedText + '</span>' );
element.html( content );
});
.search-found {
text-decoration: underline;
}
ps这将仅在每个"元素"仅具有纯文本内容时起作用,否则将删除子节点
编辑:删除了each回调中的额外')'
msh*_*yem 10
这是我的:http://jsfiddle.net/x8rpY/1/
JS:
$('#searchfor').keyup(function(){
var page = $('#all_text');
var pageText = page.text().replace("<span>","").replace("</span>");
var searchedText = $('#searchfor').val();
var theRegEx = new RegExp("("+searchedText+")", "igm");
var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
page.html(newHtml);
});
CSS:
#all_text span
{
text-decoration:underline;
background-color:yellow;
}
也适用于重复搜索.
小智 5
$(function() {
$("input").on("input.highlight", function() {
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm);
}).trigger("input.highlight").focus();
});mark {
background: orange;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
Lorem ipsum dolor test sit amet
</div>| 归档时间： |
|
| 查看次数： |
70081 次 |
| 最近记录： |