Paso 1: Preparación HTML y CSS

    <!-- Agrega un elemento donde se mostrará el texto formateado -->
    <div id="textoFormateado"></div>

    <!-- Define estilos CSS para las clases de redes sociales -->
    <style>
      .red-social-facebook {
        color: blue; /* Personaliza el estilo para Facebook */
      }

      .red-social-youtube {
        color: red; /* Personaliza el estilo para YouTube */
      }
      /* Agrega más estilos para otras redes sociales si es necesario */
    </style>
  

Paso 2: Código JavaScript

    <script>
      // Función para detectar y formatear URLs en un texto
      function detectarYFormatearURLs(texto) {
        const regexURL = /https?:\/\/[^\s/$.?#].[^\s]*/g; // Expresión regular para URLs
        const redesSociales = {
          'facebook.com': 'red-social-facebook',
          'youtube.com': 'red-social-youtube'
          // Agrega más dominios de redes sociales aquí
        };

        const textoFormateado = texto.replace(regexURL, function(url) {
          const dominio = new URL(url).hostname;
          const clase = redesSociales[dominio] || ''; // Si el dominio coincide, obtiene la clase, de lo contrario, una cadena vacía

          return `<a href="${url}" target="_blank" class="${clase}">${url}</a>`;
        });

        return textoFormateado;
      }

      // Texto de ejemplo
      const texto = 'Hola, este es mi link a Facebook: https://www.facebook.com/. También puedes ver videos en YouTube: https://www.youtube.com/.';

      // Llama a la función para detectar y formatear URLs
      const textoFormateado = detectarYFormatearURLs(texto);

      // Muestra el texto formateado en la página
      document.getElementById('textoFormateado').innerHTML = textoFormateado;
    </script>