generar una cadena aleatoria para div id

Quiero mostrar videos de YouTube en mi sitio web, pero necesito poder agregar un idvideo único para cada video que los usuarios compartirán. Así que armé esto y me encontré con un pequeño problema. Estoy tratando de hacer que JavaScript agregue una cadena aleatoria para el div id, pero no está funcionando, mostrando la cadena:

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

Me gusta mucho esta función:

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

¿Desde Crear GUID / UUID en JavaScript?

Edición de 2018: Creo que esta respuesta tiene información interesante, pero para cualquier aplicación práctica, debería usar la respuesta de Joe .

Una forma sencilla de crear una ID única en JavaScript es utilizar el objeto Date:

var uniqid = Date.now();

Eso le da el total de milisegundos transcurridos desde el 1 de enero de 1970, que es un valor único cada vez que lo llama .

El problema con ese valor ahora es que no puede usarlo como ID de elemento, ya que en HTML, los ID deben comenzar con un carácter alfabético. También existe el problema de que dos usuarios que realizan una acción al mismo tiempo pueden generar el mismo ID. Podríamos disminuir la probabilidad de eso y solucionar nuestro problema de caracteres alfabéticos, agregando una letra al azar antes de la parte numérica de la identificación.

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

Sin embargo, esto todavía tiene una posibilidad, por pequeña que sea, de chocar. Lo mejor que puede hacer para obtener una identificación única es llevar un recuento continuo, incrementarlo cada vez y hacer todo eso en un solo lugar, es decir, en el servidor.

Aquí está la función reutilizable para generar las ID aleatorias:

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

// No comenzará con ningún dígito, por lo que será compatible con CSS3

Creo que algunas personas aquí no se han centrado realmente en su pregunta en particular. Parece que el problema que tienes es poner el número aleatorio en la página y conectar el reproductor a él. Hay varias formas de hacerlo. La más simple es con un pequeño cambio en su código existente como este para document.write () el resultado en la página. Normalmente no recomendaría document.write (), pero dado que su código ya está en línea y lo que estaba intentando hacer era poner el div en línea, esta es la forma más sencilla de hacerlo. En el punto donde tiene el número aleatorio, simplemente use esto para ponerlo y el div en la página:

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

y luego, se refiere a eso en el código de configuración de jwplayer como este:

jwplayer(randomId).setup({

Y todo el bloque de código se vería así:

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

Otra forma de hacerlo

Podría agregar aquí al final que generar un número verdaderamente aleatorio solo para crear una ID div única es una exageración. No necesitas un número aleatorio. Solo necesita una identificación que de otro modo no existiría en la página. Los marcos como YUI tienen una función de este tipo y todo lo que hacen es tener una variable global que se incrementa cada vez que se llama a la función y luego la combinan con una cadena base única. Puede verse algo como esto:

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

Y luego, en el uso práctico, haría algo como esto:

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

También necesitaba una identificación aleatoria, decidí usar la codificación base64:

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

Elija la cantidad de caracteres que desee, el resultado suele ser de al menos 24 caracteres.

Basado en HTML 4 , la identificación debe comenzar con la letra:

Los tokens de ID y NAME deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_") , dos puntos (":") y puntos (".").

Entonces, una de las soluciones podría ser (alfanumérica):

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

Otra solución: genere una cadena con solo letras:

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

me gusta este simple:

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

dado que la identificación debe (aunque no debe) comenzar con una letra, la usaría así:

let div_id = randstr('youtube_div_');

algunos valores de ejemplo:

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 versión editada de la versión @ 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;
    }

Sugeriría que comience con algún tipo de marcador de posición, es posible que ya lo tenga, pero está en algún lugar para agregar el div.

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

Ahora, la idea es crear dinámicamente un nuevo div, con su identificación aleatoria:

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

esto se puede agregar a su marcador de posición de la siguiente manera:

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

Luego puede usar eso en su código jwplayer:

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

Ejemplo en vivo: http://jsfiddle.net/pNYZp/

Nota al margen: Estoy bastante seguro de que las identificaciones deben comenzar con un carácter alfabético (es decir, sin números); es posible que desee cambiar la implementación de randomstring para hacer cumplir esta regla. ( ref )

O puede usar Cripto ya que ya está integrado (excepto en IE11, ¡juro que estos tipos no se han actualizado en años!)

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

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

También encontré esto:

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

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

Hay muchas formas de hacer esto, pero para la mayoría de las personas, no hay razón para reinventar la rueda :)

Primero. Asigne una identificación a su div. Me gusta esto:

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

Después de eso, agregue dentro de su <script>etiqueta el siguiente código:

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

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

Utilizando caracteres excepto letras ASCII, dígitos, '_', '-' y '.' pueden causar problemas de compatibilidad, ya que no estaban permitidos en HTML 4. Aunque esta restricción se eliminó en HTML5, una identificación debe comenzar con una letra para compatibilidad.