---
title: "Comment preview med DOM"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/134321-comment-preview-med-dom"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "echoSwe"
published: "2005-09-14T22:29:31.000Z"
updated: "2005-09-16T15:47:36.000Z"
replies: 6
views: 569
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/134321-comment-preview-med-dom"
---

# Comment preview med DOM

## #1 — echoSwe, 2005-09-14T22:29Z

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?

Permalänk: https://www.webforum.nu/p/134321

## #2 — Peter S, 2005-09-15T15:41Z

```
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?

Permalänk: https://www.webforum.nu/p/1672140

## #3 — echoSwe, 2005-09-15T23:08Z

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\>

Permalänk: https://www.webforum.nu/p/1672316

## #4 — Peter S, 2005-09-16T14:04Z

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

Bilagor:

- [es.txt](https://www.webforum.nu/a/7803.txt)

Permalänk: https://www.webforum.nu/p/1672496

## #5 — echoSwe, 2005-09-16T14:11Z

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?

Permalänk: https://www.webforum.nu/p/1672498

## #6 — echoSwe, 2005-09-16T14:20Z

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

Permalänk: https://www.webforum.nu/p/1672499

## #7 — echoSwe, 2005-09-16T15:47Z

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

Permalänk: https://www.webforum.nu/p/1672537

---

Tråden på webben: https://www.webforum.nu/amne/javascript/134321-comment-preview-med-dom