generuje losowy ciąg dla div id

Chcę wyświetlać filmy z YouTube w mojej witrynie, ale muszę mieć możliwość dodania unikatowego iddla każdego filmu, który ma być udostępniany przez użytkowników. Więc złożyłem to razem i napotkałem mały problem. Próbuję zmusić JavaScript do dodania losowego ciągu dla div id, ale to nie działa, pokazując ciąg:

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

Bardzo podoba mi się ta funkcja:

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

Z tworzenia GUID / UUID w JavaScript?

Edycja 2018: Myślę, że ta odpowiedź zawiera kilka interesujących informacji, ale w przypadku wszelkich praktycznych zastosowań powinieneś zamiast tego użyć odpowiedzi Joe .

Prostym sposobem na utworzenie unikalnego identyfikatora w JavaScript jest użycie obiektu Date:

var uniqid = Date.now();

To daje całkowitą liczbę milisekund, które upłynęły od 1 stycznia 1970 r., Co jest unikalną wartością za każdym razem, gdy to wywołasz .

Problem z tą wartością polega teraz na tym, że nie można jej używać jako identyfikatora elementu, ponieważ w HTML identyfikatory muszą zaczynać się od litery alfabetu. Istnieje również problem polegający na tym, że dwóch użytkowników wykonujących akcję dokładnie w tym samym czasie może skutkować tym samym identyfikatorem. Moglibyśmy zmniejszyć prawdopodobieństwo tego i rozwiązać nasz problem ze znakami alfabetycznymi, dodając losową literę przed częścią numeryczną identyfikatora.

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

Wciąż ma to jednak szansę, choćby niewielką, na zderzenie. Najlepszym rozwiązaniem dla unikalnego identyfikatora jest ciągłe liczenie, zwiększanie go za każdym razem i robienie tego wszystkiego w jednym miejscu, tj. Na serwerze.

Oto funkcja wielokrotnego użytku do generowania losowych identyfikatorów:

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

// Nie będzie zaczynał się od żadnej cyfry, więc będzie obsługiwany przez CSS3

Myślę, że niektórzy ludzie tutaj nie skupili się tak naprawdę na twoim konkretnym pytaniu. Wygląda na to, że masz problem z umieszczeniem losowej liczby na stronie i podłączeniem do niej gracza. Można to zrobić na kilka sposobów. Najprościej jest wprowadzić niewielką zmianę w istniejącym kodzie, taką jak document.write () wynik na stronie. Normalnie nie polecałbym document.write (), ale ponieważ twój kod jest już wbudowany, a to, co już próbowałeś zrobić, to wstawienie div w linii, jest to najprostszy sposób. W miejscu, w którym masz liczbę losową, po prostu użyj tego, aby umieścić ją i element div na stronie:

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

a potem odnosisz się do tego w kodzie konfiguracyjnym jwplayera w ten sposób:

jwplayer(randomId).setup({

A cały blok kodu wyglądałby tak:

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

Inny sposób na zrobienie tego

Na koniec mógłbym dodać, że wygenerowanie prawdziwie losowej liczby tylko w celu utworzenia unikalnego identyfikatora DIV jest przesadą. Nie potrzebujesz liczby losowej. Potrzebujesz tylko identyfikatora, który w innym przypadku nie istniałby na stronie. Struktury takie jak YUI mają taką funkcję i wszystko, co robią, to zmienna globalna, która jest zwiększana za każdym razem, gdy funkcja jest wywoływana, a następnie łączy ją z unikalnym ciągiem bazowym. Może wyglądać mniej więcej tak:

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

A potem w praktyce zrobiłbyś coś takiego:

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

Potrzebowałem również losowego identyfikatora, wybrałem kodowanie base64:

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

Wybierz dowolną liczbę znaków, a wynik zwykle ma co najmniej 24 znaki.

Bazując na HTML 4 , identyfikator powinien zaczynać się od litery:

Tokeny ID i NAZWA muszą zaczynać się od litery ([A-Za-z]) i mogą po nich następować dowolne litery, cyfry ([0-9]), łączniki („-”), podkreślenia („_”) , dwukropki („:”) i kropki („.”).

Tak więc jednym z rozwiązań mogłoby być (alfanumeryczne):

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

Inne rozwiązanie - wygeneruj ciąg zawierający same litery:

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

podoba mi się ten prosty:

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

ponieważ identyfikator powinien (choć nie musi) zaczynać się od litery, użyłbym go w ten sposób:

let div_id = randstr('youtube_div_');

kilka przykładowych wartości:

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

Edytowana wersja wersji @ 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;
    }

Sugerowałbym, abyś zaczął od jakiegoś symbolu zastępczego, być może już go masz, ale jest to miejsce, w którym można dołączyć element div.

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

Teraz chodzi o to, aby dynamicznie utworzyć nowy element div z losowym identyfikatorem:

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

można to dołączyć do symbolu zastępczego w następujący sposób:

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

Możesz następnie użyć tego w swoim kodzie jwplayera:

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

Przykład na żywo: http://jsfiddle.net/pNYZp/

Uwaga: Jestem prawie pewien, że identyfikatory muszą zaczynać się od znaku alfa (tj. Bez liczb) - możesz chcieć zmienić implementację losowego ciągu, aby wymusić tę regułę. ( Ref )

Lub możesz użyć Cripto, ponieważ jest już wbudowane (z wyjątkiem IE11, przysięgam, że ci faceci nie aktualizowali się od lat!)

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

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

Znalazłem też to:

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

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

Można to zrobić na wiele sposobów, ale dla większości ludzi nie ma powodu, aby odkrywać koło na nowo :)

Pierwszy. Przypisz identyfikator do swojego div. Lubię to:

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

Następnie dodaj do <script>tagu następujący kod:

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

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

Używa znaków oprócz liter ASCII, cyfr, „_”, „-” i „.” mogą powodować problemy ze zgodnością, ponieważ nie były dozwolone w HTML 4. Chociaż to ograniczenie zostało zniesione w HTML5, identyfikator powinien zaczynać się od litery w celu zapewnienia zgodności.