генерувати випадковий рядок для ідентифікатора div

Я хочу відображати відео YouTube на своєму веб-сайті, але мені потрібно мати можливість додати унікальне idдля кожного відео, яке буде спільним для користувачів. Тож я зібрав це разом і зіткнувся з невеликою проблемою. Я намагаюся отримати JavaScript, щоб додати випадковий рядок для div id, але це не працює, показуючи рядок:

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

Мені дуже подобається ця функція:

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

З Створити GUID / UUID в JavaScript?

Редагування 2018 року: Я думаю, що ця відповідь містить цікаву інформацію, але для будь-яких практичних застосувань замість цього слід використовувати відповідь Джо .

Простий спосіб створити унікальний ідентифікатор у JavaScript - це використовувати об’єкт Date:

var uniqid = Date.now();

Це дає вам загальну кількість мілісекунд, що минули з 1 січня 1970 року, що є унікальним значенням кожного разу, коли ви телефонуєте до цього .

Проблема цього значення зараз полягає в тому, що ви не можете використовувати його як ідентифікатор елемента, оскільки в HTML ідентифікатори повинні починатися з алфавітного символу. Існує також проблема, що два користувачі, які виконують дію одночасно, можуть спричинити однаковий ідентифікатор. Ми могли б зменшити ймовірність цього та виправити нашу проблему з алфавітним символом, додавши випадкову літеру перед числовою частиною ідентифікатора.

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

Це все ще має шанс, хоч і невеликий, зіткнутися. Ваша найкраща ставка для унікального ідентифікатора - вести постійний підрахунок, щоразу збільшувати його та робити все це в одному місці, тобто на сервері.

Ось функція багаторазового використання для генерації випадкових ідентифікаторів:

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

// Він не починатиметься з будь-якої цифрової цифри, тому він буде підтримуватися CSS3

Я думаю, що деякі люди тут насправді не зосередилися на вашому конкретному питанні. Схоже, проблема у вас полягає у введенні випадкового числа на сторінку та підключенні гравця до нього. Для цього існує ряд способів. Найпростіший - це невелика зміна вашого існуючого коду, як цей, щоб document.write () результат на сторінці. Зазвичай я б не рекомендував document.write (), але оскільки ваш код уже вбудований, і те, що ви вже намагалися зробити, було розмістити div вбудованим, це найпростіший спосіб зробити це. У місці, де у вас є випадкове число, ви просто використовуєте це, щоб помістити його та div на сторінку:

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

а потім ви посилаєтесь на те, що в налаштованому коді jwplayer таке:

jwplayer(randomId).setup({

І весь блок коду буде виглядати так:

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

Ще один спосіб зробити це

Наприкінці я міг би додати, що генерування справді випадкового числа просто для того, щоб створити унікальний ідентифікатор div, є надмірним. Вам не потрібно випадкове число. Вам просто потрібен ідентифікатор, якого інакше не буде на сторінці. Такі фреймворки, як YUI, мають таку функцію, і все, що вони роблять, це глобальна змінна, яка збільшується при кожному виклику функції, а потім поєднує це з унікальним базовим рядком. Це може виглядати приблизно так:

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

І тоді в практичному використанні ви зробите щось подібне:

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

Мені також знадобився випадковий ідентифікатор, я використав кодування base64:

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

Виберіть скільки завгодно символів, результат зазвичай становить принаймні 24 символи.

На основі HTML 4 ідентифікатор повинен починатися з літери:

Маркери ID та NAME повинні починатися з літери ([A-Za-z]), а за ними може бути будь-яка кількість літер, цифр ([0-9]), дефісів ("-"), підкреслення ("_") , двокрапки (":") та крапки (".").

Отже, одне з рішень може бути (буквено-цифровим):

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

Інше рішення - генерувати рядок лише з літерами:

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

мені подобається цей простий:

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

оскільки id повинен (хоча і не повинен) починатися з літери, я б використовував його так:

let div_id = randstr('youtube_div_');

деякі приклади значень:

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:

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

Я б запропонував вам почати з якогось заповнювача, можливо, у вас це вже є, але він десь для додавання div.

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

Тепер ідея полягає в тому, щоб динамічно створити новий div з вашим випадковим ідентифікатором:

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

це можна додати до заповнювача наступним чином:

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

Потім ви можете використовувати це в коді jwplayer:

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

Приклад у реальному часі : http://jsfiddle.net/pNYZp/

Sidenote: Я впевнений, що ідентифікатори повинні починатися з альфа-символу (тобто без цифр) - можливо, ви захочете змінити свою реалізацію randomstring для забезпечення цього правила. ( посилання )

Або ви можете скористатися Cripto, оскільки він уже вбудований (крім IE11, клянусь, ці хлопці не оновлювались роками!)

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

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

Я також знайшов це:

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

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

Існує багато способів зробити це, але для більшості людей немає причин винаходити колесо :)

Спочатку. Призначте ідентифікатор своєму div. Подобається це:

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

Після цього додайте всередину <script>тегу такий код:

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

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

Використання символів, окрім літер ASCII, цифр, '_', '-' та '.' може спричинити проблеми сумісності, оскільки вони не були дозволені в HTML 4. Хоча це обмеження скасовано в HTML5, ідентифікатор повинен починатися з літери для сумісності.