Script youtube : Utilisation des RegExp pour transformer des URL en visionneu

Utilisation des RegExp pour transformer des URL en visionneuse

Partie I : Les bases de JavaScript

Edition 1 | Chapitre 4 : Les chaînes de caractères en JavaScript / Page 71

Edition 2 | Chapitre 4 : Les chaînes de caractères en JavaScript / Page 74

Edition 3 | Chapitre 4 : Les chaînes de caractères en JavaScript / Page 74

<html>
<head><title>Utilisation des RegExp pour transformer des URL en visionneuse</title>
</head>
<body><h1>Utilisation des RegExp pour transformer des URL en visionneuse</h1><p>Remplace les url Youtube du texte d'origine en visionneuses HTML</p><h2>Texte d'origine</h2><div class="block" id="texte"><p>Visionnez la console du Terminal de Node.js sur Youtube https://youtu.be/ma7ilBRojyc </p></div><h2>Résultat formaté</h2><div class="block" id="formatage"></div>
<script type="text/javascript">/* Récupère le contenu HTML de div#texte */var contenu=document.querySelector("div#texte").innerHTML;/* Report du contenu formaté dans div#formatage */document.querySelector("div#formatage").innerHTML=formaterTexteYoutube(contenu);/* Fonction de formatage du contenu */function formaterTexteYoutube(t) {var regYoutube=new RegExp("(https://youtu.be/)([0-9a-zA-Z]+)(\\s*)", "gi");;return t.replace(regYoutube, "<div class=\"youtube\"><iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/$2\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe></div>");}
</script>
<style type="text/css">div.block {margin:8px;padding:8px;background: #fff;border:1px solid #ccc;}
</style>
</body>
</html>

Exécution du script

Emulation de la console

Code source

<html><head>  <title>Utilisation des RegExp pour transformer des URL en visionneuse</title></head><body>  <h1>Utilisation des RegExp pour transformer des URL en visionneuse</h1>  <p>Remplace les url Youtube du texte d'origine en visionneuses HTML</p>  <h2>Texte d'origine</h2>  <div class="block" id="texte">    <p>Visionnez la console du Terminal de Node.js sur Youtube https://youtu.be/ma7ilBRojyc  </p>  </div>  <h2>Résultat formaté</h2>  <div class="block" id="formatage"></div><script type="text/javascript">  /* Récupère le contenu HTML de div#texte */  var contenu=document.querySelector("div#texte").innerHTML;  /* Report du contenu formaté dans div#formatage */  document.querySelector("div#formatage").innerHTML=formaterTexteYoutube(contenu);  /* Fonction de formatage du contenu */  function formaterTexteYoutube(t) {    var regYoutube=new RegExp("(https://youtu.be/)([0-9a-zA-Z]+)(\2s*)", "gi");;    return t.replace(regYoutube, "<div class=\"youtube\"><iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/$2\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe></div>");  }</script><style type="text/css">  div.block {    margin:8px;    padding:8px;    background: #fff;    border:1px solid #ccc;  }</style></body></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...