Automatische Textverknüpfung

Einführung

In diesem Lab werden wir an der Erstellung eines automatischen Textverknüpfungskomponents mit React arbeiten. Ziel dieses Labs ist es, zu lernen, wie reguläre Ausdrücke verwendet werden, um URLs in einem String zu finden und in passende Linkelemente umzuwandeln. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie URLs in Text automatisch mit React verknüpft werden.

Skills Graph

Automatische Textverknüpfung

index.html und script.js wurden bereits in der VM bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Dieses Komponent rendert einen String als einfachen Text, wobei URLs in passende Linkelemente umgewandelt werden.

Um dies zu erreichen, verwendet es String.prototype.split() und String.prototype.match() mit einem regulären Ausdruck, um URLs im gegebenen String zu finden. Die gematchten URLs werden dann als <a>-Elemente zurückgegeben, wobei ggf. fehlende Protokollpräfixe behandelt werden. Die verbleibenden Teile des Strings werden als einfachen Text gerendert.

Hier ist der 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" />
);

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite zu previewen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu automatischer Textverknüpfung abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.