Linieskift med DOM

Kan du ikke bare splitte strengen ved linieskift og så løbe alle linierne igennem og indsætte tekst-elementer efterfulgt af et br-element...?

Jow da, men tænkte om der ikke var en anden måde ?

Det vil rigtigt nok blive en masse hulomhej, men sådan er det nu engang med DOM...

<ole>

Njaahhh ... ikke nødvendigvis:

function brDom(sText) {
    var o = document.createDocumentFragment();
    sText = sText.replace(/\r\n/g, "\r");
    sText = sText.replace(/(.*?)([\r|\n]+)/g, function(a,b,c,d){
        if (b!="") o.appendChild(document.createTextNode(b));
        for (var i=0,j=c.length; i<j; i++) o.appendChild(document.createElement("br"));
        return "";
    });
    if (sText!="") o.appendChild(document.createTextNode(sText));
    return o;
}

Hvis du så vil fylde en streng 'sStr' ind i divet 'fooBar', kan du skrive:

var sStr = "\r\nOle\r\nBole\r\n\r\nBumm!\r\nIh\r\n\r\n- hvor\r\n\r\n\r\ner\r\n\r\ndu\r\ndum";
var o = document.getElementById("fooBar");
var oo = brDom(sStr);
document.getElementById("bar").appendChild(oo);

/mvh
</bole>

Ja, det er lidt kringlet at bruge DOM.
Men ole, dit ex. virker efter hensigten.

Dog skal man lige i dit ex. rette
document.getElementById("bar").appendChild(oo);

til
document.getElementById("fooBar").appendChild(oo);

eller jo nok nærmere
o.appendChild(oo);

:O) Men smid et svar

Kalder du ikke den en kringlet løsning, Ole? Javist - det er en super smart løsning, men at være nød til at gøre det på den måde, eller en hvilken som helst anden måde, gør noget så simpelt som linjeskift, meget `sværere´ end det burde være:)

Jahh, man skulle jo mene et linieskift var noget af det mest simple :O)

Anyway, er det p.t. så'n her:

function make_br(sText,page) {

    var o = page.createDocumentFragment();
    sText = sText.replace(/\r\n/g, "\r");
    sText = sText.replace(/(.*?)([\r|\n]+)/g, function(a,b,c,d){
        if (b!="") o.appendChild(page.createTextNode(b));
        for (var i=0,j=c.length; i<j; i++) o.appendChild(page.createElement("br"));
        return "";
    });
    if (sText!="") o.appendChild(page.createTextNode(sText));
    return o;

}


"page" er med da jeg bruger den i en iframe.

chrisbookwood >> Jamen, det er da ultra-nemt!

Problemet er, at man på den ene side ønsker et hamrende simpelt miljø i stil med det, som HTML var i begyndelsen - og som var beregnet til at opstille videnskabelige måledata med på tekstform. Det kan også sagtens lade sig gøre, hvis ikke man skal andet, end det, HTML 1.0 og JavaScript 1.0 kunne.

HTML, XML, CSS og JavaScript er dog blevet ret komplekse teknologier - og kravene stiger for hver eneste dag. Man vil kunne det samme, som man kan med alle mulige andre programmerings teknologier. Derfor bliver tingene også ligeså komplekse, som de er i andre sprog/miljøer.

Hvis du programmatisk skal oprette kontroller på en form i Visual Basic eller lign. sprog, foregår det på nogenlunde samme måde. Hvis du _vil_ til Australien, er det ikke nok at lære at cykle. Du må lade andre foretage transporten for dig - eller du må lære at sejle eller flyve  ;o)

? Hvad er der nu galt med vandcyklen ? :O)

Og husk at svare !
Og tak for hjælp!

( Det er iøvrigt til en chat med lidt inspiration fra din "olebole-chat" )

showsource >> Det skal jeg sige dig: Hvis hashrygning virkelig helt automatisk skulle føre til heroinmisbrug, er jeg overbevist om, at vandcyklen må være den direkte vej til vandvognen ... fri mig fra den slags!  ;D

Kommer vel an på om man løber tør for røg på turen?

Hehe ... tak for points  ;o)

Som altid har du ret, Ole ... Det ændre dog ikke på, at et linieskift burde være 1' linie kode, ikke 10-11 stk:P

Jamen, sådan er det jo heller ikke. Ét linjeskift, kræver én linje kode:
    ELEMENT.appendChild( document.createElement("br") );

- og bruger du wrapperen ovenfor, indsætter én linje kode 873 breaks i en streng, hvis det skulle være ønskeligt  =)

Jeg synes sådan set, det er langt mere besværligt at stege en hakkebøf. Heldigvis bor der nede på hjørnet en hvidkitlet mand, som er ekspert i at slå køer ihjel og skære dem ud i passende stykker. Ellers var jeg da forlængst død af sult, for jeg kan jo heller ikke finde ud af at holde mig selv med grøntsager - det klarer den flinke tyrk og hans familie på det andet hjørne.

På samme måde må andre ud og finde smarte wrappers til at lave det 'mest besværlige' kodearbejde - men så er det også let at få noget fra hånden  ;o)

Webkodning er et fag på lige fod med en slagters, gartners eller gynækologs. Om det så er ligeså suspekt at være amatør webkoder, som det er at være amatør gynækolog, skal jeg lade være usagt!  ;D

Jeg kan godt se din pointe, ja;)

I min editor har jeg lavet en snippet 'Ctrl+Alt+H' (for 'Helpers'), som banker en flok wrappers ind i dokumentet. Til allersidst sletter jeg dem, jeg ikke bruger, mens jeg alligevel 'vasker koden ren'. Her er en håndfuld, som sparer en hel del på de fedtede, gigtsvage, små pizzatænger:

// Get element (by id. D is optional, and may i.e. refer to a XML-document)
function gE(id,D){return (D?D:document).getElementById(id)};
// Get array (by tagName)
function gAt(o,tN){return o.getElementsByTagName(tN)};
// Has className (check for 'classB' in class="classA classB classC" is also supported)
function hCn(o,cN){var oRX=new RegExp("\\b"+cN+"\\b");return oRX.test(o.className)};
/*
    Get array (by className)
    cN (String) - className
    tN (String) - element types to check (Optional. If not specified, check all)
    oP (Object) - element to search in (Optional. If not specified, search in document)
*/
function gAc(cN,tN,oP){var a=[],aa=(oP?oP:document).getElementsByTagName(tN?tN:"*"),i=aa.length-1;do{if(hCn(aa[i],cN))a.push(aa[i])}while(i--);return a};
// Get innerText from a DOM-structure
function gIt(o){var a=[],an=o.childNodes,i=an.length-1;do{a[i]=(an[i].nodeType==3?an[i].nodeValue:an[i].nodeType==1?arguments.callee(an[i]):"")}while(i--);return a.join("")};
// Create element (D is optional, and may i.e. refer to a XML-document)
function cE(tN,D){return (D?D:document).createElement(tN)};
// Create text node (D is optional, and may i.e. refer to a XML-document)
function cTn(tN,D){return (D?D:document).createTextNode(tN)};

- og der burde nok under 'hCn' (hasClassName) stå:
    tN (String) - element types (by tagName) to check (Optional. If not specified, check all)

Baahhh ... det var jo under 'gAc' (get array by className)  ;o)