Rumah  >  Soal Jawab  >  teks badan

Adakah mungkin untuk menukar subrentetan dalam rentetan kepada tag atau atribut HTML yang berbeza?

Terdapat komponen React yang menerima rentetan sebagai sifat:

interface MyProps {
  myInput: string;
}

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

Komponen ini digunakan di tempat lain:

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

Persoalan saya, bolehkah kita menukar warna alamat e-mel dalam kes ini? Contohnya, tukar kepada biru.

Atau lebih baik lagi, bungkus teks itu dalam:

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

Tidak pasti jika perkara seperti ini boleh dilakukan jika jenis harta itu string.

P粉852114752P粉852114752424 hari yang lalu477

membalas semua(1)saya akan balas

  • P粉848442185

    P粉8484421852023-09-14 11:45:12

    Anda boleh melakukannya berdasarkan rentetan yang disediakan, tetapi lebih mudah jika alamat e-mel disediakan sebagai atribut yang berasingan MyComponent.

    Tanpa menukar komponen, saya akan menggunakan beberapa regex mudah untuk mendapatkan alamat e-mel daripada rentetan dan kemudian anda boleh melakukan apa sahaja yang anda mahu.

    Berikut ialah contoh ungkapan biasa yang ringkas dan tidak lengkap:

    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>
      );
    
    };

    Ini adalah penyelesaian yang sangat mudah tetapi saya fikir anda boleh menggunakannya dalam kes anda.

    balas
    0
  • Batalbalas