TypeError: невозможно прочитать свойство '0' null в реакции

Question

У меня есть приложение для машинописного текста, с которым меня попросили помочь. В последний момент владелец веб-сайта захотел изменить внешний вид, чтобы ссылки были интерактивными. Проблема только в том, что данные вводятся в бэкэнд как обычный тег привязки href. Итак, я работал над решением, потому что я не могу использовать этот внутренний метод html по соображениям безопасности.

  switch (note.kind) {
    case "text":
      return (
        <div>
          {" "}
          {note.text.map((content: string, idx: number) => {
            const result = [];
            const matches = content.match(
              /(.*?)(<a href=")?(https?|www)((".*?>.*?<\/a>)|[^\s>]?)*(.*?)/gi
            );

            if (!!matches) {
              matches.forEach((match) => {
                let link;
                if (/href="/i.test(match)) {
                  const url = match
                    .match(/<a href="(.*?)(?=">)/i)![0]
                    .replace('<a href="', "");
                  const linkText = match
                    .match(/(?:<a href=".*?">)(.*)(?=<\/a>)/)![0]
                    .replace(/(?:<a href=".*?">)/i, "");
                  link = <a href={url}>{linkText}</a>;
                } else {
                  const url = match.match(/(https?|www)[^\s]*/gi)!.join("");
                  link = <a href={url}>{url}</a>;
                }

                const splitter = match.match(
                  /(<a href=")?(https?|www)[^\s]*(.*<\/a>)?/gi
                )![0];
                const paredPlainText = match.split(new RegExp(splitter));
                result.push(paredPlainText[0]);
                result.push(link);
                result.push(paredPlainText[1]);
              });
            } else {
              result.push(content);
            }
            console.log(result);

            return <p>{result}</p>;
          })}
        </div>
      );

Это мой код, но единственная проблема в том, что я запускаю TypeError : Невозможно прочитать свойство "0", равное нулю, в методах .match. Любая помощь будет принята с благодарностью! Спасибо!

Answer 1

Вы должны убедиться, что найдено совпадение с регулярным выражением, и оно не равно null

const splitter = match.match(/(<a href=")?(https?|www)[^\s]*(.*<\/a>)?/gi);

if (splitter && splitter.length) {
    const paredPlainText = match.split(new RegExp(splitter[0]));
    const [firstParedPlainText, secondParsedPlainText] = paredPlainText || [null, null];
    if (firstParedPlainText) result.push(firstParedPlainText);

    result.push(link);
    if (secondParsedPlainText) result.push(secondParsedPlainText);
}