dividのランダムな文字列を生成します

自分のウェブサイトに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());
}

JavaScriptでGUID / UUIDを作成するから？

2018年の編集：この回答には興味深い情報があると思いますが、実際のアプリケーションでは、代わりにJoeの回答を使用する必要があります。

JavaScriptで一意のIDを作成する簡単な方法は、Dateオブジェクトを使用することです。

var uniqid = Date.now();

これにより、1970年1月1日から経過した合計ミリ秒が得られます。これは、を呼び出すたびに一意の値です。

この値の問題は、HTMLではIDがアルファベット文字で始まる必要があるため、要素のIDとして使用できないことです。また、2人のユーザーがまったく同時にアクションを実行すると、同じIDになる可能性があるという問題もあります。IDの数値部分の前にランダムな文字を追加することで、その可能性を減らし、アルファベット文字の問題を修正することができます。

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

これは、スリムではありますが、衝突する可能性があります。一意のIDの最善の策は、実行カウントを維持し、毎回インクリメントして、すべてを1か所（サーバー上）で実行することです。

ランダム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>

それを行う別の方法

最後に、一意のdivIDを作成するためだけに真の乱数を生成するのはやり過ぎだと付け加えるかもしれません。乱数は必要ありません。必要なのは、他の方法ではページに存在しない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({

ランダムなIDも必要でした。base64エンコーディングを使用しました。

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

必要な文字数を選択してください。通常、結果は少なくとも24文字になります。

HTML 4に基づいて、IDは文字で始まる必要があります。

IDトークンとNAMEトークンは、文字（[A-Za-z]）で始まる必要があり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ "-"）、アンダースコア（ "_"）を続けることができます。 、コロン（ "："）、およびピリオド（ "。"）。

したがって、解決策の1つは（英数字）である可能性があります。

  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>

さて、アイデアはあなたのランダムな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の実装を変更することをお勧めします。（参照）

または、すでに組み込まれている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");

これを行う方法はたくさんありますが、ほとんどの人にとって、車輪の再発明をする理由はありません:)

最初。divにIDを割り当てます。このような：

<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は互換性のために文字で始まる必要があります。