div kimliği için rastgele dizge oluştur

Web sitemde YouTube videoları göstermek istiyorum, ancak idkullanıcılar tarafından paylaşılacak her video için bir benzersiz video ekleyebilmem gerekiyor. Bu yüzden bunu bir araya getirdim ve küçük bir sorunla karşılaştım. JavaScript'in div için rastgele bir dize eklemesini sağlamaya çalışıyorum id, ancak çalışmıyor ve dizeyi gösteriyor:

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

Bu işlevi gerçekten seviyorum:

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

Gönderen JavaScript GUID / UUID oluşturma?

2018 düzenlemesi: Bu cevabın bazı ilginç bilgileri olduğunu düşünüyorum, ancak herhangi bir pratik uygulama için bunun yerine Joe'nun cevabını kullanmalısınız .

JavaScript'te benzersiz bir kimlik oluşturmanın basit bir yolu, Date nesnesini kullanmaktır:

var uniqid = Date.now();

Bu size 1 Ocak 1970'ten bu yana geçen toplam milisaniyeyi verir, bu her çağırdığınızda benzersiz bir değerdir .

Bu değerle ilgili sorun, HTML'de kimliklerin alfabetik bir karakterle başlaması gerektiğinden, onu bir öğenin kimliği olarak kullanamamanızdır. Aynı anda bir eylemi gerçekleştiren iki kullanıcının aynı ID ile sonuçlanabileceği sorunu da vardır. ID'nin sayısal kısmının önüne rastgele bir harf ekleyerek bunun olasılığını azaltabilir ve alfabetik karakter sorunumuzu çözebiliriz.

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

Bunun yine de zayıf olsa da çarpışma şansı var . Benzersiz bir kimlik için en iyi bahsiniz, bir sayıyı tutmak, her seferinde artırmak ve hepsini tek bir yerde, yani sunucuda yapmaktır.

Rastgele kimlikleri oluşturmak için yeniden kullanılabilir işlev:

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

// Herhangi bir rakamla başlamayacağı için CSS3 tarafından desteklenecektir

Sanırım buradaki bazı insanlar sizin özel sorunuza gerçekten odaklanmadı. Görünüşe göre sorun, sayfaya rastgele sayıyı koymak ve oynatıcıyı ona bağlamak. Bunu yapmanın birkaç yolu var. En basit olanı, sonucu sayfaya document.write () yapmak gibi mevcut kodunuzda küçük bir değişiklik yapmaktır. Normalde document.write () 'ı önermem, ancak kodunuz zaten satır içi olduğundan ve zaten yapmaya çalıştığınız şey div'i satır içine koymak olduğu için, bunu yapmanın en basit yolu budur. Rastgele sayının olduğu noktada, bunu ve div'i sayfaya koymak için sadece bunu kullanın:

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

ve sonra, jwplayer kurulum kodunda buna şu şekilde başvurursunuz:

jwplayer(randomId).setup({

Ve tüm kod bloğu şöyle görünecektir:

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

Bunu yapmanın başka bir yolu

Buraya, yalnızca benzersiz bir div kimliği oluşturmak için gerçekten rastgele bir sayı üretmenin çok fazla olduğunu ekleyebilirim. Rastgele bir sayıya ihtiyacınız yok. Sayfada başka türlü bulunmayacak bir kimliğe ihtiyacınız var. YUI gibi çerçeveler böyle bir işleve sahiptir ve tek yaptıkları, işlev her çağrıldığında artan global bir değişkene sahip olmak ve ardından bunu benzersiz bir temel dizeyle birleştirmektir. Şunun gibi görünebilir:

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

Ve sonra pratik kullanımda şöyle bir şey yaparsınız:

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

Ayrıca rastgele bir kimliğe ihtiyacım vardı, base64 kodlamasını kullanmaya başladım:

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

İstediğiniz kadar karakter seçin, sonuç genellikle en az 24 karakterdir.

Dayanarak HTML 4 , id mektuptan başlamalıdır:

Kimlik ve İSİM simgeleri bir harfle ([A-Za-z]) başlamalı ve ardından herhangi bir sayıda harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") gelebilir , iki nokta üst üste (":") ve noktalar (".").

Dolayısıyla, çözümlerden biri (alfanümerik) olabilir:

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

Başka bir çözüm - yalnızca harflerden oluşan dizeler oluşturun:

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

bu basit olanı beğendim:

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

id (zorunlu olmamasına rağmen) bir harfle başlamalı olduğundan, bunu şöyle kullanırdım:

let div_id = randstr('youtube_div_');

bazı örnek değerler:

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

@ Jfriend000 sürümünün düzenlenmiş bir sürümü:

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

Bir tür yer tutucu ile başlamanızı öneririm, buna zaten sahip olabilirsiniz, ancak div'i ekleyebileceğiniz bir yer.

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

Şimdi amaç, rastgele kimliğinizle dinamik olarak yeni bir div oluşturmaktır:

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

bu, yer tutucunuza şu şekilde eklenebilir:

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

Daha sonra bunu jwplayer kodunuzda kullanabilirsiniz:

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

Canlı örnek: http://jsfiddle.net/pNYZp/

Ek not: Kimliklerin bir alfa karakterle başlaması gerektiğinden eminim (yani sayı içermiyor) - bu kuralı uygulamak için randomstring uygulamanızı değiştirmek isteyebilirsiniz. ( ref )

Ya da zaten yerleşik olduğu için Cripto'yu kullanabilirsiniz (IE11 hariç, yemin ederim bu adamlar yıllardır güncelleme yapmadılar!)

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

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

Bunu da buldum:

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

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

Bunu yapmanın birçok yolu var, ancak çoğu insan için tekerleği yeniden icat etmenin bir nedeni yok :)

İlk. Div'inize bir kimlik atayın. Bunun gibi:

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

Bundan sonra, <script>aşağıdaki kodu etiketinizin içine ekleyin :

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

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

ASCII harfleri, rakamları, '_', '-' ve '.' Dışındaki karakterlerin kullanılması. Bu kısıtlama HTML5'teki kalkmış olsa da HTML 4'te izin verildi olarak, uyumluluk sorunlarına neden olabilir, bir kimlik olmalıdır uyumluluk için bir harfle başlamalıdır.