Home / Questions / 49976
Accepted
Alvaro Montoro
Asked: 2020-02-17 13:39:09 +0800 CST 2020-02-17 13:39:09 +0800 CST

How to generate unique identifiers with JavaScript?

  • 772

I am working on an HTML component with JavaScript. This component is going to appear multiple times on the page (on the order of hundreds or maybe thousands), and I want each of them to have a unique identifier.

So far I am creating the unique IDs (UIDs) by generating a random number for each of the components and assigning it as an ID. Something like this:

var UID = "componente-" + Math.floor(Math.random() * 999999);
miComponente.id = UID;

But this method has major problems because it could be the case that some of the IDs could be repeated. At the very least I should add a check to make sure IDs are not repeated, but apart from that what other method is there to generate unique identifiers? Is there a native function in JavaScript that does it? (something like uniqidPHP).

javascript

9 Answers

  1. Best Answer

    There is currently a library to generate UUIDs that implements the RFC4122 standard . Its use is very simple, just add the library and use the methods v1and v4according to the version you want to generate.

    console.log('UUID v1:', uuid.v1());
console.log('UUID v4:', uuid.v4());
    <script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.7/uuid.min.js"></script>

    • 15

  2. That depends on what you mean by unique .

    Using a numeric variable, and incrementing its value each time you use it, is trivial, as is converting it to a string.

    window.UUID = 0;

miIdUnica = ( ++UUID ).toString( );

    You already have a few hundred million unique identifiers. Every time you execute ++UUID, the counter is automatically increased.

    You can reset the generator whenever you want: UUID = 0;. Or use a prefix :

    miIdUnica = 'prefijo' + ( ( ++UUID ).toString( ) );

    Or use it in a function:

    function randomId( prefix ) {
  prefix = prefix || '';
  return prefix + ( ( ++UUID ).toString( ) );
}
    • 6

  3. Here I leave you a function that I have been using for a long time and it works wonders for me to generate unique ids.

    function generateUUID() {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}

console.log(generateUUID());
console.log(generateUUID());
console.log(generateUUID());

    • 6

  4. Book snippet "JavaScript The Good Parts" (page 41)

    var serial_maker = function ( ) {

    var prefix = '';
    var seq = 0;
    return {
        set_prefix: function (p) {
            prefix = String(p);
        },
        set_seq: function (s) {
            seq = s;
        },
        gensym: function ( ) {
            var result = prefix + seq;
            seq += 1;
            return result;
        }
    };
};

var seqer = serial_maker( );
seqer.set_prefix('Q');
seqer.set_seq(1000);
var unique = seqer.gensym( ); // unique is "Q1000"
console.log('unique: '+seqer.gensym( ));
console.log('unique: '+seqer.gensym( ));

    • 5

  5. Another option is the following:

    Use the current date to build an id value which will always be unique each time it is generated .

    For this sample, I've borrowed the code from W3Schools and adapted it to better illustrate the point above:

    // Función "añadir cero".
function addZero(x, n) {
  while (x.toString().length < n) {
    x = "0" + x;
  }
  return x;
}

// Añadir control al elemento "p" principal de la página.
function addControl() {
  var d = new Date();
  var x = document.getElementById("demo");
  var h = addZero(d.getHours(), 2);
  var m = addZero(d.getMinutes(), 2);
  var s = addZero(d.getSeconds(), 2);
  var ms = addZero(d.getMilliseconds(), 3);
  x.innerHTML += "<p id='" + h + m + s + ms + "'>ID: " + h + m + s + ms + "</p>";
}
    <p>
  <i>En el div de abajo, usted encontrará elementos<br/>
HTML de tipo "p" con valores de identificación únicos:</i>
</p>
<p>
  <button onclick="addControl()">Agregar control</button>
</p>


<p id="demo"></p>

    Of course, if it's about security or another feature that unique values ​​must have, this may not be the best option depending on the developer's need .

    • 5

  6. locutus.iohas published on its website an implementation uniqid en JSequivalent to that ofuniqid de PHP

    function uniqid (prefix, moreEntropy) {
  //  discuss at: http://locutus.io/php/uniqid/
  // original by: Kevin van Zonneveld (http://kvz.io)
  //  revised by: Kankrelune (http://www.webfaktory.info/)
  //      note 1: Uses an internal counter (in locutus global) to avoid collision
  //   example 1: var $id = uniqid()
  //   example 1: var $result = $id.length === 13
  //   returns 1: true
  //   example 2: var $id = uniqid('foo')
  //   example 2: var $result = $id.length === (13 + 'foo'.length)
  //   returns 2: true
  //   example 3: var $id = uniqid('bar', true)
  //   example 3: var $result = $id.length === (23 + 'bar'.length)
  //   returns 3: true
  if (typeof prefix === 'undefined') {
    prefix = ''
  }
  var retId
  var _formatSeed = function (seed, reqWidth) {
    seed = parseInt(seed, 10).toString(16) // to hex str
    if (reqWidth < seed.length) {
      // so long we split
      return seed.slice(seed.length - reqWidth)
    }
    if (reqWidth > seed.length) {
      // so short we pad
      return Array(1 + (reqWidth - seed.length)).join('0') + seed
    }
    return seed
  }
  var $global = (typeof window !== 'undefined' ? window : global)
  $global.$locutus = $global.$locutus || {}
  var $locutus = $global.$locutus
  $locutus.php = $locutus.php || {}
  if (!$locutus.php.uniqidSeed) {
    // init seed with big random int
    $locutus.php.uniqidSeed = Math.floor(Math.random() * 0x75bcd15)
  }
  $locutus.php.uniqidSeed++
  // start with prefix, add current milliseconds hex string
  retId = prefix
  retId += _formatSeed(parseInt(new Date().getTime() / 1000, 10), 8)
  // add seed hex string
  retId += _formatSeed($locutus.php.uniqidSeed, 5)
  if (moreEntropy) {
    // for more entropy we add a float lower to 10
    retId += (Math.random() * 10).toFixed(8).toString()
  }
  return retId
}

console.log(uniqid());

    • 4

  7. Naturally, no, you can't. You would have to build a method that binds the IDs to a namespace and increments with each element.

    Instead of reinventing the wheel, you could use the _.uniqueId method of underscore which does exactly what you need.

    • 3

  8. If they should be unique only on the client side (that is, you don't need something cryptographically secure) you can put a counter to generate the id just like the uniqueIdUnderscore function that @amendadiel commented on, and you save an external library , so if we check the mentioned function, we see is quite simple (edited to remove the Underscore namespace ):

    var idCounter = 0;
function uniqueId(prefix) {
    var id = ++idCounter + '';
    return prefix ? prefix + id : id;
};
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));

    In the same way you could use a timestamp and a random number if you want something longer (although with the counter it should work for you): 

    function uniqueId(prefix) {
    var id = + new Date() + '-' + Math.floor(Math.random() * 1000);
    return prefix ? prefix + id : id;
};
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));
console.log(uniqueId('componente-'));

    • 3

  9. If you want them for the UI you can use Symbol https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol

    No libraries, no uids/string generators

    really unique

    With a fast equals

    • 0