генерировать случайную строку для идентификатора 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/

Примечание: я почти уверен, что идентификатор должен начинаться с альфа-символа (т.е. без чисел) - вы можете изменить свою реализацию 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, для совместимости идентификатор должен начинаться с буквы.