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

我真的很喜欢这个功能：

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

从在JavaScript创建GUID / UUID？

2018编辑：我认为这个答案有一些有趣的信息，但是对于任何实际应用，您应该改用Joe的答案。

在JavaScript中创建唯一ID的简单方法是使用Date对象：

var uniqid = Date.now();

这样可以得出自1970年1月1日以来经过的总毫秒数，这是每次调用该值时唯一的值。

现在，该值的问题在于您不能将其用作元素的ID，因为在HTML中，ID必须以字母字符开头。还有一个问题是，两个用户在完全相同的时间执行操作可能会导致获得相同的ID。我们可以通过在ID的数字部分之前添加随机字母来降低这种可能性，并解决字母字符问题。

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

尽管仍然很小，但仍有碰撞的机会。唯一ID的最佳选择是保持运行计数，每次增加计数，并在单个位置（即在服务器上）进行所有操作。

这是用于生成随机ID的可重用函数：

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 ID生成一个真正的随机数是一种过大的方法。您不需要随机数。您只需要页面中不存在的ID。像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({

我还需要一个随机id，我使用了base64编码：

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

选择任意多个字符，结果通常至少为24个字符。

基于HTML 4，id应该以字母开头：

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>

现在，想法是使用您的随机ID动态创建一个新的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/

旁注：我非常确定ID必须以字母字符（即无数字）开头-您可能需要更改您的randomstring实现以实施此规则。（参考）

或者您也可以使用Cripto，因为它已经内置了（除了IE11，我发誓这些家伙多年来没有更新！）

https://developer.mozilla.org/zh-CN/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分配一个ID。像这样：

<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中取消了此限制，但是ID应当以字母开头以确保兼容性。