générer une chaîne aléatoire pour l'id div

Je souhaite afficher des vidéos YouTube sur mon site Web, mais je dois pouvoir ajouter une idvidéo unique pour chaque vidéo qui sera partagée par les utilisateurs. J'ai donc mis cela ensemble et j'ai rencontré un petit problème. J'essaie d'obtenir le JavaScript pour ajouter une chaîne aléatoire pour le div id, mais cela ne fonctionne pas, affichant la chaîne:

<script type='text/javascript' src='jwplayer.js'></script>
<script type='text/javascript'>
function randomString(length) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');

    if (! length) {
        length = Math.floor(Math.random() * chars.length);
    }

    var str = '';
    for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
    }
    return str;
}

var div = randomString(8);
</script>

<div id='div()'>This text will be replaced</div>

<script type='text/javascript'>
  jwplayer('div()').setup({
    'flashplayer': 'player.swf',
    'file': 'http://www.youtube.com/watch?v=4AX0bi9GXXY',
    'controlbar': 'bottom',
    'width': '470',
    'height': '320'
  });
</script>

J'aime vraiment cette fonction:

function guidGenerator() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

De Créer GUID / UUID en JavaScript?

Édition 2018: Je pense que cette réponse contient des informations intéressantes, mais pour toute application pratique, vous devriez plutôt utiliser la réponse de Joe .

Un moyen simple de créer un identifiant unique en JavaScript consiste à utiliser l'objet Date:

var uniqid = Date.now();

Cela vous donne le nombre total de millisecondes écoulées depuis le 1er janvier 1970, qui est une valeur unique chaque fois que vous appelez cela .

Le problème avec cette valeur maintenant est que vous ne pouvez pas l'utiliser comme ID d'élément, car en HTML, les ID doivent commencer par un caractère alphabétique. Il y a aussi le problème que deux utilisateurs effectuant une action exactement au même moment peuvent entraîner le même ID. Nous pourrions réduire la probabilité de cela et résoudre notre problème de caractères alphabétiques en ajoutant une lettre aléatoire avant la partie numérique de l'ID.

var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
var uniqid = randLetter + Date.now();

Cela a encore une chance, même minime, de se heurter. Votre meilleur pari pour un identifiant unique est de garder un compte courant, de l'incrémenter à chaque fois et de faire tout cela en un seul endroit, c'est-à-dire sur le serveur.

Voici la fonction réutilisable pour générer les ID aléatoires:

function revisedRandId() {
     return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
}

// Il ne commencera pas par n'importe quel chiffre, il sera donc pris en charge par CSS3

Je pense que certaines personnes ici ne se sont pas vraiment concentrées sur votre question particulière. Il semble que le problème que vous rencontrez consiste à mettre le nombre aléatoire dans la page et à y connecter le lecteur. Il y a plusieurs façons de le faire. Le plus simple est avec une petite modification de votre code existant comme celui-ci pour document.write () le résultat dans la page. Je ne recommanderais normalement pas document.write (), mais puisque votre code est déjà en ligne et que ce que vous essayiez déjà de faire était de mettre le div en ligne, c'est le moyen le plus simple de le faire. Au point où vous avez le nombre aléatoire, vous utilisez simplement ceci pour le mettre et le div dans la page:

var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">This text will be replaced</div>');

et puis, vous faites référence à cela dans le code de configuration de jwplayer comme ceci:

jwplayer(randomId).setup({

Et tout le bloc de code ressemblerait à ceci:

<script type='text/javascript' src='jwplayer.js'></script>
<script type='text/javascript'>
function randomString(length) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz'.split('');

    if (! length) {
        length = Math.floor(Math.random() * chars.length);
    }

    var str = '';
    for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
    }
    return str;
}

var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">This text will be replaced</div>'); 

  jwplayer(randomId).setup({
    'flashplayer': 'player.swf',
    'file': 'http://www.youtube.com/watch?v=4AX0bi9GXXY',
    'controlbar': 'bottom',
    'width': '470',
    'height': '320'
  });
</script>

Une autre façon de le faire

Je pourrais ajouter ici à la fin que générer un nombre vraiment aléatoire juste pour créer un identifiant div unique est excessif. Vous n'avez pas besoin d'un nombre aléatoire. Vous avez juste besoin d'un identifiant qui n'existerait pas autrement dans la page. Les cadres comme YUI ont une telle fonction et tout ce qu'ils font est d'avoir une variable globale qui est incrémentée chaque fois que la fonction est appelée, puis de la combiner avec une chaîne de base unique. Cela peut ressembler à ceci:

var generateID = (function() {
    var globalIdCounter = 0;
    return function(baseStr) {
        return(baseStr + globalIdCounter++);
    }
})();

Et, dans la pratique, vous feriez quelque chose comme ceci:

var randomId = generateID("myMovieContainer");  // "myMovieContainer1"
document.write('<div id="' + randomId + '">This text will be replaced</div>');
jwplayer(randomId).setup({

J'avais également besoin d'un identifiant aléatoire, j'ai utilisé l'encodage base64:

btoa(Math.random()).substring(0,12)

Choisissez le nombre de caractères que vous souhaitez, le résultat est généralement d'au moins 24 caractères.

Basé sur HTML 4 , l'identifiant doit commencer par la lettre:

Les jetons ID et NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_") , deux points (":") et des points (".").

Ainsi, l'une des solutions pourrait être (alphanumérique):

  var length = 9;
  var prefix = 'my-awesome-prefix-'; // To be 100% sure id starts with letter

  // Convert it to base 36 (numbers + letters), and grab the first 9 characters
  // after the decimal.
  var id = prefix + Math.random().toString(36).substr(2, length);

Une autre solution - générer une chaîne avec des lettres uniquement:

  var length = 9;
  var id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, length);

j'aime ce simple:

function randstr(prefix)
{
    return Math.random().toString(36).replace('0.',prefix || '');
}

puisque id devrait (mais pas doit) commencer par une lettre, je l'utiliserais comme ceci:

let div_id = randstr('youtube_div_');

quelques exemples de valeurs:

youtube_div_4vvbgs01076
youtube_div_1rofi36hslx
youtube_div_i62wtpptnpo
youtube_div_rl4fc05xahs
youtube_div_jb9bu85go7
youtube_div_etmk8u7a3r9
youtube_div_7jrzty7x4ft
youtube_div_f41t3hxrxy
youtube_div_8822fmp5sc8
youtube_div_bv3a3flv425

Une version modifiée de la version @ jfriend000:

    /**
     * Generates a random string
     * 
     * @param int length_
     * @return string
     */
    function randomString(length_) {

        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz'.split('');
        if (typeof length_ !== "number") {
            length_ = Math.floor(Math.random() * chars.length_);
        }
        var str = '';
        for (var i = 0; i < length_; i++) {
            str += chars[Math.floor(Math.random() * chars.length)];
        }
        return str;
    }

Je vous suggère de commencer avec une sorte d'espace réservé, vous l'avez peut-être déjà, mais c'est quelque part pour ajouter le div.

<div id="placeholder"></div>

Maintenant, l'idée est de créer dynamiquement un nouveau div, avec votre identifiant aléatoire:

var rndId = randomString(8); 
var div = document.createElement('div');
div.id = rndId
div.innerHTML = "Whatever you want the content of your div to be";

cela peut être ajouté à votre espace réservé comme suit:

document.getElementById('placeholder').appendChild(div);

Vous pouvez ensuite l'utiliser dans votre code jwplayer:

jwplayer(rndId).setup(...);

Exemple en direct: http://jsfiddle.net/pNYZp/

Note de bas de page: Je suis presque sûr que les identifiants doivent commencer par un caractère alpha (c'est-à-dire pas de chiffres) - vous voudrez peut-être changer votre implémentation de randomstring pour appliquer cette règle. ( réf )

Ou vous pouvez utiliser Cripto car il est déjà intégré (sauf dans IE11, je jure que ces gars-là n'ont pas mis à jour depuis des années!)

https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues#Examples

var id = new Uint32Array(10);
window.crypto.getRandomValues(array);

J'ai également trouvé ceci:

https://gist.github.com/6174/6062387#gistcomment-3255605

let length = 32;
let id = crypto.randomBytes(length).toString("base64");

Il y a de nombreuses façons de le faire, mais pour la plupart des gens, il n'y a aucune raison de réinventer la roue :)

Première. Attribuez un identifiant à votre div. Comme ça:

<div id="uniqueid">This text will be replaced</div>

Après cela, ajoutez à l'intérieur de votre <script>balise le code suivant:

Document.getElementById("uniqueid").id = randomString(8);

window.btoa(String.fromCharCode(...window.crypto.getRandomValues(new Uint8Array(5))))

Utilisation de caractères à l'exception des lettres ASCII, des chiffres, «_», «-» et «.» peuvent causer des problèmes de compatibilité, car ils n'étaient pas autorisés dans HTML 4. Bien que cette restriction ait été levée dans HTML5, un identifiant doit commencer par une lettre pour assurer la compatibilité.