Comment preview med DOM

Tjena!

Jag försöker skapa en förhandsgranskning i realtid, som ni kanske har sett på vissa sidor. Problemet är att jag inte kan använda mig av innerHtml då jag skickar application/xhtml+xml till klienten. Därför försöker jag göra samma sak med DOM...

function wireUpPreview() {
	var el = document.getElementById('previewBox');
	var l = document.getElementById('nameHyperlink');
	var f = document.getElementById('comments_form');
	
	f.text.onkeyup = function refreshPreview() {
		var para = document.createElement("p");
		el.appendChild(para);
		el.childNodes[0].appendChild = document.createTextNode(f.getElementById('text').value.replace(/(\r\n|\n)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'/p><p>'));
	}
	f.author.onkeyup = function refreshName() {
		//här vill jag ta bort allt som redan finns i l
		l.appendChild(document.createTextNode(f.author.value));
	}
}

är min kod, och som ni förstår så fungerar den inte.
Jag har alltså en <div> som jag i detta scriptet kallar för "el", förkortning av element. "l" är namnet på personen som postar.

Jag undrar hur man ändrar, istället för att lägga till, texten i länken, resp. divven.

Regular expressions i koden ändrar 1) \n till <br /> och 2) <br /><br /> till </p><p>

finns det något sätt att göra detta smart i DOM?

Sedan undrar jag om det finns något smart sätt att lösa problemet med att skapa ett stycke varje \n x2?

function wireUpPreview() {
	var el = document.getElementById('previewBox');
	var l = document.getElementById('nameHyperlink');
	var f = document.getElementById('comments_form');
	
	f.text.onkeyup = function refreshPreview() {
		var para = document.createElement("p");
		para.appendChild(document.createTextNode(f.getElementById('text').value.repla  ce(/(\r\n|\n)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'/p><p>')));
		el.appendChild(para);
	}
	f.author.onkeyup = function refreshName() {
		//här vill jag ta bort allt som redan finns i l

		var tn = document.createTextNode(f.author.value);
		if (l.hasChildNodes()){
			l.replaceChild(tn, l.childNodes[0]);
		} else {
			l.appendChild(tn);
		}
	}
}

Skulle l ha flera barn, kan du skapa en loop och ta bort dem med removeChild():

while (l.hasChildNodes()){
    l.removeChild(l.childNodes[0]);
}

Angående styckena, kan du visa ett exempel på hur det ser ut nu och hur det skall ändras?

Tack för svaret Peter!

Ja, säg till exempel att man har följande text inskriven i objektet el, som är en textarea. Detta är c++ koden, eller programmeringskoden som textarean innehåller när man har skrivit lite:

Hej\n\nJag tyckte att din artikel var bra...\n\nDet är bara ett par saker jag skulle vilja ändra:\n\t1. Den är för lång\n\t2. Den är enbart riktad mot användare

eller liknande.

Scriptet ska då, varje gång som en tangent släpps, kolla om det finns stycken i texten som är inmatad. Dessa stycken visas genom \n\n som då är dubbel radbrytning. Om det bara är en radbrytning, som i min lista så ska \n bytas mot <br /> och skrivas ut i "previewBox"-divven. Då måste ju texten som redan fanns i divven försvinna och ersättas för varje tangenttryckning.
Om det är \n\n som är skrivet så ska nuvarande stycke (p) avslutas med </p> och ett nytt stycke inledas med <p>.
Scriptet ska göra detta och därefter visa hur meddelandet som är inskrivet i <textarea> kommer se ut i slutändan - just genom att tex. skriva om \n till <br /> etc...

Ovan skrivna text ska då se ut så här i preview-divven:

Hej

Jag tyckte att din artikel var bra...

Det är bara ett par saker jag skulle vilja ändra:
1. Den är för lång
2. Den är enbart riktad mot användare

och själva htmlkoden ska vara:

<p>Hej</p><p>Jag tyckte att din artikel var bra...</p><p>Det är bara ett par saker jag skulle vilja ändra:<br />1. Den är för lång<br />2. Den är enbart riktad mot användare</p>

Jag har gjort ett litet exempel som du kanske kan utgå ifrån. Se bifogad fil.

forts.

Author funkar nu.

Ändrade koden lite:

function wireUpPreview() {
	var el = document.getElementById('previewBox');
	var l = document.getElementById('nameHyperlink');
	var f = document.getElementById('comments_form');
	var p = 0;
	
	var para = document.createElement("p");
	p++;
	el.appendChild(para);
	f.text.onkeyup = function refreshPreview() {
		var texten = document.createTextNode(f.text.value.replace(/(\r\n|\n)/g,'<br />'));
		if (para.hasChildNodes()) {
			para.replaceChild(texten, para.childNodes[0]);
		}
		else {
			para.appendChild(texten);	
		}
	}
	f.author.onkeyup = function refreshName() {
		//här vill jag ta bort allt som redan finns i l
		var tn = document.createTextNode(f.author.value);
		if (l.hasChildNodes()){
			l.replaceChild(tn, l.childNodes[0]);
		} else {
			l.appendChild(tn);
		}
	}
}

och okej, den producerar nu valid kod... Men den gör inte det som den ska.

Såhär ser html-en ut:

<div class="comment">
	<h2>Comment preview</h2>
	<h3>Posted by <span class="author"><a href="#" title=" " id="nameHyperlink"></a></span></h3>
	<div id="previewBox"></div>
</div>

där man skriver in sakerna.

Säg att jag skriver in detta:

<b>Testing</b>

Testinga

Testing

Då får jag detta i min previewBox:

<b>Testing</b><br /><br />Testinga<br /><br />Testing

och det ligger självklart i ett stycke i bakgrunden.

Vad jag vill är att den ska ändra dessa <br /><br /> till att det nästa man skriver är ett nytt stycke.

Om man skriver <b>..</b> så ska det också bli fet text i boxen. Detta fungerade ju fint med previewBox.innerHtml, men finns det inget sätt i DOM?

Jag såg inte ditt meddelande. Ska kolla det.

Tack för hjälpen! Det fungerar nu :)