div आईडी के लिए यादृच्छिक स्ट्रिंग उत्पन्न करते हैं


87

मैं अपनी वेबसाइट पर YouTube वीडियो प्रदर्शित करना चाहता हूं, लेकिन मुझे idउपयोगकर्ताओं द्वारा साझा किए जाने वाले प्रत्येक वीडियो के लिए एक विशिष्ट जोड़ने में सक्षम होने की आवश्यकता है । इसलिए मैंने इसे एक साथ रखा, और मैं थोड़ी समस्या में चला गया। मैं 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>

1
शायद यह मददगार होगा stackoverflow.com/questions/105034/...
— मैक्स

मैं आमतौर पर एक वैश्विक
— संस्करण बनाता हूं

ऐसा लगता है कि ओपी एक यादृच्छिक स्ट्रिंग उत्पन्न कर सकता है, लेकिन वह इसे div की आईडी में नहीं ला सकता है। जब तक मुझे पुष्टि नहीं मिल जाती, तब तक मैं कोई समाधान नहीं करूंगा।
— जमैके

@Jamiec हाँ, यह मेरी समस्या है कि मैं इसे div आईडी में नहीं पा सकता हूँ
— sarar

@ सरसर - jQuery या वेनिला जावास्क्रिप्ट?
— जमीक जूल 28'11

जवाबों:


152

मैं वास्तव में इस समारोह की तरह:

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 बनाएँ?


4
... लेकिन वास्तव में वह समस्या के बारे में नहीं पूछ रहा है :-)
— सोरेन

171
लेकिन वास्तव में मैंने इसके लिए क्या किया है: =)
— fnkr

6
चेतावनी: यह संख्या से शुरू होने वाली मार्गदर्शिका बना सकता है। कि सीधे आईडी के रूप में उपयोग नहीं कर सकते। आईडी _ या अक्षर से शुरू होनी चाहिए। :)
— चैतन्य चंदुरकर

1
@jbyrd, यह अद्वितीय आईडी की गारंटी देगा, लेकिन यह सही HTMLElement आईडी की गारंटी नहीं दे सकता है । तत्व के लिए आईडी संख्या से शुरू नहीं हो सकता है। stackoverflow.com/questions/6860853/…
— Ihor

1
यहाँ पर ठोकर खाने वाले किसी के लिए: यह वास्तविक GUID काम नहीं करता है, जो किसी अन्य उद्देश्य के लिए उपयोग किए जाने पर प्रासंगिक हो सकता है। 13 वीं और 17 वीं हेक्स अंक विशेष हैं और क्रमशः 4 और {8,9, ए, बी, सी, डी} में से एक को सेट करने की आवश्यकता है। en.wikipedia.org/wiki/Universally_unique_identifier#Format
— V13

85

2018 संपादित करें: मुझे लगता है कि इस उत्तर में कुछ दिलचस्प जानकारी है, लेकिन किसी भी व्यावहारिक अनुप्रयोग के लिए आपको जो के उत्तर का उपयोग करना चाहिए ।

जावास्क्रिप्ट में एक विशिष्ट आईडी बनाने का एक सरल तरीका दिनांक ऑब्जेक्ट का उपयोग करना है:

var uniqid = Date.now();

1 जनवरी 1970 के बाद से आपको कुल मिलीसेकंड दिया गया है, जो हर बार आपके द्वारा कॉल करने का एक अनूठा मूल्य है ।

उस मान के साथ समस्या अब यह है कि आप इसे एक तत्व की आईडी के रूप में उपयोग नहीं कर सकते हैं, क्योंकि HTML में, आईडी को एक वर्णमाला वर्ण से शुरू करने की आवश्यकता है। समस्या यह भी है कि दो उपयोगकर्ता एक ही समय में एक कार्रवाई कर रहे हैं, जिसके परिणामस्वरूप एक ही आईडी हो सकती है। हम उस की संभावना को कम कर सकते हैं, और आईडी के संख्यात्मक भाग से पहले एक यादृच्छिक पत्र को जोड़कर, हमारी वर्णमाला चरित्र समस्या को ठीक कर सकते हैं।

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

यह अभी भी एक मौका है, हालांकि पतला, हालांकि टकराने का। एक अद्वितीय आईडी के लिए आपकी सबसे अच्छी शर्त यह है कि आप एक रनिंग काउंट रखें, इसे हर बार बढ़ाएँ और एक ही स्थान पर, यानी सर्वर पर यह सब करें।


5
स्वयं द्वारा दिनांक बहुत ही यादृच्छिक नहीं हैं क्योंकि एक ही समय में एक ही ऑपरेशन करने वाले दो उपयोगकर्ता एक ही तिथि मान प्राप्त कर सकते हैं। यदि आप एक यादृच्छिक संख्या फ़ंक्शन के साथ एक तारीख को जोड़ते हैं, तो आपको कुछ अधिक अद्वितीय मिलेगा।
— 15

इसके अलावा valueOfप्रतिनिधित्व एक संख्या है, जो एक वैध html आईडी नहीं है (उन्हें एक अल्फा चरित्र के साथ शुरू करना होगा)
— यामीक

3
@ मेरा जवाब तथ्यात्मक रूप से गलत नहीं था, यह सिर्फ यहाँ के उत्तरों से सर्वश्रेष्ठ नहीं था। मैंने कुछ चीजें जोड़ीं।
— एलेक्स टरपिन

6
कोलाइड: var arr = [Date.now(), Date.now()];। आधुनिक सीपीयू पर पुन: पेश करना आसान है।
— सबसे अधिक

2
यह किसी भी प्रकार की Id-Gener की समस्या का एक बहुत ही बुरा समाधान है, विशेष रूप से वास्तविक प्रश्न के लिए (यह संकेत देते हुए कि प्रश्न पढ़ा नहीं जाता है)। यह बहुत संभावना है कि आप एक ही आईडी के साथ दो div (एक मिलीसेकंड बहुत लंबा समय) के लिए समाप्त हो जाएंगे। @ Jfriend00 से उत्तर बहुत बेहतर है (विशेष रूप से "इसे करने का एक और तरीका")। यदि आप बहुत संभावना है कि विश्व स्तर पर टकराने वाली आईडी प्राप्त करने के लिए बाहर हैं, तो यादृच्छिक अल्फ़ान्यूम्स का एक गुच्छा बहुत बेहतर होता है - या केवल GUID (UUIDs) के लिए जाते हैं जैसे 'जो' का सुझाव देता है।
— स्टॉल्सविक

74

यहाँ यादृच्छिक आईडी उत्पन्न करने के लिए पुन: प्रयोज्य कार्य है:

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

// यह किसी भी संख्या अंक से शुरू नहीं होगा, इसलिए इसे CSS3 द्वारा समर्थित किया जाएगा


यह एक रिक्त स्ट्रिंग में परिणाम कर सकता है, जो एक मान्य आईडी नहीं होगा। var lengths = {}, total = 1000000; for(var i = 0; i < total; i++){ var newLength = revisedRandId().length; lengths[newLength] = (lengths[newLength] || 0) + 1; } lengths[0] / total- ऐसा लगता है कि यह समय के 0.03% के बारे में एक अमान्य आईडी देगा, इसलिए अक्सर नहीं, लेकिन निश्चित रूप से संभव है।
— 1j01

आप पहले 2 अंक क्यों छोड़ते हैं?
— फैबियो

Math.random().toString(36)-> "0.v6doivsvnkg"। पहले दो वर्णों को छोड़ना निरर्थक है क्योंकि उन्हें प्रतिस्थापित कमांड के साथ हटा दिया जाता है: Math.random().toString(36).replace(/[^a-z]+/g, '')-> "vdoivsvnkg"।
— इवान कोवटन

30

मुझे लगता है कि यहां कुछ लोगों ने वास्तव में आपके विशेष प्रश्न पर ध्यान केंद्रित नहीं किया है। ऐसा लगता है कि आपको जो समस्या है वह पेज में रैंडम नंबर डालने और खिलाड़ी को हुक करने में है। ऐसा करने के कई तरीके हैं। सरलतम आपके मौजूदा कोड के लिए एक छोटे से बदलाव के साथ है जैसे पृष्ठ में परिणाम। मैं आम तौर पर document.write () की सिफारिश नहीं करूंगा, लेकिन चूंकि आपका कोड पहले से ही इनलाइन है और आप जो पहले से कोशिश कर रहे थे, वह डिव इनलाइन डालने की थी, ऐसा करने का यह सबसे सरल तरीका है। उस बिंदु पर जहां आपके पास रैंडम नंबर है, आप इसे पेज में डालने के लिए इसका उपयोग करते हैं:

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>

इसे करने का दूसरा तरीका

मैं अंत में यहां जोड़ सकता हूं कि एक अद्वितीय डिव आईडी बनाने के लिए वास्तव में यादृच्छिक संख्या उत्पन्न करना ओवरकिल है। आपको एक यादृच्छिक संख्या की आवश्यकता नहीं है। आपको बस एक आईडी की आवश्यकता है जो अन्यथा पृष्ठ में मौजूद नहीं होगी। 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({

यह उत्तर ठीक है, लेकिन मुझे लगता है कि उस jwplayerकोड के अंदर divनहीं होना चाहिए 'div()'।
— Jamiec

@ jfriend00 Jamiec सही है मुझे jw खिलाड़ी कोड के साथ div आईडी का मिलान करने में सक्षम होने की आवश्यकता हैjwplayer('div').setup({
— sarsar

हाँ, मुझे पता नहीं था कि jwplayer कोड क्या कर रहा है या यह कैसे काम करता है। मुझे नहीं पता था कि सवाल का हिस्सा था। वैसे भी, मैंने वेब पर देखा और अपने कोड को संशोधित किया ताकि रैंडम नंबर आईडी के साथ div अब jwplayer सेटअप में भी पास हो। FYI करें, क्योंकि CSS ID को तकनीकी रूप से एक अंक के साथ शुरू करने की अनुमति नहीं है, मैंने शुरुआत में एक पत्र भी डाला।
— j Ju0000

मैंने अपने उत्तर के अंत में इसे करने के लिए कुछ सरल तरीका जोड़ा। इस मामले में एक यादृच्छिक संख्या की वास्तव में आवश्यकता नहीं है, बस एक अद्वितीय आधार स्ट्रिंग के साथ संयुक्त रूप से बढ़ती संख्या है।
— १

यदि आपको फ़ाइलों में विशिष्टता की आवश्यकता है, तो एक यादृच्छिक आईडी वारंट किया जा सकता है।
— एलेक्लेरसन

17

मुझे एक यादृच्छिक आईडी की भी आवश्यकता थी, मैं बेस 64 एन्कोडिंग का उपयोग करके चला गया:

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

हालांकि आप चाहते हैं कि कई वर्ण चुनें, परिणाम आम तौर पर कम से कम 24 वर्ण है।


13

HTML 4 के आधार पर , आईडी को पत्र से शुरू होना चाहिए:

आईडी और 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);

7

मुझे यह सरल पसंद है:

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

चूंकि आईडी को (हालांकि नहीं होना चाहिए) एक पत्र से शुरू होता है, मैं इसे इस तरह से उपयोग करूंगा:

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

4

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

2

मेरा सुझाव है कि आप किसी प्रकार के प्लेसहोल्डर से शुरू करते हैं, आपके पास यह पहले से ही हो सकता है, लेकिन यह कहीं न कहीं डिव को जोड़ने के लिए है।

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

सिडेनोट: Im काफ़ी यकीन है कि आईडी को एक अल्फा चरित्र (यानी, कोई संख्या नहीं) के साथ शुरू करना चाहिए - आप इस नियम को लागू करने के लिए यादृच्छिक के अपने कार्यान्वयन को बदलना चाह सकते हैं। ( रेफरी )


क्या मुझे इस खिलाड़ी javascript के बारे में विशेष रूप से चिंता करनी होगीjwplayer('placeholder').setup({
— sarar

@ सरसर - मैं आपके सवाल का पालन नहीं करती! मैंने सिर्फ आपको दिखाने के लिए उस भाग को जोड़ा है कि आप rndIdjwplayer की स्थापना के साथ अपने कोड में चर का फिर से उपयोग कर सकते हैं ।
— जमीक जूल

उस jwplayer कोड के लिए मुझे इस कोड के अंदर div के लिए एक ही आईडी रखने की आवश्यकता है
— सरसर जूल

@ सरसर - ठीक यही मैंने ऊपर दिखाया। rndIdबेतरतीब ढंग से उत्पन्न कोड शामिल हैं।
— यामीक जूल 28'11

1

या आप क्रिप्टो का उपयोग कर सकते हैं क्योंकि यह पहले से ही बनाया गया है (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");

ऐसा करने के लिए बहुत सारे तरीके हैं, लेकिन ज्यादातर लोगों के लिए, पहिया को मजबूत करने का कोई कारण नहीं है :)


0

प्रथम। अपने div को एक आईडी असाइन करें। इस कदर:

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

उसके बाद, <script>कोड के बाद अपने टैग के अंदर जोड़ें :

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

6
randomString(8)कहीं भी परिभाषित नहीं है।
— ईथन

3
@ डेविड रैंडम स्ट्रींग को उस व्यक्ति द्वारा परिभाषित किया जाता है जिसने सवाल पूछा था। ऊपर मूल प्रश्न देखें।
— vsushkov

0

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

ASCII अक्षरों, अंकों, '_', '-' और '' को छोड़कर वर्णों का उपयोग करना। संगतता समस्याओं का कारण हो सकता है, क्योंकि उन्हें HTML 4 में अनुमति नहीं दी गई थी। हालांकि इस प्रतिबंध को HTML5 में हटा दिया गया है, एक आईडी को संगतता के लिए एक पत्र के साथ शुरू करना चाहिए ।


यह परिणाम लाता है जो एक संख्या, शामिल +और के साथ शुरू होता है= chars ... मैं इस स्वाद का सुझाव दे सकता है:'id'+window.crypto.getRandomValues(new Uint32Array(1))[0].toString(36)
— oriadam
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.