Javascript regex per rimuovere caratteri non consentiti dall'ID DOM

Question

Ho un numero di elementi DOM creati dinamicamente su una pagina web. I loro ID sono generati da un elenco esterno e talvolta questi nomi possono contenere caratteri non validi per un ID come "@" o "&".

Devo rimuovere chracters che non corrispondono le seguenti regole:

• La stringa deve iniziare con una lettera
• Il primo carattere può essere seguita da un numero qualsiasi di lettere, cifre ([0- 9]), trattini ("-"), di sottolineatura ("_"), due punti (":") e punti()

Quindi, se la stringa originale è:

""

99% delle persone non sono l'1%

Poi la stringa risultante con caratteri non validi rimossi sarebbe:

ofPeoplearenotthe1

Qualcuno mi può aiutare a scrivere l'espressione regolare in Javascript che rimuoverà i caratteri da una stringa che non rispetta i requisiti di cui sopra?

Answer 1

var str = "99% of People are not the 1%"; 
str = str.replace(/^[^a-z]+|[^\w:.-]+/gi, ""); 

Answer 2

var id = "99% of People are not the 1%"; 
id = id.replace(/[^a-z0-9\-_:\.]|^[^a-z]+/gi, ""); 

Dimostrazione: http://jsfiddle.net/jfriend00/qqjh6/

L'idea è quella di sostituire uno o più caratteri non alfa all'inizio e quindi sostituire tutti gli altri caratteri illegali nella parte restante della stringa.

Si potrebbe chiedere a che cosa serve persino avere un ID non noto in anticipo e generato dinamicamente in base al contenuto. Non si può usare molto bene nei CSS se si basa su alcuni contenuti che possono cambiare.

Answer 3

Se qualcuno ha bisogno di questo in Java:

if(! htmlId.matches("^[A-Za-z0-9]+[\\w\\-\\:\\.]*$")){ 
     LOG.warn("html id "+htmlId+" is not valid, have to remove all invalid chars"); 

     htmlId = htmlId.replaceAll("[^^A-Za-z0-9\\w\\-\\:\\.]+", ""); 
    } 

Nel mio caso ho controllato la corda e sostituito tutti non valido con vuoto. Grazie a Qtax.

Answer 4

La specifica HTML5 è stato aggiornato e secondo https://html.spec.whatwg.org/multipage/dom.html#global-attributesid attributi possono ora contenere letteralmente qualsiasi carattere per il loro valore tranne spazi bianchi.

Quando specificato negli elementi HTML, il valore di attributo ID deve essere univoco tra tutti gli ID di albero dell'elemento e deve contenere almeno un carattere. Il valore non deve contenere spazi bianchi ASCII.

non sono sicuro al quale elementi punto potrebbero essere assegnati due id attributi né quale ragionamento obiettivo logico per esso (forse la comprensione meno maturato al momento), tuttavia, che è stato bocciato dalla norma, tuttavia, che è stato conoscenza comune nella comunità di sviluppo web ormai da anni.

Answer 5

Se si desidera qualcosa che resista ai conflitti, provare a utilizzare btoa per convertire in base64;

var badId1 = "99% of the 1%"; 
var badId2 = "999% of the 1%"; 
var validId1 = "ID_OTklIG9mIHRoZSAxJQ"; 
var validId2 = "ID_OTk5JSBvZiB0aGUgMS"; 

var makeId = function(text) { return "ID_" + btoa(text).slice(0,-2); }; 

expect(makeId(badId1)).toEqual(validId1); 
expect(makeId(badId2)).toEqual(validId2); 

Nota come i due ID generano chiavi diverse, in cui il regex trim non lo farebbe.

Answer 6

come John mentioned il HTML5 spec allows all characters for IDs except whitespaces.

Ciò significa che la seguente espressione regolare (in JavaScript) sarebbe sufficiente a seguire le specifiche HTML5:

let str = "99% of People are not the 1%"; 
str = str.replace(/\s+/g, ""); 
// "99%ofPeoplearenotthe1%"