Create random classes and ids

Asked

Viewed 506 times

1

How I create random classes and ids in HTML?

A platform here with whom I work, she, every page update, a di in Footer updates its classes and ids, in a random mode.

For example, now she’s like this:

<div id="wenro66zls" class="cwenro66zls"></div>

I updated the page, and it looked like this (OBS, same div):

  <div id="ldj38hec0v" class="cldj38hec0v"></div>

It’s like a password generation, I don’t know...

Is this done with Javascript? It’s something simple?

html random
  • 1

    This has the face of task automator, you can take as example Gulp and Grunt, are used to concatenate, minify codes and other tasks necessary for a good code

  • Would you know what the purpose of this platform is?

  • 1

    @Felipeduarte but this occurs in the build, not when updating the page.

  • @Andersoncarloswoss is their logo in the footer, the staff was display point None, ai agora da mais.

  • @Renan, really, anyway, this is a mystery to me

  • It has the face of being server-side. As for the generation, it is something very simple to do.

  • If you want to see, you can see here: http://www.pampili.com.br/ the logo at the bottom in the footer, of Bizcommerce.

  • 1

    Considering that the platform is Magento, I believe that the generation of this code is still done in PHP when generating the HTML delivered to the browser, just to, as you said, try to avoid the element is hidden through CSS and JS. Even just before the element there is a JS code that checks if the element was hidden, if I understand correctly.

  • But in this case it would be with PHP, right? How could I create these randomized classes and Ids?

Show 4 more comments

1 answer

2


If you look at the javascript that has just above this, soon you will see that your an excerpt in the code like this:

letters = "abcdefghijklmnopqrstuvwxyz",
plat_id = letters.charAt(Math.floor(Math.random() * letters.length)) + (Math.random() + 1).toString(36).substr(2, 9);

This is the code that generates the random class.

Below is the explanation of the code.

var letters = "abcdefghijklmnopqrstuvwxyz";
var plat_id = letters.charAt(Math.floor(Math.random() * letters.length)) + (Math.random() + 1).toString(36).substr(2, 9);

/* * Passo a passo * */

// === Primeira letra ===
// gera um número aleatório entre 0 e o tamanho de `letters`
var passo_1 = Math.random() * letters.length;

// arredonda para baixo
var passo_2 = Math.floor(passo_1);

// retorna a letra no índice randômico gerado acima
var passo_3 = letters.charAt(passo_2)

// => O código acima apenas escolhe uma letra aleatório da string `letters`

// === Restante da string ===
// gera um número aleatório entre 1 e 2
var passo_4 = Math.random() + 1;
// representação do número na base 36
var passo_5 = passo_4.toString(36);
// pega 9 caracteres começando do 3º
var passo_6 = passo_5.substr(2, 9);

// === Resultado ===
// Concatena a letra randômica inicial com a string gerada na 2ª parte
var passo_7 = passo_3 + passo_6;

console.log("passo_1: ", passo_1);
console.log("passo_2: ", passo_2);
console.log("passo_3 (letra inicial): ", passo_3);
console.log("passo_4: ", passo_4);
console.log("passo_5: ", passo_5);
console.log("passo_6 (restante da string): ", passo_6);
console.log("passo_7 (resultado): ", passo_7);

  • Show, Fernando! Soon I give the 50+ for you, when release!

  • I’m always curious when you have to go through other people’s code. :)

  • Not to mention that the +50 automatically goes to the answer accepted by the author...

Browser other questions tagged html random

You are not signed in. Login or sign up in order to post.