Liaison de texte automatique avec React

Introduction

Dans ce laboratoire, nous allons travailler sur la création d'un composant de liaison de texte automatique à l'aide de React. Le but de ce laboratoire est d'apprendre à utiliser des expressions régulières pour trouver des URL dans une chaîne de caractères et les convertir en éléments de lien appropriés. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de lier automatiquement les URL dans le texte à l'aide de React.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 93%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Liaison de texte automatique

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Ce composant affiche une chaîne de caractères en texte brut, avec les URL converties en éléments de lien appropriés.

Pour y arriver, il utilise String.prototype.split() et String.prototype.match() avec une expression régulière pour trouver les URL dans la chaîne de caractères donnée. Les URL correspondantes sont ensuite renvoyées sous forme d'éléments <a>, en gérant éventuellement les prefixes de protocole manquants. Les parties restantes de la chaîne sont affichées en texte brut.

Voici le code :

const AutoLink = ({ text }) => {
  const urlRegex =
    /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;

  const renderText = () => {
    return text.split(urlRegex).map((word, index) => {
      const urlMatch = word.match(urlRegex);
      if (urlMatch) {
        const url = urlMatch[0];
        return (
          <a key={index} href={url.startsWith("http") ? url : `http://${url}`}>
            {url}
          </a>
        );
      }
      return <span key={index}>{word}</span>;
    });
  };

  return <div>{renderText()}</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <AutoLink text="foo bar baz http://example.org bar" />
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire de Liaison de texte automatique. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.