Tengo un fragmento de HTML que repito con frecuencia en una página web pero con algunas partes diferentes. Contiene algunas cosas inconvenientes para escribir repetidamente, por lo que me gustaría tener un atajo con parámetros.
Un ejemplo de cómo lo usaría es para formatear fechas. Les doy formato como (2022‑04‑06) , donde las entidades son guiones que no se separan. No quiero tener que recordar ni copiar el código de un guión continuo, así que me gustaría poder escribirlo de forma sencilla.
En LATEX, podría usar una macro como esta:
… \newcommand{\mydate}[3]{(#1\nobreakdash-#2\nobreakdash-#3)} \begin{document} \mydate{2022}{04}{06} \end{document}Sé que HTML tiene etiquetas personalizadas, pero no sé exactamente cómo se supone que deben usarse. Me imagino que la macro se usaría así:
<body> <my-date 2022 04 06> </body>Me imagino que las macros se definirían en el encabezado de la página, y una función de Javascript se ejecutaría cuando la página se carga y formatea todas las etiquetas con macros definidas.
¿Cómo se puede lograr algo así en HTML? Espero que implique una biblioteca de Javascript. Entonces, me gustaría que la biblioteca fuera liviana y rápida, y que no requiriera mucho código repetitivo.
Esto podría lograrse mediante plantillas y preprocesando la página web, pero no quiero eso; Quiero poder editar rápidamente la página, guardarla y estar activa.
Podrías usar un motor de plantillas como Handlebars . Simplemente diseñe su plantilla HTML y defina una función auxiliar personalizada.
const pad = (val, char, count) => (val + '').padStart(count, char); const parseTemplateHtml = (selector) => Handlebars.compile(document.querySelector(selector).innerHTML); Handlebars.registerHelper('formatDate', (year, month, date) => `${pad(year, '0', 4)}-${pad(month + 1, '0', 2)}-${pad(date, '0', 2)}`); const now = new Date(); const template = parseTemplateHtml('#my-date-template'); const context = { year: now.getFullYear(), month: now.getMonth(), date: now.getDate() }; document.body.innerHTML = template(context); // Rendered HTML; <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script> <script id="my-date-template" type="text/x-handlebars-template"> <div class="my-date" data-value="{{formatDate year month date}}"> {{formatDate year month date}} </div> </script>