Comment convertir automatiquement les URL en liens cliquables dans votre contenu HTML avec JavaScript

Dans ce tutoriel, nous allons vous montrer comment convertir automatiquement les URL en liens cliquables dans vos contenus HTML à l'aide de JavaScript. Cette technique peut être particulièrement utile si votre site web affiche du contenu généré par les utilisateurs qui peut contenir des URL, ou si vous chargez du contenu dynamique via AJAX.

Publié par Miha

19 Octobre 2023

Étape 1: Sélectionnez les éléments contenant du texte
Tout d’abord, nous devons sélectionner les éléments qui contiennent le texte que nous voulons traiter. Dans cet exemple, nous allons sélectionner tous les éléments avec la classe « aff_post_text » :

								
									//
//
//

var textElements = document.querySelectorAll('.aff_post_text');

//
//
//

Étape 2: Convertissez les URL en liens cliquables
Ensuite, nous allons parcourir chaque élément sélectionné et utiliser une expression régulière pour trouver les URL dans le texte. Nous allons ensuite remplacer chaque URL par une balise pour la convertir en lien cliquable :

								
									//
//
textElements.forEach(function(textElement) {
    textElement.innerHTML = textElement.innerHTML.replace(
        /(https?:\/\/[^\s<]+)/g,
        '$1'
    );
});

//
//
//

Étape 3: Gérez le contenu dynamique avec MutationObserver
Si votre site web charge du contenu dynamique via AJAX, vous devrez également convertir les URL en liens cliquables dans ce nouveau contenu. Pour ce faire, nous allons utiliser une MutationObserver pour écouter les changements dans le DOM et appliquer le traitement sur les nouveaux éléments :

								
									//
//
//

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(function(node) {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    var textElements = node.querySelectorAll('.aff_post_text');
                    textElements.forEach(function(textElement) {
                        textElement.innerHTML = textElement.innerHTML.replace(
                            /(https?:\/\/[^\s<]+)/g,
                            '$1'
                        );
                    });
                }
            });
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

Conclusion:
Avec ces quelques lignes de code JavaScript, vous pouvez automatiquement convertir les URL en liens cliquables dans votre contenu HTML, même pour le contenu chargé dynamiquement. Cette technique améliorera l’expérience utilisateur sur votre site web en facilitant l’accès aux liens mentionnés dans votre contenu.

Partager sur

Facebook

Twitter