div id에 대한 임의의 문자열 생성

내 웹 사이트에 YouTube 동영상을 표시하고 싶지만 id사용자가 공유 할 각 동영상에 대해 고유 한 동영상 을 추가 할 수 있어야 합니다. 그래서 이걸 합 쳤는데 약간의 문제가 생겼습니다. div에 임의의 문자열을 추가하기 위해 JavaScript를 얻으려고 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());
}

에서 자바 스크립트에 GUID / UUID를 만드시겠습니까?

2018 편집 :이 답변에 흥미로운 정보가 있다고 생각하지만 실제 응용 프로그램 의 경우 Joe의 답변을 대신 사용해야 합니다 .

JavaScript에서 고유 ID를 만드는 간단한 방법은 Date 객체를 사용하는 것입니다.

var uniqid = Date.now();

이는 1970 년 1 월 1 일 이후 경과 된 총 밀리 초를 제공하며, 이는를 호출 할 때마다 고유 한 값입니다 .

이 값의 문제점은 HTML에서 ID가 알파벳 문자로 시작해야하기 때문에 요소의 ID로 사용할 수 없다는 것입니다. 두 사용자가 동시에 작업을 수행하면 동일한 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와 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를 만들기 위해 진정한 임의의 숫자를 생성하는 것은 과도하다고 여기에 추가 할 수 있습니다. 난수는 필요하지 않습니다. 페이지에 존재하지 않는 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]), 하이픈 ( "-"), 밑줄 ( "_")이 올 수 있습니다. , 콜론 ( ":") 및 마침표 ( ".").

따라서 솔루션 중 하나는 (영숫자)가 될 수 있습니다.

  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는 반드시 알파벳 문자 (즉, 숫자 없음)로 시작해야합니다.이 규칙을 적용하기 위해 임의 문자열 구현을 변경할 수 있습니다. ( 심판 )

또는 이미 내장되어 있기 때문에 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 호환성을 위해 는 문자로 시작 해야합니다 .