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