[HTML][javascript] ¿Cómo crear "variables" para usarlas luego en el html?

[.:Xx4NG3LxX:.]

Saludos!

Ya llevo un tiempo con el desarrollo web, y me estoy metiendo de a poco en javascript.

Mi pregunta recae, en que yo quiero hacer variables (o algo así), me explico;

Por ejemplo: Quiero que al tener en el body de la página:

Código (html4strict) [Seleccionar] Expandir

...

<p>{SALUDO}, bienvenido</p>

..

Reemplaze {SALUDO} por "Hola usuario" (por ejemplo)...

En resumen, crear variables para usarlas luego en la página HTML

Creo que me explique terrible, pero es lo que se me vino a la mente... Gracias de antemano...!

[Agente Naranja]

Que yo sepa, no puedes hacerlo de la forma que quieres. Lo que podrías hacer es crear un código javascript que te recupere todas las cadenas que estén dentro de llaves y luego reemplazarlas. Lo que yo haría por ejemplo sería dar a los elementos una clase especial, como class="procesar_plantilla", luego recuperas todos los elementos con esta clase, document.querySelectorAll('.procesar_plantilla'), y buscas dentro del HTML para reemplazar las cadenas que comiencen con { y terminen con }.

Esa sería mi forma de solucionar este problema, pero quizás alguien tiene otra sugerencia.

[.:Xx4NG3LxX:.]

Muchísimas gracias por la pronta respuesta!

¿Cómo se haría el proceso de búsqueda para reemplazar las palabras que empiezan y terminen en llaves?

[@XSStringManolo]

Muchísimas gracias por la pronta respuesta!

¿Cómo se haría el proceso de búsqueda para reemplazar las palabras que empiezan y terminen en llaves?

Se conoce como mustache sintax. No es trivial la implementación. Usa un lib ya creada. http://archan937.github.io/templayed.js/

Hay otro tipo de templates que te pueden servir.

[.:Xx4NG3LxX:.]

Eso está bien pero no hay algo más sencillo y manual... Lo quiero más que todo de aprendizaje... Para analizar el código y entenderlo..

(Igual me lo guardo, esta interesante, gracias)

[[u]nsigned]

Cuando empiezas a tener este tipo de inquietudes lo mejor es pasarse a un framework js de una vez, te recomiendo empezar con Vue que es progresivo y podes ir adoptando de a poco. No solo te permite usar variables, sino que además es reactivo.

[EdePC]

Saludos,

- El uso de una librería o framework es directamente proporcional a la complejidad del proyecto. Si tu proyecto es muy pequeño y sencillo puedes valerte con lo convencional, por ejemplo se puede utilizar código javascript en medio del código html de la siguiente manera:

Código (javascript) [Seleccionar] Expandir

<script>
  var saludo = "Hola usuario";
</script>

<p><script>document.write(saludo)</script>, bienvenido</p>

-- Da como resultado:

Código [Seleccionar] Expandir

Hola usuario, bienvenido

- Las otras formas como la de Buscar y Reemplazar, usar una librería o framework ya lo comentaron mensajes arriba.

[vicram10]

Claro, asi como comentaron, depende exclusivamente de lo que uno quiere hacer (complejidad del proyecto), en este caso lo mencionado por EdePC sería lo mas rapido, tambien se puede analizar frameworks tipo Twig que te permite hacer algo parecido.

[.:Xx4NG3LxX:.]

Muchas gracias a todos y disculpen la inactividad...

Ahora mismo es un proyecto pequeño, es más, ni es un proyecto es una serie de pruebas para aprender... Me han sacado de una duda, muchas gracias!

Cualquier otro comentario es bien recibido...!!!

[EdePC]

Como ya recomendaron arriba, si quieres ir familiarizándote con un framework muy bien se puede empezar por VUE.JS porque en un principio se puede utilizar como una Librería de un solo archivo, luego para proyectos mucho más complejos se puede utilizar con Vue CLI para administrarlos.

Puedes ver este excelente video que justamente presenta a un curso de Vue, pero de hecho ya con lo que muestra puedes resolver tu problema, esta presentación muestra como usar Vue como librería:

[youtube=640,360]https://youtu.be/AqesL138vMA[/youtube]

- El curso es de pago y es el actual 2020, además está más enfocado a Vue CLI, sin embargo yo tomé el curso del 2018 por Jhon Mircha que en un principio se enfoca bastante en Vue como librería, muy simple, sencillo y directo tal cual muestra en vídeo de introducción sin instalar IDEs ni dependencias de cientos de megas.

-- Por ejemplo Vue CLI requiere node.js, agregar el vue CLI, etc, quedando el proyecto completo con varias decenas de megas 

- Puedes acceder gratuitamente a los primeros vídeos del curso que muestra el vídeo desde su página web: https://ed.team/cursos/vue/