suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery-Methode zum Hervorheben von Webseiten-Schlüsselwörtern

jQuery-Methode zum Hervorheben von Webseiten-Schlüsselwörtern

PHPz
PHPzOriginal
2016-05-16 15:46:291247Durchsuche

Dieser Artikel stellt hauptsächlich die Methode von jQuery zum Hervorheben von Webseiten-Schlüsselwörtern vor. Es ist von großem praktischem Wert. Die Details sind wie folgt 🎜>

Dies ist ein auf JQuery basierender Code, der die Suchbegriffe auf der Webseite hervorhebt. Wenn Sie in das Textfeld eingeben und der folgende Text den von Ihnen eingegebenen Inhalt enthält, handelt es sich um das Schlüsselwort, dann werden diese Schlüsselwörter angezeigt Hervorgehoben und dynamisch in Gelb hinzugefügt, was sehr auffällig aussieht, genau wie die Anzeige von Schlüsselwörtern in Baidu-Snapshots.

Der Betriebseffekt ist in der folgenden Abbildung dargestellt:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字高亮显示</title>
<style type="text/css">
.highlight {
  background-color: #fff34d;
  -moz-border-radius: 5px; /* FF1+ */
  -webkit-border-radius: 5px; /* Saf3-4 */
  border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
.highlight {
  padding:1px 4px;
  margin:0 -4px;
}
</style>
</head>
<body>
Search: <input type="text" id="text-search" />
<p>This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social ntwork services.</p>
(Text from Wikipedia)
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
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(&#39;span&#39;);
  spannode.className = &#39;highlight&#39;;
  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();
};
</script>
<script type="text/javascript">
$(function() {
  $(&#39;#text-search&#39;).bind(&#39;keyup change&#39;, function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $(&#39;body&#39;).removeHighlight();
    // disable highlighting if empty
    if ( searchTerm ) {
      // highlight the new term
      $(&#39;body&#39;).highlight( searchTerm );
    }
  });
});
</script>
</body>
</html>
Das Obige ist Den gesamten Inhalt dieses Kapitels und weitere verwandte Tutorials finden Sie unter

jQuery-Video-Tutorial!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript_Javascript-FähigkeitenNächster Artikel：Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen