Modification du contenu DOM avec des expressions régulières
En utilisant la bibliothèque jQuery, il est possible de remplacer des parties du contenu HTML d'un élément DOM. Par exemple, pour substituer des balises <span> avec un style spécifique par des espaces, on peut apliquer une regex et reconstruire le contenu.
const motif = /<span\s+style="color:\s*#008080;">([\d\s]+)<\/span>/gi;
let texteOrigine = elementObjet.html();
let texteTransforme = texteOrigine.replace(motif, ' ');
let nouveauContenu = $('<div/>').html(texteTransforme);
// L'objet jQuery résultant conserve la structure DOM après substitution.
Gestion des événements clavier
Pour détecter la touche pressée, on utilise la propriété keyCode de l'événement. Voici un exemple simple qui afffiche la valeur Unicode :
<html>
<head>
<script>
function afficherTouche(evt) {
alert(evt.keyCode);
}
</script>
</head>
<body onkeyup="afficherTouche(event)">
<p>Appuyez sur une touche pour voir son code.</p>
</body>
</html>
Écoute des combinaisons de touches
Pour intercepter des raccourcis comme Ctrl+V, on vérifie simultanément le code de la touche et l'état des touches modificatrices :
document.addEventListener('keydown', function(evenement) {
let evt = evenement || window.event;
if (evt.keyCode === 86 && evt.ctrlKey) {
console.log('Combinaison Ctrl+V détectée');
}
});
Navigation par raccourcis dans les en-têtes
En bloguant sur certaines plateformes, on peut implémenter Alt+Flèches pour naviguer entre les titres <h2>. Ci-dessous, un script qui parcourt ces éléments :
let compteur = 0;
document.addEventListener('keydown', function(ev) {
let e = ev || window.event;
let titres = document.querySelectorAll('h2');
if (e.keyCode === 40 && e.altKey) {
compteur = Math.min(compteur + 1, titres.length - 1);
titres[compteur].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
console.log('Alt+Flèche bas');
} else if (e.keyCode === 38 && e.altKey) {
compteur = Math.max(compteur - 1, 0);
titres[compteur].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
console.log('Alt+Flèche haut');
}
});
On peut adapter ce code pour d'autres types d'en-têtes en remplaçant la sélecsion, par exemple avec jQuery : $(':header').
Forcer la validation d'une confirmation
Pour toujours accepter une boîte de dialogue confirm, on redéfinit la fonction :
window.confirm = function() { return true; };
Coloration des messages console
La méthode console.log supporte les styles CSS pour afficher du texte coloré dans la console du navigateur.
Contournement de l'auto-pause des vidéos
Certaines plateformes de e-learning mettent en pause les vidéos lors d'un changement de focus. Des solutions existent selon la technologie utilisée.
Vidéos HTML5
Pour les éléments <video>, on peut forcer la lecture continue avec un intervalle régulier :
setInterval(function() {
let videoActif = document.querySelector('video');
if (videoActif && videoActif.paused) {
videoActif.play().catch(() => {});
}
}, 1000);
Vidéos Flash (obsolète)
Anciennement, pour les intégrations Flash, on pouvait neutraliser les gestionnaires de perte de focus :
if (navigator.appName.indexOf('Internet Explorer') !== -1) {
document.onfocusout = function() { return true; };
} else {
window.onblur = function() { return true; };
}
Via jQuery
Sur les plateformes utilisant jQuery, une astuce consiste à redéfinir la méthode de pause :
jQuery.fn.pauseMovie = function() { return this; };