웹 페이지 키워드를 강조 표시하는 jQuery 방법-JS 튜토리얼-php.cn

웹 페이지 키워드를 강조 표시하는 jQuery 방법

PHPz

풀어 주다： 2018-09-29 11:39:04

원래의

1269명이 탐색했습니다.

이 글은 주로 jQuery의 웹 페이지 키워드 강조 방법을 소개합니다. 여기에는 jQuery의 페이지 문자열 탐색 및 정기적인 교체 기술이 포함되어 있어 실용적인 가치가 높습니다. 자세한 내용은 다음과 같습니다. 🎜>

웹 페이지의 검색 키워드를 강조 표시하는 jquery 기반 코드입니다. 텍스트 상자에 입력할 때 다음 텍스트에 입력한 내용이 포함되어 있으면 해당 키워드가 됩니다. Baidu 스냅샷이 키워드를 표시하는 방식과 마찬가지로 매우 눈길을 끄는 노란색으로 강조 표시되고 동적으로 추가됩니다.

작동 효과는 아래 그림과 같습니다.

구체 코드는 다음과 같습니다.

<!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>

로그인 후 복사

위는 이 장의 전체 내용, 더 많은 관련 튜토리얼을 보려면

jQuery 비디오 튜토리얼을 방문하세요!