Question

我想在我的网站上显示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>

Answer 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());
}

来自Create GUID / UUID in JavaScript?

Answer 2

2018编辑：我认为这个答案有一些有趣的信息，但对于任何实际应用，你应该使用Joe's answer instead。

在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，最好的选择是保持运行计数，每次都增加它，并在一个地方完成所有操作，即在服务器上。

Answer 3

以下是生成随机ID的可重用函数：

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

//它不会以任何数字开头，因此CSS3将支持

Answer 4

我认为这里的一些人并没有真正关注你的特定问题。看起来你遇到的问题是将随机数放在页面中并将播放器挂到它上面。有很多方法可以做到这一点。最简单的是对现有代码进行少量更改，将document.write（）结果放入页面。我通常不推荐使用document.write（），但由于你的代码已经是内联的，你所尝试的就是将div放入内联，这是最简单的方法。在您有随机数的位置，您只需使用它将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({

Answer 5

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

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

选择你想要的多个字符，结果通常至少为24个字符。

Answer 6

根据HTML 4，ID应从letter：

开始

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

Answer 7

我喜欢这个简单的例子：

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

Answer 8

@ 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;
    }

Answer 9

我建议你从某种占位符开始，你可能已经有了这个，但它可以附加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的实现来强制执行此规则。（ref）

Answer 10

或者您可以使用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");

有很多方法可以做到这一点，但是对于大多数人来说，没有理由重新发明轮子：）

Answer 11

首先。为您的div分配一个ID。像这样：

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

之后，在代码中添加<script>标记：

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

Answer 12

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

使用除ASCII字母，数字，“ _”，“-”和“。”以外的字符。可能会导致兼容性问题，这是HTML 4中不允许的。尽管在HTML5中取消了此限制，但ID 应该以字母开头以表示兼容性。

Answer 13

我可以分享一个生成随机 ID 的直观方法吗？

const getRandomID = (length: number) => {
    let text = '';
    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (let i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
}

为div id生成随机字符串

13 个答案:

另一种方法