Méthode jQuery pour mettre en évidence les mots-clés des pages Web
Cet article présente principalement la méthode de mise en évidence des mots-clés des pages Web de jQuery. Il implique les techniques de jQuery pour la traversée des chaînes de page et le remplacement régulier. Il est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer. 🎜>
Il s'agit d'un code basé sur jquery qui met en évidence les mots-clés de recherche sur la page Web. Lorsque vous entrez dans la zone de texte, si le texte suivant inclut le contenu que vous avez saisi, c'est le mot-clé, alors ces mots-clés seront. mis en évidence et ajouté dynamiquement en jaune, ce qui sera très accrocheur, tout comme la façon dont les instantanés Baidu affichent les mots-clés. L'effet de l'opération est illustré dans la figure ci-dessous :
<!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>Tutoriel vidéo jQuery !
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment envoyer des pages Web sur le bureau comme raccourci dans le navigateur Edge ?
Mar 14, 2024 pm 05:22 PM
Comment envoyer des pages Web sur le bureau sous forme de raccourci dans le navigateur Edge ? Beaucoup de nos utilisateurs souhaitent afficher les pages Web fréquemment utilisées sur le bureau sous forme de raccourcis pour faciliter l'ouverture directe des pages d'accès, mais ils ne savent pas comment procéder. En réponse à ce problème, l'éditeur de ce numéro partagera le. solution avec la majorité des utilisateurs, jetons un coup d’œil au contenu partagé dans le didacticiel du logiciel d’aujourd’hui. La méthode de raccourci pour envoyer des pages Web au bureau dans le navigateur Edge : 1. Ouvrez le logiciel et cliquez sur le bouton "..." sur la page. 2. Sélectionnez « Installer ce site en tant qu'application » dans « Application » dans l'option du menu déroulant. 3. Enfin, cliquez dessus dans la fenêtre pop-up
Comment régler l'ouverture sur Xiaomi Mi 14 Ultra ?
Mar 19, 2024 am 09:01 AM
Le réglage de la taille de l'ouverture a un impact crucial sur l'effet photo. Le Xiaomi Mi 14 Ultra offre une flexibilité sans précédent dans le réglage de l'ouverture de l'appareil photo. Afin de permettre à chacun d'ajuster l'ouverture en douceur et de réaliser le réglage libre de la taille de l'ouverture, l'éditeur vous propose ici un tutoriel détaillé sur la façon de régler l'ouverture sur Xiaomi Mi 14Ultra. Comment régler l’ouverture sur Xiaomi Mi 14Ultra ? Démarrez l'appareil photo, passez en « Mode professionnel » et sélectionnez l'appareil photo principal - l'objectif W. Cliquez sur l'ouverture, ouvrez la molette d'ouverture, A est automatique, sélectionnez f/1.9 ou f/4.0 selon vos besoins.
Comment définir le chinois dans Cheat Engine ? Comment définir le chinois dans le modificateur ce ?
Mar 18, 2024 pm 01:20 PM
Ce Modifier (CheatEngine) est un outil de modification de jeu dédié à la modification et à l'édition de la mémoire du jeu. Alors, comment définir le chinois dans CheatEngine ? Ensuite, l'éditeur vous expliquera comment définir le chinois dans Ce Modifier. Dans le nouveau logiciel que nous téléchargeons, il peut être déroutant de constater que l'interface n'est pas en chinois. Même si ce logiciel n'a pas été développé en Chine, il existe des moyens de le convertir en version chinoise. Ce problème peut être résolu en appliquant simplement le patch chinois. Après avoir téléchargé et installé le logiciel CheatEngine (ce modificateur), ouvrez l'emplacement d'installation et recherchez le dossier nommé langues, comme indiqué dans la figure ci-dessous.
Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions
Mar 15, 2024 am 10:30 AM
Certains internautes ont constaté que lorsqu'ils ouvraient la page Web du navigateur, les images de la page Web ne pouvaient pas être chargées pendant une longue période. Que s'est-il passé ? J'ai vérifié que le réseau est normal, alors quel est le problème ? L'éditeur ci-dessous vous présentera six solutions au problème de l'impossibilité de charger les images de pages Web. Les images de la page Web ne peuvent pas être chargées : 1. Problème de vitesse Internet La page Web ne peut pas afficher les images. Cela peut être dû au fait que la vitesse Internet de l'ordinateur est relativement lente et qu'il y a davantage de logiciels ouverts sur l'ordinateur et que les images auxquelles nous accédons sont relativement volumineuses. peut être dû à un délai de chargement. Par conséquent, l'image ne peut pas être affichée. Vous pouvez désactiver le logiciel qui utilise la vitesse du réseau et le vérifier dans le gestionnaire de tâches. 2. Trop de visiteurs Si la page Web ne peut pas afficher d'images, c'est peut-être parce que les pages Web que nous avons visitées ont été visitées en même temps.
DaVinci Resolve Studio prend désormais en charge l'encodage matériel AV1 pour les cartes graphiques AMD
Mar 06, 2024 pm 10:04 PM
Nouvelles récentes, manqueMagic a lancé la mise à jour bêta publique 18.5PublicBeta2 du logiciel de montage vidéo DaVinci ResolveStudio, apportant la prise en charge de l'encodage AV1 aux cartes graphiques AMD Radeon. Après la mise à jour vers la dernière version, les utilisateurs de cartes graphiques AMD pourront profiter de l'accélération matérielle pour l'encodage AV1 dans DaVinci Resolve Studio. Bien que le responsable ne précise pas les architectures ou les modèles pris en charge, il est prévu que tous les utilisateurs de cartes graphiques AMD puissent essayer cette fonctionnalité. En 2018, AOMedia a publié une nouvelle norme de codage vidéo AV1 (AOMediaVideoCodec1.0). AV1 est produit par un certain nombre de
Comment mettre à jour Honor MagicOS 8.0 sur Honor 90 GT ?
Mar 18, 2024 pm 06:46 PM
Honor 90GT est un smartphone économique offrant d'excellentes performances et une excellente expérience utilisateur. Cependant, nous pouvons parfois rencontrer certains problèmes, comme par exemple comment mettre à jour Honor MagicOS8.0 sur Honor 90GT ? Cette étape peut être différente selon les téléphones mobiles et les différents modèles. Voyons donc comment mettre à niveau correctement le système. Comment mettre à jour Honor MagicOS 8.0 sur Honor 90GT ? Selon les informations du 28 février, Honor a lancé aujourd'hui la mise à jour bêta publique MagicOS8.0 pour ses trois téléphones mobiles 90GT/100/100Pro. Le numéro de version du package est 8.0.0.106 (C00E106R3P1) 1. . Assurez votre honneur La batterie du 90GT est complètement chargée ;
Mar 22, 2024 pm 03:20 PM
L'exécution de code PHP dans une page Web nécessite de s'assurer que le serveur Web prend en charge PHP et est correctement configuré. PHP peut être ouvert de trois manières : * **Environnement du serveur :** Placez le fichier PHP dans le répertoire racine du serveur et accédez-y via le navigateur. * **Environnement de développement intégré : **Placez les fichiers PHP dans le répertoire racine Web spécifié et accédez-y via le navigateur. * **Serveur distant :** Accédez aux fichiers PHP hébergés sur un serveur distant via l'adresse URL fournie par le serveur.
Planet Mojo : Construire un métaverse de jeu Web3 à partir du jeu d'échecs automatique Mojo Melee
Mar 14, 2024 pm 05:55 PM
Les projets de jeux Metaverse populaires fondés au cours du dernier cycle cryptographique accélèrent leur expansion. Le 4 mars, PlanetMojo, la plateforme de métaverse de jeux Web3, a annoncé un certain nombre de développements importants dans son écologie de jeu, notamment l'annonce du prochain jeu de parkour GoGoMojo, le lancement de la nouvelle saison "Way of War" dans le jeu phare d'échecs automatiques. jeu MojoMelee, et la célébration de la nouvelle La première série ETH "WarBannerNFT" lancée cette saison en coopération avec MagicEden. En outre, PlanetMojo a également révélé qu'ils prévoyaient de lancer les versions mobiles Android et iOS de MojoMelee plus tard cette année. Ce projet sera lancé fin 2021. Après près de deux ans de dur labeur dans le marché baissier, il sera bientôt achevé.
