Liaison de texte automatique

ReactReactBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/conditional_render("Conditional Rendering") react/FundamentalsGroup -.-> react/list_keys("Lists and Keys") subgraph Lab Skills react/jsx -.-> lab-38341{{"Liaison de texte automatique"}} react/conditional_render -.-> lab-38341{{"Liaison de texte automatique"}} react/list_keys -.-> lab-38341{{"Liaison de texte automatique"}} end

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.