Javascript 在网站上搜索文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13799154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Searching the text on website
提问by Freelancer
Respected Members,
尊敬的会员，
I am designing the website in pure HTML with the help of one Template.
我在一个模板的帮助下用纯 HTML 设计网站。
In that i have one textbox[search] and Go button.
在那我有一个文本框[搜索] 和转到按钮。
I want to make operation such that when any one types certain text and presses Go button, It should highlight the text in that website which is matching to that text.
我想进行操作，以便当任何人键入某些文本并按下 Go 按钮时，它应该突出显示该网站中与该文本匹配的文本。
How can i do that?
我怎样才能做到这一点？
Than You.
比你。
回答by amrit_neo
$(document).ready(function(){
$('#searchItem').keyup(function(){
var name = $(this).val();
var pattern = name.toLowerCase();
var targetId = "";
var divs = document.getElementsByClassName("item");
$(document).find('.item').hide();
$('.item').each(function(i){
var para = divs[i].getElementsByTagName("p");
var index = para[0].innerText.toLowerCase().indexOf(pattern);
if (index != -1) {
$(this).show();
}
});
});
});
回答by Vivek Dragon
You didn't posted what you have. I think this is what you are mentioning.
你没有发布你所拥有的。我想这就是你所说的。
Check this. I can do this for you but you have to do it in your ideas
检查这个。我可以为你做这件事，但你必须按照你的想法去做
function highlightInElement(elementId, text){
var elementHtml = document.getElementById(elementId).innerHTML;
var tags = [];
var tagLocations= [];
var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;
//Strip the tags from the elementHtml and keep track of them
var htmlTag;
while(htmlTag = elementHtml.match(htmlTagRegEx)){
tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
tags[tags.length] = htmlTag;
elementHtml = elementHtml.replace(htmlTag, '');
}
//Search for the text in the stripped html
var textLocation = elementHtml.search(text);
if(textLocation){
//Add the highlight
var highlightHTMLStart = '<span class="highlight">';
var highlightHTMLEnd = '</span>';
elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);
//plug back in the HTML tags
var textEndLocation = textLocation + text.length;
for(i=tagLocations.length-1; i>=0; i--){
var location = tagLocations[i];
if(location > textEndLocation){
location += highlightHTMLStart.length + highlightHTMLEnd.length;
} else if(location > textLocation){
location += highlightHTMLStart.length;
}
elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
}
}
//Update the html of the element
document.getElementById(elementId).innerHTML = elementHtml;
}
highlightInElement("fatDoggie","The dog is really really fat");
This fiddle was made to highlight a set of text instead you should get the variable in search and place in the highlightInElement("Element","Var");
这个小提琴是为了突出一组文本，而不是你应该在搜索中获取变量并将其放在 highlightInElement("Element","Var");
回答by Palantir
You mean you have a one-page site? In this case, the entire content is already loaded on the page, and you just want to search through it. You can do it quite easily using Javascript and JQuery. Just catch the click on the button, and traverse the DOM looking for your string, then do domething on that (for example, scroll until there, or highlight it).
你的意思是你有一个单页网站？在这种情况下，整个内容已经加载到页面上，您只想搜索它。您可以使用 Javascript 和 JQuery 轻松完成。只需点击按钮，然后遍历 DOM 查找您的字符串，然后对其执行操作（例如，滚动到那里，或突出显示它）。
If you have more than one page, then this will be more challenging, as you don't have all your content available client-side. A server-side searching solution would be better in this case.
如果您有多个页面，那么这将更具挑战性，因为您的所有内容都无法在客户端使用。在这种情况下，服务器端搜索解决方案会更好。
