He pasado un par de horas buscando una solución a esto, pero ninguna alegría. Asi que...
Me gustaría generar ID basados en la entrada. Por ejemplo, en todo un sitio web;
<p class ="dynamic">I like cheese</p> The outcome would be... <p id ="i_like_cheese" class ="dynamic">I like cheese</p>básicamente, cualquiera que sea el texto, la identificación reflejará eso. ¡Cualquier consejo sobre por dónde empezar sería muy apreciado!
Use querySelectorAll para obtener todos los elementos con clase dynamic , luego haga un bucle en cada p y establezca la id de innerText en el que previamente reemplaza los espacios por '_' con replaceAll
let ps = document.querySelectorAll('.dynamic'); ps.forEach(p=>{ p.id = p.innerText.replaceAll(' ','_'); console.log(p.id) }) <p class ="dynamic">I like cheese</p> <p class ="dynamic">I dont like cheese</p>Gracias por todas las sugerencias y comentarios. La solución que implementé fue de BZezzz.
let ps = document.querySelectorAll('.dynamic'); ps.forEach(p=>{ p.id = p.innerText.replaceAll(' ','_'); console.log(p.id) })Algunas personas sugirieron que el caso de uso para esto era una mala idea, así que quería dar más detalles sobre lo que he usado junto con esto.
Un complemento de WordPress llamado "Tabla de contenido" crea un TOC con puntos de anclaje a href="/#i-like-cheese"
Quería apuntar a elementos específicos en la página que luego llenarían los puntos de anclaje de TOC ya que el complemento no tenía toda la funcionalidad que necesitaba.
Use querySelectorAll para filtrar su elemento DOM por nombre de clase,
var lst = document.querySelectorAll('.dynamic')Recorre todos los elementos de la lista devuelta y establece la identificación con respecto a los caracteres válidos en el texto interno del elemento HTML. En este nivel, sin embargo, debe tener en cuenta la versión de HTML (4 o 5), porque las convenciones de nomenclatura difieren entre las versiones 4 y 5.
Versión 4: ( https://www.w3.org/TR/html4/types.html#type-id ) Los tokens de ID y NOMBRE deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_"), dos puntos (":") y puntos (".").
Versión 5: ( https://www.w3.org/TR/html5-author/global-attributes.html#the-id-attribute ) El valor de identificación no debe contener caracteres de espacio.
Para estar seguro, supondré que su sitio web utiliza HTML4 y procederé en consecuencia.
//use regex to validate input with respect to HTML4 specifications function isIdValid(id) { let re = new RegExp(/^[A-Za-z]+[\w\-\:\.]*$/); return re.test(id); } var counterID = 1; function generateuuid() { return "id_" + counterID.toString(); counterID+=1; } var lst = document.querySelectorAll('.dynamic'); lst.forEach(htmlelem => { if (isIdValid(htmlelem.innerText.replaceAll(' ', '_'))) { htmlelem.id = htmlelem.innerText.replaceAll(' ', '_'); } else { htmlelem.id = generateuuid(); //another approach would be to remove invalid characters from the inner //text, and assign the value to htmlelem.id but this has a performance //drawback, because it would require looping over each character. } })