웹 페이지 키워드를 강조 표시하는 jQuery 방법
이 글은 주로 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('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();
};
</script>
<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>
</body>
</html>jQuery 비디오 튜토리얼을 방문하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7364
15
1628
14
1353
52
1266
25
1214
29
Edge 브라우저에서 웹페이지를 데스크톱에 바로가기로 보내는 방법은 무엇입니까?
Mar 14, 2024 pm 05:22 PM
Edge 브라우저에서 웹 페이지를 바탕 화면에 바로 가기로 보내는 방법은 무엇입니까? 많은 사용자들이 액세스 페이지를 직접 열 수 있는 편의를 위해 자주 사용하는 웹 페이지를 데스크탑에 바로가기로 표시하고 싶어하지만 어떻게 해야 하는지 알지 못합니다. 이 문제에 대해 이번 호의 편집자는 다음과 같은 내용을 공유합니다. 대다수의 사용자에게 솔루션을 제공하는 방법에 대해 알아보겠습니다. 오늘의 소프트웨어 튜토리얼에서 공유된 내용을 살펴보겠습니다. Edge 브라우저에서 웹 페이지를 데스크탑으로 보내는 바로 가기 방법: 1. 소프트웨어를 열고 페이지에서 "..." 버튼을 클릭합니다. 2. 드롭다운 메뉴 옵션의 "애플리케이션"에서 "이 사이트를 애플리케이션으로 설치"를 선택합니다. 3. 마지막으로 팝업창에서 클릭해주세요.
Xiaomi Mi 14 Ultra에서 조리개를 조정하는 방법은 무엇입니까?
Mar 19, 2024 am 09:01 AM
조리개 크기 조정은 사진 효과에 중요한 영향을 미칩니다. Xiaomi Mi 14 Ultra는 카메라 조리개 조정에 있어 전례 없는 유연성을 제공합니다. 모든 사람이 조리개를 원활하게 조정하고 조리개 크기의 자유로운 조정을 실현할 수 있도록 여기 편집자는 Xiaomi Mi 14Ultra에서 조리개를 설정하는 방법에 대한 자세한 튜토리얼을 제공합니다. Xiaomi Mi 14Ultra에서 조리개를 조정하는 방법은 무엇입니까? 카메라를 시작하고 "프로페셔널 모드"로 전환한 다음 기본 카메라 - W 렌즈를 선택합니다. 조리개를 클릭하고 조리개 다이얼을 엽니다. A는 자동이며 필요에 따라 f/1.9 또는 f/4.0을 선택합니다.
치트 엔진에서 중국어를 설정하는 방법 ce 수정자에서 중국어를 설정하는 방법은 무엇입니까?
Mar 18, 2024 pm 01:20 PM
Ce Modifier(CheatEngine)는 게임 메모리 수정 및 편집 전용 게임 수정 도구입니다. 그러면 CheatEngine에서 중국어를 설정하는 방법은 무엇입니까? 다음으로, 편집자가 Ce Modifier에서 중국어를 설정하는 방법을 알려드릴 것입니다. 우리가 다운로드하는 새 소프트웨어에서 인터페이스가 중국어가 아닌 것을 발견하면 혼란스러울 수 있습니다. 이 소프트웨어는 중국에서 개발되지 않았지만 중국어 버전으로 변환하는 방법이 있습니다. 이 문제는 중국어 패치만 적용하면 해결됩니다. CheatEngine(ce modifier) 소프트웨어를 다운로드하여 설치한 후 아래 그림과 같이 설치 위치를 열고 언어라는 폴더를 찾으세요.
웹페이지의 이미지를 로드할 수 없으면 어떻게 해야 합니까? 6가지 솔루션
Mar 15, 2024 am 10:30 AM
일부 네티즌들은 브라우저 웹페이지를 열었을 때 웹페이지의 사진이 오랫동안 로드되지 않는다는 사실을 발견했습니다. 네트워크가 정상인지 확인했는데 무엇이 문제인가요? 아래 편집기에서는 웹 페이지 이미지를 로드할 수 없는 문제에 대한 6가지 해결 방법을 소개합니다. 웹페이지 이미지를 로드할 수 없습니다: 1. 인터넷 속도 문제 웹페이지에 이미지가 표시되지 않습니다. 이는 컴퓨터의 인터넷 속도가 상대적으로 느리고 컴퓨터에 열려 있는 소프트웨어가 더 많기 때문일 수 있습니다. 로딩 시간 초과로 인해 사진이 표시되지 않을 수 있습니다. 네트워크 속도를 차지하는 소프트웨어를 끄고 작업 관리자에서 확인할 수 있습니다. 2. 방문자가 너무 많으면 웹페이지에 사진이 표시되지 않는 경우, 우리가 방문한 웹페이지가 동시에 방문되었기 때문일 수 있습니다.
DaVinci Resolve Studio는 이제 AMD 그래픽 카드용 AV1 하드웨어 인코딩을 지원합니다.
Mar 06, 2024 pm 10:04 PM
최근 소식인 lessMagic은 DaVinci Resolve Studio 비디오 편집 소프트웨어의 18.5PublicBeta2 공개 베타 업데이트를 출시하여 AMD Radeon 그래픽 카드에 AV1 인코딩 지원을 제공했습니다. 최신 버전으로 업데이트하면 AMD 그래픽 카드 사용자는 DaVinci Resolve Studio에서 AV1 인코딩을 위한 하드웨어 가속 기능을 활용할 수 있습니다. 공식적으로는 지원되는 아키텍처나 모델을 지정하지 않았지만 모든 AMD 그래픽 카드 사용자가 이 기능을 사용해 볼 수 있을 것으로 예상됩니다. 2018년 AOMedia는 새로운 비디오 코딩 표준 AV1(AOMediaVideoCodec1.0)을 출시했습니다. AV1은 여러 회사에서 생산됩니다.
Honor 90 GT에서 Honor MagicOS 8.0을 어떻게 업데이트하나요?
Mar 18, 2024 pm 06:46 PM
Honor 90GT는 뛰어난 성능과 뛰어난 사용자 경험을 갖춘 비용 효율적인 스마트폰입니다. 그러나 때때로 Honor 90GT에서 Honor MagicOS8.0을 업데이트하는 방법과 같은 몇 가지 문제가 발생할 수 있습니다. 이 단계는 휴대폰과 모델에 따라 다를 수 있습니다. 따라서 시스템을 올바르게 업그레이드하는 방법에 대해 논의하겠습니다. Honor 90GT에서 Honor MagicOS 8.0을 업데이트하는 방법 2월 28일 뉴스에 따르면 Honor는 오늘 자사 휴대폰 3대에 대한 MagicOS8.0 공개 베타 업데이트를 푸시했습니다. 패키지 버전 번호는 8.0.0.106(C00E106R3P1)입니다. .명예를 지키십시오. 90GT의 배터리는 완전히 충전되었습니다.
Planet Mojo: 자동 체스 게임 Mojo Melee에서 Web3 게임 메타버스 구축
Mar 14, 2024 pm 05:55 PM
지난 암호화폐 사이클에 설립된 인기 메타버스 게임 프로젝트가 확장을 가속화하고 있습니다. 3월 4일, Web3 게임 메타버스 플랫폼인 PlanetMojo는 곧 출시될 파쿠르 게임 GoGoMojo 발표, 주력 자동 체스의 새 시즌 "Way of War" 출시 등 게임 생태계의 여러 중요한 발전을 발표했습니다. MojoMelee 게임과 MagicEden과 협력하여 이번 시즌에 출시된 첫 번째 ETH 시리즈 "WarBannerNFT"를 축하합니다. 또한, PlanetMojo는 올해 말에 MojoMelee의 Android 및 iOS 모바일 버전을 출시할 계획이라고 밝혔습니다. 이 프로젝트는 2021년 말에 시작될 예정입니다. 약세장에서 약 2년간의 노력 끝에 곧 완료될 예정입니다.
웹 페이지에서 PHP를 여는 방법
Mar 22, 2024 pm 03:20 PM
웹 페이지에서 PHP 코드를 실행하려면 웹 서버가 PHP를 지원하고 적절하게 구성되어 있는지 확인해야 합니다. PHP는 세 가지 방법으로 열 수 있습니다: * **서버 환경:** 서버 루트 디렉터리에 PHP 파일을 넣고 브라우저를 통해 접근합니다. * **통합 개발 환경: ** 지정된 웹 루트 디렉터리에 PHP 파일을 배치하고 브라우저를 통해 액세스합니다. * **원격 서버:** 서버가 제공한 URL 주소를 통해 원격 서버에 호스팅된 PHP 파일에 액세스합니다.
