สร้างสตริงสุ่มสำหรับรหัส 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());
}

จากCreate GUID / UUID ใน JavaScript?

2018 แก้ไข: ผมคิดว่าคำตอบนี้มีข้อมูลที่น่าสนใจบางอย่าง แต่สำหรับการใช้งานในทางปฏิบัติใด ๆ ที่คุณควรจะใช้คำตอบของโจแทน

วิธีง่ายๆในการสร้าง ID เฉพาะใน JavaScript คือการใช้วัตถุ Date:

var uniqid = Date.now();

นั่นทำให้คุณมีจำนวนมิลลิวินาทีที่ผ่านไปนับตั้งแต่วันที่ 1 มกราคม 1970 ซึ่งเป็นค่าที่ไม่ซ้ำกันทุกครั้งที่คุณเรียกสิ่งนั้น

ปัญหาของค่านั้นในตอนนี้คือคุณไม่สามารถใช้เป็น ID ขององค์ประกอบได้เนื่องจากใน HTML 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 ที่จะไม่มีอยู่ในเพจ เฟรมเวิร์กเช่น 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/

Sidenote: ฉันค่อนข้างแน่ใจว่า id ต้องขึ้นต้นด้วยอักขระอัลฟา (เช่นไม่มีตัวเลข) - คุณอาจต้องการเปลี่ยนการใช้ 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");

มีหลายวิธีในการทำเช่นนี้ แต่สำหรับคนส่วนใหญ่ไม่มีเหตุผลที่จะสร้างวงล้อใหม่ :)

อันดับแรก กำหนด id ให้กับ 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 แต่ ID ควรขึ้นต้นด้วยตัวอักษรเพื่อความเข้ากันได้