CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

[HTML/Jquery] problème hyperlinks dans un input text

jharax2
jharax2
Niveau 5
11 janvier 2015 à 06:12:00

Bonjour,

J'ai un peu petit problème pour générer un hyperlink lorsque que l'utilisateur rentre une chaine commencant par http://...
J'ai donc un script jquery qui me permet de transformer donc une adresse text en hyperlink :

var t = $("#add").val();
var regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig

var title = t.replace(regex,"<a class='link' href='$1' target='_blank'> $1 </a>");
$("#add").val(title);

Mon champ input :

<paper-input name="title" id="add" label="Add a note"></paper-input>

Le problème étant que si l'utilisateur rentre par exemple : http://google.fr

J'obtiens : <a class='link' href='http://google.fr' target='_blank'> http://google.fr </a>

et non : http://google.fr en lien clikable.

Ma question étant : comment prendre en compte les balises ?

Je précise que j'ai déjà utilisé :

$("#add").append(title);
$("#add").html(title);

Ca ne marche pas :-(

Merci

jharax2
jharax2
Niveau 5
12 janvier 2015 à 04:11:37

please :up:

jharax2
jharax2
Niveau 5
16 janvier 2015 à 04:07:35

:up:

Pseudo supprimé
Pseudo supprimé 16 janvier 2015 à 11:02:34

Je pense qu'il faut déjà fiabiliser ta regex, qui ne marchera pas dans tous les cas.

Voici la regex generique pour une URI:
((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'\".,<>?«»“”‘’]))

Si tu veux un regex spécifique http, https:
((?:https?:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'\".,<>?«»“”‘’]))

Tu peux utiliser le site http://www.debuggex.com/ pour les comprendre.
Avec celles-ci, il ne te restera qu'à concaténer les matching groups 2, 3, et 4, en gros $2$3$4

+ Tu enlèves ce putain de smiley en remplaçant par : (

Message édité le 16 janvier 2015 à 11:03:25 par Pseudo supprimé
Pseudo supprimé
Pseudo supprimé 16 janvier 2015 à 11:04:54

http://daringfireball.net/2010/07/improved_regex_for_matching_urls
Le détail est expliqué ici.

jharax2
jharax2
Niveau 5
17 janvier 2015 à 05:56:37

Salut merci beaucoup de ta réponse, c'est effectivement plus clair maintenant :)

Cependant j'ai une petite erreur en utilisant ton regex : Uncaught SyntaxError: Unexpected token ?

Je ne sais pas exactement d'ou cela peut venir, pourrais tu m'aider une derniere fois ? merci

jharax2
jharax2
Niveau 5
22 janvier 2015 à 03:25:20

:up:

jharax2
jharax2
Niveau 5
26 janvier 2015 à 03:07:24

:up:

jharax2
jharax2
Niveau 5
28 janvier 2015 à 03:05:58

:up:

Sous forums
  • Aide à l'achat Mac
  • Création de Jeux
  • Linux
  • Programmation
  • Création de sites web
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment