menghasilkan string acak untuk id div

Saya ingin menampilkan video YouTube di situs web saya, tetapi saya harus dapat menambahkan keunikan iduntuk setiap video yang akan dibagikan oleh pengguna. Jadi saya gabungkan ini, dan saya mengalami sedikit masalah. Saya mencoba membuat JavaScript menambahkan string acak untuk div id, tetapi tidak berfungsi, menampilkan string:

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

Saya sangat menyukai fungsi ini:

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

Dari Buat GUID / UUID di JavaScript?

Edit 2018: Saya pikir jawaban ini memiliki beberapa info menarik, tetapi untuk aplikasi praktis apa pun Anda harus menggunakan jawaban Joe .

Cara sederhana untuk membuat ID unik di JavaScript adalah dengan menggunakan objek Date:

var uniqid = Date.now();

Itu memberi Anda total milidetik yang telah berlalu sejak 1 Januari 1970, yang merupakan nilai unik setiap kali Anda memanggilnya .

Masalah dengan nilai itu sekarang adalah Anda tidak dapat menggunakannya sebagai ID elemen, karena dalam HTML, ID harus dimulai dengan karakter alfabet. Ada juga masalah bahwa dua pengguna yang melakukan tindakan pada waktu yang sama dapat menghasilkan ID yang sama. Kita bisa mengurangi kemungkinan itu, dan memperbaiki masalah karakter alfabet kita, dengan menambahkan huruf acak sebelum bagian numerik dari ID.

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

Ini masih memiliki peluang, betapapun kecilnya, untuk bertabrakan. Taruhan terbaik Anda untuk id unik adalah dengan terus menghitung, meningkatkannya setiap saat, dan melakukan semua itu di satu tempat, yaitu di server.

Berikut adalah fungsi yang dapat digunakan kembali untuk menghasilkan ID acak:

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

// Ini tidak akan dimulai dengan digit angka apa pun sehingga akan didukung oleh CSS3

Saya pikir beberapa orang di sini belum benar-benar fokus pada pertanyaan khusus Anda. Sepertinya masalah yang Anda hadapi adalah menempatkan nomor acak di halaman dan menghubungkan pemain ke sana. Ada beberapa cara untuk melakukannya. Yang paling sederhana adalah dengan sedikit perubahan pada kode yang sudah ada seperti ini ke document.write () hasilnya ke halaman. Saya biasanya tidak merekomendasikan document.write (), tetapi karena kode Anda sudah sebaris dan apa yang sudah Anda coba lakukan adalah meletakkan div sebaris, ini adalah cara termudah untuk melakukannya. Pada titik di mana Anda memiliki nomor acak, Anda cukup menggunakan ini untuk meletakkannya dan div ke halaman:

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

dan kemudian, Anda mengacu pada kode pengaturan jwplayer seperti ini:

jwplayer(randomId).setup({

Dan seluruh blok kode akan terlihat seperti ini:

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

Cara lain untuk melakukannya

Saya dapat menambahkan di sini pada akhirnya bahwa menghasilkan nomor yang benar-benar acak hanya untuk membuat ID div yang unik adalah cara yang berlebihan. Anda tidak membutuhkan nomor acak. Anda hanya perlu ID yang tidak akan ada di halaman. Framework seperti YUI memiliki fungsi seperti itu dan yang mereka lakukan hanyalah memiliki variabel global yang bertambah setiap kali fungsi tersebut dipanggil dan kemudian menggabungkannya dengan string dasar yang unik. Ini bisa terlihat seperti ini:

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

Dan, kemudian dalam penggunaan praktis, Anda akan melakukan sesuatu seperti ini:

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

Saya juga membutuhkan id acak, saya menggunakan pengkodean base64:

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

Pilih berapa banyak karakter yang Anda inginkan, hasilnya biasanya setidaknya 24 karakter.

Berdasarkan HTML 4 , id harus dimulai dari huruf:

Token ID dan NAMA harus dimulai dengan huruf ([A-Za-z]) dan dapat diikuti dengan sejumlah huruf, angka ([0-9]), tanda hubung ("-"), setrip bawah ("_") , titik dua (":"), dan titik (".").

Jadi, salah satu solusinya bisa jadi (alfanumerik):

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

Solusi lain - buat string hanya dengan huruf:

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

Saya suka yang sederhana ini:

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

karena id harus (meskipun tidak harus) dimulai dengan huruf, saya akan menggunakannya seperti ini:

let div_id = randstr('youtube_div_');

beberapa nilai contoh:

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

Versi @ jfriend000 yang telah diedit:

    /**
     * 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;
    }

Saya menyarankan agar Anda mulai dengan semacam placeholder, Anda mungkin sudah memiliki ini, tetapi di suatu tempat untuk menambahkan div.

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

Sekarang, idenya adalah membuat div baru secara dinamis, dengan id acak Anda:

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

ini dapat diterapkan ke placeholder Anda sebagai berikut:

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

Anda kemudian dapat menggunakannya di kode jwplayer Anda:

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

Contoh langsung: http://jsfiddle.net/pNYZp/

Catatan: Saya cukup yakin id harus dimulai dengan karakter alfa (yaitu, tidak ada angka) - Anda mungkin ingin mengubah implementasi string acak untuk menegakkan aturan ini. ( ref )

Atau Anda bisa menggunakan Cripto karena sudah ada di dalamnya (kecuali di IE11, saya bersumpah orang-orang ini belum diperbarui dalam beberapa tahun!)

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

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

Saya juga menemukan ini:

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

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

Ada banyak cara untuk melakukan ini, tetapi bagi kebanyakan orang, tidak ada alasan untuk menemukan kembali roda :)

Pertama. Tetapkan id ke div Anda. Seperti ini:

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

Setelah itu, tambahkan <script>kode berikut di dalam tag Anda :

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

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

Menggunakan karakter kecuali huruf ASCII, angka, '_', '-' dan '.' dapat menyebabkan masalah kompatibilitas, karena tidak diizinkan di HTML 4. Meskipun pembatasan ini telah dicabut di HTML5, ID harus dimulai dengan huruf untuk kompatibilitas.