Mise en surbrillance de texte
Aperçu
Chef de projet : Paul Jackson (@pjackson28)
Le composant de mise en subrillance de texte met en surbrillance n'importe quel texte dans un secteur pré-défini qui satisfait des critères de recherche. Les critères de recherche sont insensibles à la casse et sont spécifiés par la chaîne d'interrogation d'une addresse URL. Les chaînes avec plusieurs mots sont supportées, y compris les espaces et la ponctuation fondamentale.
Avantages
- Aide les utilisateurs à trouver certains mots sur une page Web
- Approche pour mettre les mots en surbrillance par défaut à travers la chaîne d'interrogation
- Les chaînes avec plusieurs mots sont supportées, y compris les espaces et la ponctuation fondamentale
- Conformes à WCAG 2.0 AA
- Recours aux WAI-ARIA pour accroître l'accessibilité
- Approche d'amélioration progressive
Utilisation recommandée
- Mettre en surbrillance les termes de recherche dans une page de résultats de recherche
- Mettre en surbrillance des mots clés dans une page Web
- Aider l'utilisateur à retrouver toutes les occurrences d'un ou de plusieurs mots dans une page Web
Mise en oeuvre
- Définir votre zone de recherche. Ajouter la classe
wet-boew-texthighlight
à l'étiquette dont vous voulez chercher. - Spécifier les critères de recherche dans la chaîne d'interrogation de l'addresse URL. Ajouter
texthighlight=<texte_1></texte_1>+<texte_2></texte_2>+<texte_3></texte_3>
à la chaîne d'interrogation.
Nota 1 : Les critères de recherche regroupant des caractères spéciaux d'expression régulière (« regex », p.ex., « " », « | », « ? », « + », « ( » ou « ) ») peuvent être partiellement ou entièrement exclus des résultats.
Nota 2 : La validation des balises HTML exige que tous les espaces dans les liens soit remplacés par « %20 ».
Exemple
Critères de recherche - Exemple :
- influenza aviaire
- monde
- suffis
- symptômes semblables à ceux de l'influenza
- À titre de rappel
- À de rares occasions, des humains ont été infectés par ce virus.
La chaîne d'interrogation :
?texthighlight&amp;&#35;61&#59;influenza%20aviaire
+monde+suffis+symptômes%20semblables%20à%20ceux%20de%20l&amp;&#35;39&#59;influenza
+À%20titre%20de%20rappel...+À%20de%20rares%20occasions,%20des%20humains%20ont%20été%20infectés%20par%20ce%20virus.
Mise en surbrillance le texte qui satisfait les critères de recherche
Exemples
Développement
Le code pour la mise en surbrillance de texte se trouve à plusieurs endroits dans le répertoire source de la BOEW :
- js/workers/texthighlight.js - contien le code JavaScript pour la mise en surbrillance de texte
- js/sass/includes/_texthighlight.scss - contient le CSS pour la mise en surbrillance de texte
Problèmes connus
- N'aide pas l'utilisateur à accéder aux mots mis en surbrillance évidence
Historique des versions
- Date de modification :