Rechercher et surligner dans jQuery

Je voudrais pour rechercher et sélectionner le texte à l'aide de jQuery/Java Script.

HTML exemple 1:

<div id="div1"><b>Good</b> <b>Morning</b> </div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>Searched String = "Good Morning"

Lorsque je recherche de la Chaîne "bonjour", à la Fois le contenu en div1 et div3 devrait obtenir en surbrillance. c'est à dire. la sortie html doit être

<div id="div1"><span class="highlight"><b>Good</b> <b>Morning</b> </span></div>
<div id="div2">Good Evening</div> 
<div id="div3"><span class="highlight">Good Morning</span></div>

J'ai utilisé le plugin https://raw.github.com/bartaz/sandbox.js/master/jquery.highlight.js de joindre cherché contenu à l'intérieur de l'étendue. Mais seulement div3 est mis en surbrillance. S'il vous plaît aider.

source d'informationauteur praveen

  1. 36

    http://jsfiddle.net/UPs3V/291/

     var src_str = $("#test").text();
var term = "my text";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

    essayer celui-là, il peut vous aider à

  2. 10

    démo

    script

    jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.each(function() {
innerHighlight(this, pat.toUpperCase());
});
};
jQuery.fn.removeHighlight = function() {
function newNormalize(node) {
for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var child = children[i];
if (child.nodeType == 1) {
newNormalize(child);
continue;
}
if (child.nodeType != 3) { continue; }
var next = child.nextSibling;
if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}
return this.find("span.highlight").each(function() {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this);
newNormalize(thisParent);
}).end();
};

    HTML

    Search: <input type="text" id="text-search" />
<p><b>Demo </b> he new edition of KnowlEdge K12 enables your school with flexibility by wholly automating their administrative and academic processes. With IncTech’s solution for K12 schools, you can. We give you an internal infrastructure so you can share school and student information. </p>
<script type="text/javascript">
$(function() {
$('#text-search').bind('keyup change', function(ev) {
//pull in the new value
var searchTerm = $(this).val();
//remove any old highlighted terms
$('body').removeHighlight();
//disable highlighting if empty
if ( searchTerm ) {
//highlight the new term
$('body').highlight( searchTerm );
}
});
});
</script>
  3. 7

    Essayez ceci:- http://jsfiddle.net/adiioo7/H7CqV/

    Vous devez supprimer le b les balises de div1 et afin de mettre en gras propriété, vous pouvez utiliser la propriété css font-weight:bold.

    HTML:-

    <div id="div1" style="font-weight:bold">Good Morning</div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>

    ou

    <div id="div1"><b>Good Morning</b></div>
<div id="div2">Good Evening</div> 
<div id="div3">Good Morning</div>

    JS:-

    $("body").highlight("Good Morning");