genera una stringa casuale per l'ID div

Voglio visualizzare i video di YouTube sul mio sito web, ma devo essere in grado di aggiungere un idvideo univoco per ogni video che verrà condiviso dagli utenti. Quindi ho messo insieme questo e ho incontrato un piccolo problema. Sto cercando di ottenere il JavaScript per aggiungere una stringa casuale per il div id, ma non funziona, mostrando la stringa:

<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>

Mi piace molto questa funzione:

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

Da Crea GUID / UUID in JavaScript?

Modifica 2018: penso che questa risposta abbia alcune informazioni interessanti, ma per qualsiasi applicazione pratica dovresti invece usare la risposta di Joe .

Un modo semplice per creare un ID univoco in JavaScript consiste nell'usare l'oggetto Date:

var uniqid = Date.now();

Questo ti dà il totale dei millisecondi trascorsi dal 1 ° gennaio 1970, che è un valore univoco ogni volta che lo chiami .

Il problema con quel valore ora è che non puoi usarlo come ID di un elemento, poiché in HTML, gli ID devono iniziare con un carattere alfabetico. C'è anche il problema che due utenti che eseguono un'azione nello stesso momento potrebbero restituire lo stesso ID. Potremmo ridurre la probabilità di ciò e risolvere il nostro problema con i caratteri alfabetici, aggiungendo una lettera casuale prima della parte numerica dell'ID.

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

Questo ha ancora una possibilità, per quanto scarsa, di scontrarsi. La soluzione migliore per un ID univoco è mantenere un conteggio parziale, incrementarlo ogni volta e fare tutto ciò in un unico posto, cioè sul server.

Ecco la funzione riutilizzabile per generare gli ID casuali:

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

// Non inizierà con una cifra qualsiasi, quindi sarà supportato da CSS3

Penso che alcune persone qui non si siano davvero concentrate sulla tua particolare domanda. Sembra che il problema che hai è mettere il numero casuale nella pagina e agganciare il giocatore ad esso. Ci sono molti modi per farlo. Il più semplice è con una piccola modifica al codice esistente come questo per document.write () il risultato nella pagina. Normalmente non consiglierei document.write (), ma poiché il tuo codice è già inline e quello che stavi già provando a fare era inserire il div inline, questo è il modo più semplice per farlo. Nel punto in cui hai il numero casuale, lo usi semplicemente per inserirlo e il div nella pagina:

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

e poi, ti riferisci a quello nel codice di configurazione di jwplayer in questo modo:

jwplayer(randomId).setup({

E l'intero blocco di codice sarebbe simile a questo:

<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>

Un altro modo per farlo

Potrei aggiungere qui alla fine che generare un numero veramente casuale solo per creare un ID div univoco è decisamente eccessivo. Non hai bisogno di un numero casuale. Hai solo bisogno di un ID che altrimenti non esisterebbe nella pagina. I framework come YUI hanno una tale funzione e tutto ciò che fanno è avere una variabile globale che viene incrementata ogni volta che la funzione viene chiamata e quindi combinarla con una stringa di base univoca. Può assomigliare a questo:

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

E, quindi, nell'uso pratico, faresti qualcosa del genere:

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

Avevo anche bisogno di un ID casuale, sono andato usando la codifica base64:

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

Scegli tutti i caratteri che desideri, il risultato di solito è di almeno 24 caratteri.

Basato su HTML 4 , l'id dovrebbe iniziare dalla lettera:

I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da qualsiasi numero di lettere, cifre ([0-9]), trattini ("-"), trattini bassi ("_") , due punti (":") e punti (".").

Quindi, una delle soluzioni potrebbe essere (alfanumerica):

  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);

Un'altra soluzione: genera una stringa solo con lettere:

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

mi piace questo semplice:

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

poiché l'id dovrebbe (anche se non deve) iniziare con una lettera, lo userei in questo modo:

let div_id = randstr('youtube_div_');

alcuni valori di esempio:

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

Una versione modificata della versione @ 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;
    }

Ti suggerirei di iniziare con una sorta di segnaposto, potresti già averlo, ma è da qualche parte per aggiungere il div.

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

Ora, l'idea è di creare dinamicamente un nuovo div, con il tuo id casuale:

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

questo può essere aggiunto al segnaposto come segue:

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

Puoi quindi usarlo nel tuo codice jwplayer:

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

Esempio dal vivo: http://jsfiddle.net/pNYZp/

Nota a margine: sono abbastanza sicuro che gli id ​​debbano iniziare con un carattere alfabetico (cioè senza numeri) - potresti voler cambiare la tua implementazione di randomstring per far rispettare questa regola. ( rif )

Oppure potresti usare Cripto poiché è già integrato (tranne in IE11, giuro che questi ragazzi non si aggiornano da anni!)

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

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

Ho anche trovato questo:

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

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

Ci sono molti modi per farlo, ma per la maggior parte delle persone non c'è motivo di reinventare la ruota :)

Primo. Assegna un ID al tuo div. Come questo:

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

Successivamente, aggiungi all'interno del <script>tag il seguente codice:

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

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

Uso di caratteri tranne lettere ASCII, cifre, "_", "-" e "." può causare problemi di compatibilità, poiché non erano consentiti in HTML 4. Sebbene questa restrizione sia stata rimossa in HTML5, un ID dovrebbe iniziare con una lettera per compatibilità.