Avatar billede jesper-moeller Nybegynder
07. januar 2007 - 07:46 Der er 21 kommentarer og
1 løsning

fin tekst og lav den om ifht palcering

Jeg står og skal bruge et script der kan lave tekst stykker om i et html document  . Håber nogen kan hjælpe mig ..
Jeg skal bruge et script der leder efter tekst der står imellem to *
som feks. *mappe/images.gif*

hvis teksten står inde i h4 tags som
<h4><a href="#">*mappe/images.gif 20 25* Mit link</a></h4>
skal det blive til
<h4><a href="#"><img src="mappe/images.gif" hight="20" width="25"> Mit link</a></h4>

står det andetsted ind mellem h4 tag skal det fjernes helt (incl**)

Håber nogen kan hjælpe mig
Avatar billede crazysnap Seniormester
07. januar 2007 - 23:15 #1
Hej jesper-moeller,

Det du har tænkt dig bryder jeg normalt ikke særlig meget om fordi du skal "parse" en html side med javascript (der kan nemt opstå fejl idet html sider ofte ikke følger standarderne) og jo længere siderne er, jo længere tid tager det er udføre scriptet.

Anyways, jeg har lavet et lille eksempel som udfører det du beskriver:

- Den fjerner alle * tekst bla bla*-strenge fra siden som ikke er inde i en h4 tag (det gør den kun med alle *tekst*-strenge eksisterende i body tagen)
- Den omdanner alle *<path> <height> <width>* strenge inde i h4 tags til en <img> tag


For at teste det kan du kopiere nedenstående ind i en ny html fil:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Find replace</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script type="text/javascript">
           
       
            function findReplace()
            {
                var arrTags = document.getElementsByTagName("h4");
               
                var arrStringTags = new Array(arrTags.length);
                var i;
               
                //Copy tags innertext to temporary array
                for(i = 0; i < arrTags.length; i++)
                {
                    arrStringTags[i] = arrTags[i].innerHTML;
                }
                   
                //Remove all elements with embeded between two *'s from the document (the body of the document)
                document.getElementsByTagName("body")[0].innerHTML = parseTag(document.getElementsByTagName("body")[0].innerHTML, true);
               
                //Transform all correct elements between two *'s to <img> tags
                parseTags(arrTags, arrStringTags);
            }
           
            function parseTags(arrTags, arrStringTags)
            {
                var i;
                for(i = 0; i < arrTags.length; i++)
                {
                    arrTags[i].innerHTML = parseTag(arrStringTags[i], false);
                }
            }
           
            function parseTag(strInput, removeImg)
            {
                var strDocTmp = "";
                var img = "";
                var i = 0;
                var tmpVal;
               
                while(strInput.charAt(i) != null && i < strInput.length)
                {       
                    tmpVal = strInput.charAt(i);
                      img = "";
                   
                    if(tmpVal == "*")
                    {
                     
                        tmpVal = strInput.charAt(++i);

                        //Skip everything within "*----*"
                        while(tmpVal != null && tmpVal != "*")
                        {
                            img += tmpVal;
                            tmpVal = strInput.charAt(++i);
                        }
                       
                        //Parse img if there is any between the "*"
                        if(img != "")
                            img = createImgTag(img);
                       
                        //Grab next value after the last "*"
                        tmpVal = strInput.charAt(++i);   
                    }
   
                        i++;
                       
                    if(!removeImg) 
                        strDocTmp += img + tmpVal;
                    else
                        strDocTmp += tmpVal;
                }
               
               
                return strDocTmp;
            }
           
            function createImgTag(strImg)
            {
                var arrAttributes = strImg.split(" ");
                 
                if(arrAttributes == null || arrAttributes.length != 3)
                    return "";
                   
                var img = "<img src=\"" + arrAttributes[0] + "\"";
                img += " height=\"" + arrAttributes[1] + "\"";
                img += " width=\"" + arrAttributes[2] + "\">";
                return img;
            }
           
        </script>

    </head>
    <body>
        <table>
            <tr>
                <td>find and remove example</td>
                <td>*c:/pic1.jpg 20 30*</td>
                <td>*dette skulle fjernes*</td>
            </tr>
            <tr>
                <td id="">
                  <h4><a href="#">*c:/pic1.jpg 20 30* Mit link</a></h4>
                  <h4><a href="#">*c:/pic2.jpg 30 25* Mit link</a></h4>
                </td>
            </tr>
            <tr>
                <td>*dette er ikke mellem en h4 tag og skal fjernes*</td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Click to find and replace document" onclick="findReplace();"/>
                </td>
            </tr>
        </table>
    </body>
</html>


Håber det hjælper dig i gang med det du ønsker! :)


- Snap
Avatar billede crazysnap Seniormester
07. januar 2007 - 23:17 #2
Du skal selvfølgelig lige ændre stien til billederne i html koden i eksemplet til nogen billeder på din computer! :)


- Snap
Avatar billede jesper-moeller Nybegynder
07. januar 2007 - 23:24 #3
Takker for dit svar ... som jeg strax vil afprøve..

Hvis du har en smartere måde man kønne løse den opgave på høre jeg da meget gerne om den
Avatar billede crazysnap Seniormester
07. januar 2007 - 23:53 #4
Til lige det problem du er i kan jeg ikke komme på en smartere løsning. Men det bunder nok i at man helst aldrig skulle komme i den situation at måtte løbe sit dokument igennem og ændre på det løbende (sagt på den mindst provokerende måde). :)

Nu ved jeg jo ikke hvor du får dokumentet fra, eller hvor *---tekst---*-strengene opstår, men jeg ville nok prøve at undgå dem fra start af når dokumentet dannes. Men det er jo ikke sikkert det er muligt i dit tilfælde, så må du ihvertfald lige uddybe hvordan det er du ender i den situation! :)

En lille tilføjelse til mit script og endnu et argument til hvorfor jeg ikke bryder mig om det: Er der bare den mindste fejl i html siden fejler scriptet, f.eks hvis:

1) Der er en start * men ikke en slut *, f.eks: *c:/pic1.jpg 34 43
2) Der er for mange mellemrum mellem billede-sti og height og width, f.eks *c:/pic1.jpg 3 4 43*
3) Der mangler height eller width f.eks. *c:/pic1.jpg 43*
osv..


Nu tror jeg det er senge tid, arbejdet kalder jo i morgen! :)

Håber det lykkedes for dig!


- Snap
Avatar billede jesper-moeller Nybegynder
08. januar 2007 - 00:02 #5
Det hele bunder i en lille  ting jeg vil have ordnet med et phpBB3 forum..
Hvor jeg i categorierne gerne vil have nogle små iconere ved overskrifterne ..
disse overskrifter hentes fra en database .. hvor ima ikke kan læggen et alm tags. (Det kunne man gøre i phpBB2
feks "<img src="" width="" hight=""> Categori" og så ville der være et icon ved categorien
den ene grund til at dette ikke kan lade sig gøre i phpBB3 er at alle tegn som fks < og " bliver til lgt; osv..
en anden grund er at den string også bruges i andre sammenhæng .. feks breadcrums.. hvor der ikke skal være et icon
Avatar billede jesper-moeller Nybegynder
08. januar 2007 - 00:05 #6
sider lige og får den tnake det måske ville være smarter at sige at det skal ligge mellem 2 * lige efter hinanden
**c:/pic1.jpg 34 43**
da evnt post jo kan indeholde et eller flere *

forsøgte lige at ændre * i scriptet... men det virkede ikke ?
Avatar billede crazysnap Seniormester
08. januar 2007 - 10:18 #7
Hej igen,

Nej man kan ikke direkte bare ændre test-strengen fra "*" til "**", for den checker kun en character ad gangen. Jeg har derfor ændret scriptet nu så det er mere dynamisk. Du kan i det nye script bare ændre "strTestToken"-variablen til en vilkårlig streng. Nu står den til "**" som du ønskede, men du kan snildt ændre den til alt muligt andet f.eks. "##-#-#" hvis du finder ud af "**" heller ikke er godt nok.
Det nye script ses nedenfor:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Find replace</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script type="text/javascript">
           
            //Kan være hvad som helst nu f.eks "##-" eller "GHJ##F"
            var strTestToken = "**";
           
            var iPos = 0;
       
            function findReplace()
            {
                var arrTags = document.getElementsByTagName("h4");
               
                var arrStringTags = new Array(arrTags.length);
                var i;
               
                //Copy tags innertext to temporary array
                for(i = 0; i < arrTags.length; i++)
                {
                    arrStringTags[i] = arrTags[i].innerHTML;
                }
                   
                //Remove all elements with embeded between two *'s from the document (the body of the document)
                document.getElementsByTagName("body")[0].innerHTML = parseTag(document.getElementsByTagName("body")[0].innerHTML, true);
               
                //Transform all correct elements between two *'s to <img> tags
                parseTags(arrTags, arrStringTags);
            }
           
            function parseTags(arrTags, arrStringTags)
            {
                var i;
                for(i = 0; i < arrTags.length; i++)
                {
                    arrTags[i].innerHTML = parseTag(arrStringTags[i], false);
                }
            }
           
            function parseTag(strInput, removeImg)
            {
                var strDocTmp = "";
                var img = "";
                iPos = 0;
                var tmpVal;
               
                while(strInput.charAt(iPos) != null && iPos < strInput.length)
                {       
                      img = "";
                     
                      tmpVal = strInput.charAt(iPos);
                   
                    if(checkToken(strInput, iPos))
                    {
                        //Skip everything within "*----*"
                        while(!checkToken(strInput, iPos))
                        {
                            tmpVal = strInput.charAt(iPos++);
                            img += tmpVal;
                        }
                       
                        //Parse img if there is any between the "*"
                        if(img != "")
                            img = createImgTag(img);
                       
                        tmpVal = strInput.charAt(iPos);  //skip second * 
                    }
 
                    if(!removeImg) 
                        strDocTmp += img + tmpVal;
                    else
                        strDocTmp += tmpVal;
                       
                    iPos++;                       
                }
               
                return strDocTmp;
            }
           
           
            function checkToken(strInput, pos)
            {
                var i;
               
                if(pos + strTestToken.length > strInput.length)
                    return false;
             
                for(i = 0; i < strTestToken.length; i++, pos++)
                {
                    if(strInput.charAt(pos) != strTestToken.charAt(i))
                        return false;
                }
               
                iPos = pos;
             
                return true;
            }
       
           
            function createImgTag(strImg)
            {
                var arrAttributes = strImg.split(" ");
                 
                if(arrAttributes == null || arrAttributes.length != 3)
                    return "";
                   
                var img = "<img src=\"" + arrAttributes[0] + "\"";
                img += " height=\"" + arrAttributes[1] + "\"";
                img += " width=\"" + arrAttributes[2] + "\">";
                return img;
            }
           
        </script>

    </head>
    <body>
        <table>
            <tr>
                <td>find and remove example</td>
                <td>**c:/pic1.jpg 20 30**</td>
                <td>**dette skulle fjernes**</td>
            </tr>
            <tr>
                <td id="">
                  <h4><a href="#">**c:/pic1.jpg 20 30** Mit link</a></h4>
                  <h4><a href="#">**c:/pic2.jpg 30 25** Mit link</a></h4>
                </td>
            </tr>
            <tr>
                <td>**dette er ikke mellem en h4 tag og skal fjernes**</td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Click to find and replace document" onclick="findReplace();"/>
                </td>
            </tr>
        </table>
    </body>
</html>


Håber det hjælper!

Og tak for pointene!

- Snap
Avatar billede jesper-moeller Nybegynder
08. januar 2007 - 10:21 #8
Mange tak ...
:-)
Avatar billede roenving Novice
21. januar 2007 - 11:26 #9
Med lidt brug af en regexp og DOM kan det gøres adskilligt kortere:

window.onload = function(){
  var head4 = document.getElementsByTagName("h4"),txt,lnk,lnktxt,newPic;
  for(i=0,im=head4.length;im>i;i++){
    lnk = head4[i].firstChild;
    txt = lnk.firstChild.nodeValue;
    if(txt.match(/\*.+ \d+ \d+\*/)){
      lnktxt = txt.split("*")[2];
      txt = txt.split("*")[1].split(" ");
      newPic = document.createElement("img");
      newPic.setAttribute("src",txt[0]);
      newPic.setAttribute("height",txt[1]);
      newPic.setAttribute("width",txt[2]);
      newPic.setAttribute("border","0");
      lnk.removeChild(lnk.firstChild);
      lnk.appendChild(newPic);
      lnk.appendChild(document.createTextNode(lnktxt));
    }
  }
}

!-)
Avatar billede crazysnap Seniormester
22. januar 2007 - 14:24 #10
Ja det er sådan set rigtig nok, og mit script havde også været noget kortere hvis det kun var links'ne inde i h4 tags'ne der skulle checkes. Men nu var problemstillingen jo desværre lidt mere kompliceret idet det faktisk var hele dokumentet som skulle checkes for strenge af typen: *tekst*. Det var kun strenge inde i h4 tags som skulle laves om til img tags, alle andre skulle fjernes. Men mit script kunne sikkert godt optimeres, men det parser dokumentet som det skal. :)

Det sjældent jeg forsvarer mine egne scripts idet folk altid kan komme med noget bedre når ens eget bliver kigget efter i detaljer. Men du har ret roenving, dit script er kortere og kører heller ikke hele dokumentet igennem (så det er flot), men det er desværre heller ikke komplet.


Hvis du vil bruge mere tid på det kan du jo udvide dit script så det kører på hele dokumentet og kun omdanner strengene inde for h4 tags til img tags og ellers bare sletter de andre. Så kan han jo bruge dit kortere script i stedet. :)


Mvh.

- Snap :)
Avatar billede jesper-moeller Nybegynder
22. januar 2007 - 14:35 #11
Altid herligt at se forskellige forslag :-)
Avatar billede olebole Juniormester
22. januar 2007 - 15:42 #12
<ole>

crazysnap >> En yderst væsentlig forskel på dit og roenvings eksempler er vel, at roenvings består af valid kode  ;o)

/mvh
</bole>
Avatar billede crazysnap Seniormester
22. januar 2007 - 16:52 #13
LOL og suk, hvad skulle den kommentar til for olebole?

Har nu læst mange af dine tidligere indskud og din flabethed kommer egentlig ikke bag på mig. Jeg handler kun i interesse for brugerne, så i stedet for at nedgøre min kode kunne du jo skrive hvad det var der ikke var validt så jesper-moeller kunne ændre det i hans script. Kunne forestille mig det var brugen af innerHTML du ikke brød dig om.

Og jesper-moeller, håber roenving laver sit script færdigt for det er smukkere end det jeg foreslog.


Mvh.

- Snap
Avatar billede roenving Novice
22. januar 2007 - 17:03 #14
Den er nu heller ikke så lang:

window.onload = function(){
  var head4 = document.getElementsByTagName("h4"),txt,lnk,lnktxt,newPic;
  for(i=0,im=head4.length;im>i;i++){
    lnk = head4[i].firstChild;
    txt = lnk.firstChild.nodeValue;
    if(txt.match(/\*.+ \d+ \d+\*/)){
      lnktxt = txt.split("*")[2];
      txt = txt.split("*")[1].split(" ");
      newPic = document.createElement("img");
      newPic.setAttribute("src",txt[0]);
      newPic.setAttribute("height",txt[1]);
      newPic.setAttribute("width",txt[2]);
      newPic.setAttribute("border","0");
      lnk.removeChild(lnk.firstChild);
      lnk.appendChild(newPic);
      lnk.appendChild(document.createTextNode(lnktxt));
    }
  }
  var elms = document.getElementsByTagName("*");
  for(i=0,im=elms.length;im>i;i++){
    if(elm.firstChild && elm.firstChild.nodeType == 3)
      elm.firstChild.nodeValue = elm.firstChild.nodeValue.replace(/\*.+ \d+ \d+\*/g,"");
  }
}
Avatar billede roenving Novice
22. januar 2007 - 17:06 #15
-- og billeder indsættes så stadig kun, hvis der er et link, hvis der forekommer tilfælde, hvor der ikke er links, skal der gøres noget mere !-)
Avatar billede jesper-moeller Nybegynder
22. januar 2007 - 21:26 #16
Smukt roenving

Du er sku god :-) takker


Mht valid kode... Blot fordi en koden er valid gør den ikke nødvendigvis brugbar ;-)
Dette er valid HTML kode uden mening
<?xml this is not?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
          [ <!-- SYSTEM "not XHTML" --> ]>
      <!-- -- -->
        This is a comment. This document is not XHTML.
        <html xmlns="http://www.w3.org/1999/xhtml"/>
        Ok, I'm done now. -->
      <html>
      <title> Need a title in HTML4! </title>
      <p> This is a valid HTML4 document.
      </html>
Avatar billede olebole Juniormester
25. januar 2007 - 15:28 #17
crazysnap >> Når du nu ved (og det ved jeg, du ved fra andre tråde), at innerHTML er invalid under HTML og direkte ubrugelig under XHTML, er det lidt svært at se, hvordan det at skrive et XHTML-eksempel, der bygger på netop denne property, kan hænge sammen med: "Jeg handler kun i interesse for brugerne ..."  =)

Jeg nøjedes med at påpege, roenvings eksempel - i modsætning til dit - var validt, uden at redegøre for det invalide ved dit eksempel. Dels fordi, jeg på det tidspunkt var på vej ud af døren - og dels fordi, jeg regnede med, du selv ville gøre rede for, hvorfor du havde skrevet et invalidt eksempel ... og hvad det var, der gjorde det ubrugeligt. Dér må jeg tilgengæld indrømme, jeg tog fejl!

- at du så vælger at opfatte en nøgtern kommentar som værende nedgørende og flabet, siger vel mest om dig selv  ;o)
Avatar billede olebole Juniormester
25. januar 2007 - 15:31 #18
jesper-moeller >> Mht. (22/01-2007 21:26:54), så kender du formodentlig også den linje, jeg har skrevet hundredevis af gange her på Eksperten:
    Valid kode er ikke nødvendigvis god kode - men god kode er altid valid  ;o)
Avatar billede jesper-moeller Nybegynder
25. januar 2007 - 15:57 #19
ole >>
Jeps ... netop det mit eks viser... ;-)
Avatar billede crazysnap Seniormester
25. januar 2007 - 16:30 #20
ole >>

Ok, men da jeg skrev koden til jesper-moeller var jeg faktisk ikke klar over at innerHTML var banned fra XHTML (er 3D-Engine udvikler, så det var i mine unge dage jeg legede med javascript). Og jeg må hellere til at skille mig af med den DOCTYPE i mine eksempler (opdagede ikke til at starte med at det XHTML den stod til) ;). Jeg vil fremover overveje ikke at bruge innerHTML mere så, følte mig ellers lidt "dirty" når jeg gjorde, så det er da ærgeligt at høre metoden er på vej ud.


Kan høre at selvom jeg er ny herinde er jeg hurtigt blevet en "rebel" som skriver invalid XHTML kode med css hacks og cross-browser javascript metoder.. nice.


Men så kan jeg jo rette op på det og sige til jesper-moeller:
Hvis du af mystiske årsager stadig bruger min kode og XHTML, må du hellere rette innerHTML til DOM metoder i stedet, ellers får olebole da snart et hjerteanfald over min indflydelse på E-brugere gennem mine terrorist eksempler! ;) (Og olebole, det er bare en spøg, du behøver ikke reply med spydige kommentare)


Mvh

- Snap
Avatar billede jesper-moeller Nybegynder
25. januar 2007 - 16:37 #21
cracy >
*S*..
Leger lidt med roenving eksemple lige pt
Avatar billede olebole Juniormester
26. januar 2007 - 14:00 #22
innerHTML er såmænd ikke på vej ud - den har aldrig været valid  ;o)

Ingen officielle standarder har nogensinde beskrevet innerHTML (som iøvrigt ikke en metode, men en property) - hvilket var årsagen til, at Opera i meget lang tid valgte ikke at understøtte den. Til sidst blev de dog for presset af, at MS og Mozilla valgte at understøtte invalide properties og endte desværre med at falde til patten (den med yverbetændelse!)  :o|
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester