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.