Est-il possible de remplacer une sous-chaîne dans une chaîne par une balise ou un attribut HTML différent ?

Question

Il existe un composant React qui accepte une chaîne comme propriété :

interface MyProps {
  myInput: string;
}

export function MyComponent({ myInput }: MyProps) {
   ...
   return (
     <div>
       {myInput}
     </div>
   );
};

Ce composant est utilisé ailleurs :

<MyComponent myInput="请通过test@test.com与我们联系" />

Ma question est la suivante : peut-on changer la couleur de l'adresse email dans ce cas ? Par exemple, changez-le en bleu.

Ou mieux encore, enveloppez ce texte dans :

<a href="mailto:test@test.com" target="_blank">
   test@test.com
</a>

Je ne sais pas si quelque chose comme ça est possible si le type de propriété est string.

Answer 1

Vous pouvez le faire en fonction de la chaîne fournie, mais c'est plus facile si l'adresse e-mail est fournie comme attribut distinct MyComponent.

Sans changer les composants, j'utiliserais une simple expression régulière pour obtenir l'adresse e-mail à partir d'une chaîne et vous pourrez ensuite faire ce que vous voulez.

Voici un exemple d'expression régulière simple et incomplète :

const SUPER_SIMPLE_EMAIL_REGEX = /[a-z0-9.]{1,}@test.com/gi; // 不要使用这个

export function MyComponent({ myInput }: MyProps) {
   const match = myInput.match(SUPER_SIMPLE_EMAIL_REGEX);

  if (!match.length) {
    return (
      <div>
        {myInput}
      </div>
    );
  }

  const textWithoutEmail = myInput.replace(match[0], '');

  return (
    <div>
      <span>{textWithoutEmail}</span>
      <a href={`mailto:${match[0]}`} target="_blank">
        match[0]
      </a>
    </div>
  );

};

C'est une solution très simplifiée mais je pense que vous pouvez l'utiliser dans votre cas.