es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Linkify.js.org (jQuery) HashTags: ¿Cambiar el destino URL predeterminado a Twitter?

23 Jul, 2023 Programación

Estoy filtrando el contenido de CDATA de varias fuentes XML de terceros, eliminando todo el HTML en el servidor y utilizando Linkify.js.org (v3.0.3) para aplicar de forma segura etiquetas HTML a los enlaces de texto sin formato filtrados en el lado del cliente.

Mi proyecto depende mucho de jQuery (v3.6.0).

La API de datos del DOM de linkify jQuery funciona muy bien en los enlaces y direcciones de correo electrónico, pero los hashtags están resultando problemáticos. Por defecto, los hashtags redirigen a https://my-domain.com/current-dir/#<HashTag>, pero me gustaría que redirigieran a https://twitter.com/hashtag/<HashTag>. Sé que esto es posible según los ejemplos de demostración, pero me gustaría mantener una solución de jQuery y mantener los atributos de datos del div si es posible.

He leído la documentación de Linkify.js.org/docs/ pero no logro entender cómo cambiar la URL del hashtag sin perder los atributos de datos del div de jQuery.

A continuación se muestra un ejemplo sencillo (es importante mantener un destino _blank en HREF):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Linkify</title>
</head>
<body>
<div data-linkify="this" data-linkify-target="_blank">
  Prueba de dominio: domain.com. Prueba de correo electrónico: email@address.com. Prueba de HashTag: #Linkify.
</div>
<script src="/js/jquery.min.js"></script> 
<script src="/js/linkify.min.js"></script> 
<script src="/js/linkify-jquery.min.js"></script> 
<script src="/js/linkify-plugin-hashtag.min.js"></script>
</body>
</html>

Funciona muy bien, pero como mencioné, #Linkify redirige a la misma página (por ejemplo, https://my-domain.com/current-dir/#Linkify).

El JS del lado del cliente no es mi punto fuerte, pero ¿hay un atributo data-linkify que pueda usar para cambiar el destino del hashtag a Twitter? ¿O algún código jQuery adicional que pueda utilizar para modificar el comportamiento del complemento linkify-plugin-hashtag.min.js?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el destino de los hashtags predeterminados a Twitter manteniendo los atributos de datos de jQuery div y utilizando la API de datos DOM de jQuery linkify, puedes modificar el complemento linkify-plugin-hashtag.min.js siguiendo los siguientes pasos:

    1. Declara una función personalizada para modificar el destino del enlace del hashtag:
    function changeHashTagLink(href) {
  var hashTag = href.substring(1);
  return "https://twitter.com/hashtag/" + hashTag;
}
    1. Modifica el código del complemento agregando la función personalizada al array linkify.options.defaults.rules.hashtag.format:
    format: function (value) {
  return {
    formatted: '#' + value,
    type: 'hashtag',
    href: changeHashTagLink('#' + value)
  };
}
    1. Agrega el archivo modificado linkify-plugin-hashtag.min.js al archivo HTML después del archivo linkify-jquery.min.js:
    <script src="/js/linkify.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/linkify-jquery.min.js"></script>
<script src="/js/linkify-plugin-hashtag-custom.min.js"></script>
    1. Ejecuta la API de datos DOM de jQuery linkify en el div especificando la opción hashtag en la función linkify():
    $('div[data-linkify="this"]').linkify({
  target: '_blank',
  hashtag: true
});

    Siguiendo estos pasos, los enlaces de los hashtags en el div se redirigirán a https://twitter.com/hashtag/<HashTag> manteniendo los atributos de datos del div de jQuery.

Comments are closed.