Generieren Sie eine zufällige Zeichenfolge für die Div-ID

Ich möchte YouTube-Videos auf meiner Website anzeigen, muss jedoch in der Lage sein, idfür jedes Video, das von Benutzern geteilt wird , ein eindeutiges Video hinzuzufügen . Also habe ich das zusammengestellt und bin auf ein kleines Problem gestoßen. Ich versuche, das JavaScript dazu zu bringen, eine zufällige Zeichenfolge für das div hinzuzufügen id, aber es funktioniert nicht und zeigt die Zeichenfolge:

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

Diese Funktion gefällt mir sehr gut:

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

Von GUID / UUID in JavaScript erstellen?

Bearbeiten 2018: Ich denke, diese Antwort enthält einige interessante Informationen, aber für alle praktischen Anwendungen sollten Sie stattdessen Joes Antwort verwenden .

Eine einfache Möglichkeit, eine eindeutige ID in JavaScript zu erstellen, besteht darin, das Date-Objekt zu verwenden:

var uniqid = Date.now();

Das gibt Ihnen die gesamten Millisekunden, die seit dem 1. Januar 1970 vergangen sind. Dies ist jedes Mal ein eindeutiger Wert, wenn Sie dies aufrufen .

Das Problem mit diesem Wert ist jetzt, dass Sie ihn nicht als ID eines Elements verwenden können, da IDs in HTML mit einem alphabetischen Zeichen beginnen müssen. Es gibt auch das Problem, dass zwei Benutzer, die genau zur gleichen Zeit eine Aktion ausführen, möglicherweise zur gleichen ID führen. Wir könnten die Wahrscheinlichkeit dafür verringern und unser Problem mit alphabetischen Zeichen beheben, indem wir einen zufälligen Buchstaben vor den numerischen Teil der ID anhängen.

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

Dies hat jedoch immer noch die Chance, wie gering es auch sein mag, zusammenzustoßen. Die beste Wahl für eine eindeutige ID besteht darin, eine laufende Zählung beizubehalten, jedes Mal zu erhöhen und all dies an einem einzigen Ort, dh auf dem Server, auszuführen.

Hier ist die wiederverwendbare Funktion zum Generieren der zufälligen IDs:

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

// Es beginnt nicht mit einer beliebigen Ziffer, daher wird es von CSS3 unterstützt

Ich denke, einige Leute hier haben sich nicht wirklich auf Ihre spezielle Frage konzentriert. Es sieht so aus, als ob das Problem darin besteht, die Zufallszahl auf die Seite zu setzen und den Player daran anzuschließen. Dafür gibt es verschiedene Möglichkeiten. Am einfachsten ist es, wenn Sie Ihren vorhandenen Code wie folgt ändern, um das Ergebnis auf der Seite zu dokumentieren. Normalerweise würde ich document.write () nicht empfehlen, aber da Ihr Code bereits inline ist und Sie bereits versucht haben, das div inline zu setzen, ist dies der einfachste Weg, dies zu tun. An dem Punkt, an dem Sie die Zufallszahl haben, verwenden Sie diese einfach, um sie und das Div in die Seite einzufügen:

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

und dann verweisen Sie darauf im jwplayer-Setup-Code wie folgt:

jwplayer(randomId).setup({

Und der ganze Codeblock würde so aussehen:

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

Ein anderer Weg, es zu tun

Ich könnte hier am Ende hinzufügen, dass das Generieren einer wirklich zufälligen Zahl, nur um eine eindeutige Div-ID zu erstellen, viel zu viel des Guten ist. Sie brauchen keine Zufallszahl. Sie benötigen lediglich eine ID, die sonst auf der Seite nicht vorhanden ist. Frameworks wie YUI haben eine solche Funktion und alles, was sie tun, ist eine globale Variable, die bei jedem Aufruf der Funktion inkrementiert wird und diese dann mit einer eindeutigen Basiszeichenfolge kombiniert. Es kann ungefähr so ​​aussehen:

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

Und dann würden Sie im praktischen Gebrauch so etwas tun:

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

Ich brauchte auch eine zufällige ID, ich habe Base64-Codierung verwendet:

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

Wählen Sie so viele Zeichen aus, wie Sie möchten. Das Ergebnis sind normalerweise mindestens 24 Zeichen.

Basierend auf HTML 4 sollte die ID mit dem Buchstaben beginnen:

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

Eine der Lösungen könnte also sein (alphanumerisch):

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

Eine andere Lösung - Zeichenfolge nur mit Buchstaben generieren:

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

Ich mag dieses einfache:

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

Da id mit einem Buchstaben beginnen sollte (aber nicht muss), würde ich ihn folgendermaßen verwenden:

let div_id = randstr('youtube_div_');

Einige Beispielwerte:

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

Eine bearbeitete Version der @ jfriend000-Version:

    /**
     * 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;
    }

Ich würde vorschlagen, dass Sie mit einer Art Platzhalter beginnen, den Sie vielleicht schon haben, aber es ist irgendwo, um die Div anzuhängen.

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

Die Idee ist nun, dynamisch ein neues Div mit Ihrer zufälligen ID zu erstellen:

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

Dies kann wie folgt an Ihren Platzhalter angehängt werden:

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

Sie können das dann in Ihrem JWplayer-Code verwenden:

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

Live-Beispiel: http://jsfiddle.net/pNYZp/

Nebenbemerkung: Ich bin mir ziemlich sicher, dass IDs mit einem Alpha-Zeichen beginnen müssen (dh ohne Zahlen). Möglicherweise möchten Sie Ihre Implementierung von Randomstring ändern, um diese Regel durchzusetzen. ( ref )

Oder Sie könnten Cripto verwenden, da es bereits eingebaut ist (außer in IE11, ich schwöre, diese Jungs wurden seit Jahren nicht mehr aktualisiert!)

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

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

Ich habe auch folgendes gefunden:

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

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

Es gibt viele Möglichkeiten, dies zu tun, aber für die meisten Menschen gibt es keinen Grund, das Rad neu zu erfinden :)

Zuerst. Weisen Sie Ihrem Div eine ID zu. So was:

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

Fügen Sie danach den <script>folgenden Code in Ihr Tag ein:

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

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

Verwenden von Zeichen außer ASCII-Buchstaben, Ziffern, '_', '-' und '.' kann es zu Kompatibilitätsproblemen führen, da sie nicht in HTML 4. durften Obwohl diese Einschränkung in HTML5 aufgehoben wurde, eine ID sollte mit einem Buchstaben für die Kompatibilität starten.