JQuery在静态HTML页面中搜索并找到找到的字词 [英] JQuery search in static HTML page with highlighting of found word
问题描述
我一直在尝试使用JQuery在静态HTML页面中进行简单搜索。我不得不提到这只是我第一次使用JQuery。
我想改变页面中找到的单词的背景，这是什么到目前为止已尝试：
myJavascript.js： $（document）.ready（function（）{
$（'＃searchfor'）。keyup（function（）{
page = $（'＃all_text '）.text（）;
searchingText = $（'＃searchfor'）。val（）;
$（p：contains（'+ searchingText +'））。css ，white）;
}）;
}）;
这里也是HTML代码：
page.html：
< html&
< head>
< title>测试页< / title>
< / head>
< body bgcolor =＃55c066>
< input type =textid =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中的变量确实从输入获得值
预先感谢您的帮助！
执行类似这样的操作
$（p：contains '））。each（function（i，element）{
var content = $（element）.text（）;
content = content.replace（searchesText，'< span class = -found>'+ searchesText +'< / span>'）;
element.html（content）;
}
.search-found {
text-decoration：underline;
}
p.s。这将只有当每个元素只有纯文本内容否则会删除子节点
编辑：删除额外的'）'在 each callback
I've been trying to make a simple search inside a static HTML page using JQuery. I have to mention that this is just my first time working with JQuery.
I'm trying to change the background of the found word in the page and this is what I've tried so far:
myJavascript.js:
$(document).ready(function(){
$('#searchfor').keyup(function(){
page = $('#all_text').text();
searchedText = $('#searchfor').val();
$("p:contains('"+searchedText+"')").css("color", "white");
});
});
Here's the HTML code as well:
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>
After inspecting the page with Firebug I can see that the variables in JQuery do get the value from the input field but I guess I'm messing up the highlighting part.
Thanks in advance for your help!
Do something like this
$("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;
}
p.s. this will work only if each of the "elements" has plain text only content otherwise it would remove children nodes
EDIT: removed the extra ')' in the each callback
这篇关于JQuery在静态HTML页面中搜索并找到找到的字词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
