CONNEXION
  • RetourJeux
    • Tests
    • Soluces
    • Previews
    • Sorties
    • Hit Parade
    • Les + attendus
    • Tous les Jeux
  • RetourActu
    • Culture Geek
    • Astuces
    • Réalité Virtuelle
    • Rétrogaming
    • Toutes les actus
  • RetourHigh-Tech
    • Actus JVTECH
    • Bons plans
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTECH
  • 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
    • Xbox Series
    • Overwatch 2
    • FUT 23
    • League of Legends
    • Genshin Impact
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • PS4
  • One
  • Switch
  • Wii U
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Etoile Abonnement RSS

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

DébutPage précedente
1
Page suivantePage suivante
jharax2 jharax2
MP
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
MP
Niveau 5
12 janvier 2015 à 04:11:37

please :up:

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

:up:

Pseudo supprimé
Niveau 10
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é
Niveau 10
16 janvier 2015 à 11:04:54

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

jharax2 jharax2
MP
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
MP
Niveau 5
22 janvier 2015 à 03:25:20

:up:

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

:up:

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

:up:

DébutPage précedente
1
Page suivantePage suivante
Répondre
Prévisu
?
Victime de harcèlement en ligne : comment réagir ?
Infos 0 connecté(s)

Gestion du forum

Modérateurs : godrik, LGV
Contacter les modérateurs - Règles du forum

Sujets à ne pas manquer

La vidéo du moment