tạo chuỗi ngẫu nhiên cho id div

Tôi muốn hiển thị video YouTube trên trang web của mình, nhưng tôi cần có thể thêm một idvideo duy nhất cho mỗi video mà người dùng sẽ chia sẻ. Vì vậy, tôi kết hợp điều này lại với nhau, và tôi đã gặp phải một vấn đề nhỏ. Tôi đang cố gắng lấy JavaScript để thêm một chuỗi ngẫu nhiên cho div id, nhưng nó không hoạt động, hiển thị chuỗi:

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

Tôi thực sự thích chức năng này:

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

Từ Tạo GUID / UUID trong JavaScript?

2018 chỉnh sửa: Tôi nghĩ câu trả lời này có một số thông tin thú vị, nhưng đối với bất kỳ ứng dụng thực tế nào, bạn nên sử dụng câu trả lời của Joe để thay thế .

Một cách đơn giản để tạo một ID duy nhất trong JavaScript là sử dụng đối tượng Ngày:

var uniqid = Date.now();

Điều đó cung cấp cho bạn tổng số mili giây đã trôi qua kể từ ngày 1 tháng 1 năm 1970, là một giá trị duy nhất mỗi khi bạn gọi như vậy .

Vấn đề với giá trị đó bây giờ là bạn không thể sử dụng nó làm ID của phần tử, vì trong HTML, ID cần bắt đầu bằng một ký tự chữ cái. Cũng có một vấn đề là hai người dùng thực hiện một hành động cùng một lúc có thể dẫn đến cùng một ID. Chúng tôi có thể làm giảm xác suất của điều đó và khắc phục sự cố ký tự chữ cái của chúng tôi, bằng cách thêm một chữ cái ngẫu nhiên vào trước phần số của ID.

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

Mặc dù vậy , điều này vẫn có cơ hội va chạm, dù mong manh . Đặt cược tốt nhất của bạn cho một id duy nhất là giữ một số lượng đang chạy, tăng nó lên mọi lúc và thực hiện tất cả những điều đó ở một nơi duy nhất, tức là trên máy chủ.

Đây là chức năng có thể sử dụng lại để tạo ID ngẫu nhiên:

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

// Nó sẽ không bắt đầu bằng bất kỳ chữ số nào nên sẽ được CSS3 hỗ trợ

Tôi nghĩ rằng một số người ở đây đã không thực sự tập trung vào câu hỏi cụ thể của bạn. Có vẻ như vấn đề bạn gặp phải là đưa số ngẫu nhiên vào trang và kết nối người chơi với nó. Có một số cách để làm điều đó. Đơn giản nhất là với một thay đổi nhỏ đối với mã hiện tại của bạn như thế này thành document.write () kết quả vào trang. Thông thường, tôi sẽ không giới thiệu document.write (), nhưng vì mã của bạn đã có sẵn và những gì bạn đang cố gắng làm là đặt div vào nội tuyến, đây là cách đơn giản nhất để làm điều đó. Tại thời điểm bạn có số ngẫu nhiên, bạn chỉ cần sử dụng điều này để đặt nó và div vào trang:

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

và sau đó, bạn tham khảo điều đó trong mã thiết lập jwplayer như sau:

jwplayer(randomId).setup({

Và toàn bộ khối mã sẽ trông như thế này:

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

Một cách khác để làm điều đó

Tôi có thể thêm vào đây ở phần cuối rằng việc tạo một số thực sự ngẫu nhiên chỉ để tạo một ID div duy nhất là quá mức cần thiết. Bạn không cần một số ngẫu nhiên. Bạn chỉ cần một ID sẽ không tồn tại trong trang. Các khung công tác như YUI có một chức năng như vậy và tất cả những gì chúng làm là có một biến toàn cục được tăng lên mỗi khi hàm được gọi và sau đó kết hợp nó với một chuỗi cơ sở duy nhất. Nó có thể trông giống như sau:

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

Và, khi sử dụng thực tế, bạn sẽ làm như sau:

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

Tôi cũng cần một id ngẫu nhiên, tôi đã sử dụng mã hóa base64:

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

Chọn bao nhiêu ký tự bạn muốn, kết quả thường có ít nhất 24 ký tự.

Dựa trên HTML 4 , id phải bắt đầu từ ký tự:

Mã thông báo ID và NAME phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

Vì vậy, một trong những giải pháp có thể là (chữ và số):

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

Một giải pháp khác - tạo chuỗi chỉ với các chữ cái:

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

tôi thích cái đơn giản này:

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

vì id phải (mặc dù không phải) bắt đầu bằng một chữ cái, tôi sẽ sử dụng nó như thế này:

let div_id = randstr('youtube_div_');

một số giá trị ví dụ:

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

Một phiên bản đã chỉnh sửa của phiên bản @ 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;
    }

Tôi khuyên bạn nên bắt đầu với một số loại trình giữ chỗ, bạn có thể đã có cái này rồi, nhưng nó ở đâu đó để nối div.

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

Bây giờ, ý tưởng là tạo động một div mới, với id ngẫu nhiên của bạn:

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

điều này có thể được bổ sung cho trình giữ chỗ của bạn như sau:

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

Sau đó, bạn có thể sử dụng nó trong mã jwplayer của mình:

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

Ví dụ trực tiếp: http://jsfiddle.net/pNYZp/

Ghi chú bên lề: Tôi khá chắc chắn rằng id phải bắt đầu bằng ký tự alpha (tức là không có số) - bạn có thể muốn thay đổi cách triển khai chuỗi ngẫu nhiên để thực thi quy tắc này. ( Ref )

Hoặc bạn có thể sử dụng Cripto vì nó đã được tích hợp sẵn (ngoại trừ IE11, tôi thề rằng những kẻ này không thể cập nhật trong nhiều năm!)

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

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

Tôi cũng tìm thấy điều này:

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

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

Có rất nhiều cách để làm điều này, nhưng đối với hầu hết mọi người, không có lý do gì để phát minh lại bánh xe :)

Đầu tiên. Gán một id cho div của bạn. Như thế này:

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

Sau đó, thêm vào bên trong <script>thẻ của bạn mã sau:

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

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

Sử dụng các ký tự ngoại trừ các chữ cái ASCII, chữ số, '_', '-' và '.' có thể gây ra sự cố tương thích, vì chúng không được phép trong HTML 4. Mặc dù hạn chế này đã được dỡ bỏ trong HTML5, nhưng ID phải bắt đầu bằng một chữ cái để tương thích.