Подтвердить что ты не робот

Генерировать случайную строку для div id

Я хочу показывать видеоролики 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>
4b9b3361

Ответ 1

Мне очень нравится эта функция:

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?

Ответ 2

Редактирование 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();

У этого все еще есть шанс, хотя тонкий, столкновения все же. Лучший выбор для уникального идентификатора - вести счетчик, увеличивать его каждый раз и делать все это в одном месте, то есть на сервере.

Ответ 3

Вот функция многократного использования для генерации случайных идентификаторов:

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

//Он не будет начинаться с любой цифры, поэтому будет поддерживаться CSS3

Ответ 4

Я думаю, что некоторые люди здесь не особо сосредоточены на вашем конкретном вопросе. Похоже, проблема в том, что вы помещаете случайное число на страницу и подключаете к нему плеер. Есть несколько способов сделать это. Самое простое - с небольшим изменением существующего кода, например, для 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({

Ответ 5

На основе 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);

Ответ 6

Мне также нужен случайный идентификатор, я пошел с использованием кодировки base64:

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

Выберите любое количество символов, которое вы хотите, результат обычно составляет не менее 24 символов.

Ответ 7

Отредактированная версия @jfriend000 version:

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

Ответ 8

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

Ответ 9

Во-первых. Назначьте id вашему div. Вот так:

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

После этого добавьте в свой тег <script> следующий код:

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