Opdatering af innerHTML

Hvordan ser værdien ud ?-)

Værdien - hvad mener du?

Omkring mit textarea ser det sådan her ud: onkeyup="setResult(this);"

Hvordan ser ta.value ud, hvis der er 'mellemrum' ?-)

Så laver den intet mellerum. Går ud fra man bare skal bruge vbCrlf :-)

vbCrlf virker jo selvfølgelig ikke i javascript, men du må vise, hvad der er i den tekststreng, der findes i ta.value, før det giver mening at foreslå noget !-)

Du kan se det her: http://betatest.alcopeople.dk/Users/EditProfile/ProfileText/Default.asp

Så skal du bare logge ind med: testbruger / test

vbCrlf hedder i javascript \n eller \r\n, så f.eks.

ta.value.replace(/(\r\n|\n|\r)/g,"<br>");

Hvor skal jeg smide det ind henne i min funktion?

function setResult(ta)
   
{
document.getElementById("result").innerHTML = ta.value;
}

JavaScript er sgu ikke lige min stærke side må jeg nok indrømme :-)

En anden ting er, at denne teknik ikke vil holde overfor kommende udgaver af browsere, da innerHTML aldrig har været en del af (x)html-DOM, så denne måde at introducere elementer på ikke er valid.

= ta.value.replace(/(\r\n|\n|\r)/g,"<br>");

Ok - men nu virker det i hvert fald.

Kan man putte flere replacer ind, vil nemlig også gerne ha smidt mine smileyer på?

Det kan man godt, men du burde gøre noget andet, nemlig erstatte disse specielle ting med elementer, der oprettes !-)

Ok, er det noget du kan hjælpe med? :-) Som sagt er min stærke side ikke ligefrem JavaScript.

Hvordan ser dine smiley-koder ud ?-)

Fx. sådan her:

strText = Replace(strText,":-)","<img height='15' width='15' src='/Pictures/Smileys/smiley.gif'>")

Det er jo så skrevet i ASP :)

Det vil sige, at du har en række smileys, som er definerede uden special-tegn !-)

-- der må du så lave en lille database, som et script kan bruge ...

-- kigger lige på det !o]

Ok - men...

Hvorfor en database? Sådan har jeg ikke gjort det nu i min Reg Exp i mit ASP.

-- hvis du skal gøre det på den gammeldags måde med innerHTML, kan du gøre det på samme måde:

function setResult(ta){
  var txt = ta.value;
  txt = txt.replace(/(\r\n|\n|\r)/g,"<br>");
  txt = txt.replace(/:\-\)/g, "<img height='15' width='15' src='/Pictures/Smileys/smiley.gif'>");
  txt = txt.replace(/:\-\(/g, "<img height='15' width='15' src='/Pictures/Smileys/sursmiley.gif'>");
  //osv.
  document.getElementById("result").innerHTML = txt;
}

-- bemærk escapingen af visse tegn, som har special-betydninger i RegExps !-)

Uh ha - det spiller så pænt godt.

Man kan ikke undgå at den henter smileyerne hele tiden, vel?

Det der med smileyerne sker, fordi browseren lige spørger, om der er kommet en ny udgave !-)

En udgave, som skulle være fremtidssikret, kunne se således ud:

<script type="text/javascript">
function setResult(ta){
  var sm = [], reg, img, num;
  sm[0] = ["","[0]"];
  sm[sm.length] = [":\\-\\)","/Pictures/Smileys/smiley.gif"];//bemærk dobbelt-escape: ')' --> '\\)'
  sm[sm.length] = [":\\-\\(","/Pictures/Smileys/sursmiley.gif"];
  sm[sm.length] = [";\\-\\)","/Pictures/Smileys/smileyglimt.gif"];
 
  var div = document.getElementById("result");
  while(div.firstChild)
    div.removeChild(div.firstChild);
 
  var txt = ta.value.replace(/(\r\n|\n|\r)/g,"[:0]");
  for(j=1,jm=sm.length;jm>j;j++){
    reg = new RegExp(sm[j][0],"g");
    txt = txt.replace(reg, "[:" + j + "]");
  }
  txt = txt.split(/\[:/g);
 
  div.appendChild(document.createTextNode(txt[0]));
 
  for(i=1,im=txt.length;im>i;i++){
    if(txt[i].indexOf("0]") == 0){
      div.appendChild(document.createElement("br"));
      txt[i] = txt[i].replace("0]","");
    }else{
      num = +txt[i].replace(/^(\d+)].*$/,"$1");
      //alert(num);
      img = document.createElement("img");
      img.setAttribute("src",sm[num][1]);
      img.setAttribute("width",15);
      img.setAttribute("height",15);
      div.appendChild(img);
      txt[i] = txt[i].replace(/^\d+\]/,"");
    }
    div.appendChild(document.createTextNode(txt[i]));
  }
}
</script>

-- og bemærk så, at tegnene her skal _dobbelt_-escapes ...

-- og det er ikke testet for alvor, jeg har alene checket, at den foretager den korrekte udskiftning ...

-- men som du måske kan fornemme, vil ovenstående æde en hel masse kræfter (men det betyder nok intet udover netop hentningen af billederne !-)

Hov, det vil nok være smart at sætte alt-attributten (og tekst-attributter hele vejen !-)

      img.setAttribute("width","15");
      img.setAttribute("height","15");
      img.setAttribute("alt","smiley");

Ok, det lader til at fungere bedre end den anden.

1000 tak for den store hjælp, smid et svar :-)

Men der er en fejl i dit script :-(

Prøv at log ind på siden jeg skrev til dig og så skriv som det første ":-)" (bare et smiley), så sætter den 1]

Ja, jeg har også lige opdaget, at den i IE ikke opdager den første (tomme) tekst-node, hvis man starter med en smiley ...

Erstat linjerne:

...
  txt = txt.split(/\[:/g);
 
  div.appendChild(document.createTextNode(txt[0]));
 
  for(i=1,im=txt.length;im>i;i++){
...

med:

...
  txt = txt.split(/\[:/g);
 
  var st = 0;
  if(!txt[0].match(/^\d+\]/)){
    div.appendChild(document.createTextNode(txt[0]));
    st = 1;
  }
 
  for(i=st,im=txt.length;im>i;i++){
...

-- og selvom det nok er usandsynligt, at det forekommer ofte, så skal den selvfølgelig ikke fejle !-)

Velbekomme '-)

Nu virker det :-)

Kan du evt. lige hurtig hjælpe mig med at få lavet så hvis der er 0 tegn i textareaet skal den sætte rette på display i stylen? Det er vel en funktion jeg skal sætte i onKeyUp på min textarea.

Der er også en anden lille ting. Hvis man skriver <b>Denne tekst med fed</b> skriver den bare <b>Denne tekst med fed</b> - hvorfor gør den det ikke til fed? Det gjorde den før :-)

Fordi man ikke, ifølge w3c, må indsætte elementer, uden at oprette dem.

Derfor har jeg i ovenstående kode brugt tekstnoder til at indsætte teksten ...

-- hvis det også skal være muligt at bruge b- (og f.eks. i-) tags, skal der strikkes en del om (da smileys jo også kan forekomme midt inde i teksten !-)

-- hrm, jeg ville nok være doven nok til at lade det hvile !o]