Codifiche e Trasformazioni

Affrontiamo il problema di codificare i caratteri in HTML/Javascript

Definiamo una stringa magica: A<br>\n/d'e"f?g!h&€àèéìòùZ che può dare problemi a seconda di dove la si usi

Questa in HTML può essere scritta come:

A&lt;br&gt;\n/d'e"f?g!h&amp;€àèéìòùZ

oppure

A&lt;br&gt;\n/d'e"f?g!h&amp;&euro;&agrave;&egrave;&eacute;&igrave;&ograve;&ugrave;Z

In JavaScript la valorizziamo come: MagicString = "A<br>\\n/d'e\"f?g!h&€àèéìòùZ";

In JSON la valorizziamo come: {"Valore":"A<br>\\n/d'e\"f?g!h&€àèéìòùZ"}

In un campo di input o in una textarea la valorizziamo con l'istruzione Elemento.value = "A<br>\\n/d'e\"f?g!h&€àèéìòùZ";

Attraverso una funzione JavaScript la stringa magica è stata valorizzata nei 3 elementI sottostanti.

Guardiamo adesso come rendere editabile un paragrafo monoriga

Questo è il paragrafo che vogliamo rendere editabile e che contiene: A<br>\n/d'e"f?g!h&€àèéìòùZ

Edita

Guardiamo adesso come rendere editabile un paragrafo multiriga

Questo è il paragrafo che vogliamo rendere editabile e che contiene:
A<br>\n/d'e"f?g!h&€àèéìòùZ
A<br>\n/d'e"f?g!h&€àèéìòùZ

Edita

Per far questo abbiamo utilizzato la funzione:

function FunEditaParagrafo(Id, NoReturn)
{
	let Paragrafo = document.getElementById(Id);
	if(Paragrafo == null)
	{
		return;
	}
	if(NoReturn)
	{
		Paragrafo.addEventListener('keydown', (event) =>
		{
			// Non voglio poter inserire un return
			if (event.key === 'Enter')
			{
				event.preventDefault();
			}
		});
	}
	if(Paragrafo.isContentEditable)
	{
		Paragrafo.contentEditable = false;
	}
	else
	{
		Paragrafo.contentEditable = true;
	}
	Paragrafo.focus();
}

Guardiamo adesso come trasformare un paragrafo in textarea e viceversa

Questo è il paragrafo che vogliamo rendere trasformare e che contiene:
A<br>\n/d'e"f?g!h&€àèéìòùZ
A<br>\n/d'e"f?g!h&€àèéìòùZ

Trasforma

Per far questo abbiamo utilizzato le funzioni:

function Trasforma(ParId, TxtAId)
{
	if(document.getElementById(ParId) != null)
	{
		TrasformaInTextarea(ParId, TxtAId);
	}
	else
	{
		TrasformaInParagrafo(TxtAId, ParId);
	}
}

function TrasformaInTextarea(ParId, TxtAId)
{
	let Paragrafo = document.getElementById(ParId);
	if(Paragrafo == null)
	{
		return;
	}
	let Textarea = document.createElement("textarea");
	Textarea.id = TxtAId;
	Textarea.value = Paragrafo.textContent;
	Textarea.rows = 4;
	Textarea.cols = 80
	Paragrafo.replaceWith(Textarea);
	Textarea.focus();
}

function TrasformaInParagrafo(TxtAId, ParId)
{
	let Textarea = document.getElementById(TxtAId);
	if(Textarea == null)
	{
		return;
	}
	let Paragrafo = document.createElement("p");
	Paragrafo.id = ParId;
	let TestoHtml = HtmlEncode(Textarea.value);
	TestoHtml = TestoHtml.replaceAll("\n", "<br>");
	Paragrafo.innerHTML = TestoHtml;
	Textarea.replaceWith(Paragrafo);
	Paragrafo.focus();
}