[dom] Te zoeken tekst vet maken

[Verwijderd]

Ik wil in een html-document client-side tekst vet maken. Alleen ik ben nog al wat aan het kloten met DOM-functies. Het probleem is dat de nieuwe nodes niet op de juiste plek worden ingevoegd.

Even mijn code:

code:

/*
De functie "breekt" een textNode in drieen. De middelste node 
(de gevonden tekst) wordt nog extra gecontained in een <CITE> tag.
[het werken via de class-attribuut werkt niet in combinatie met IE5]

Retouneert het aantal toevoegde sibblings (childs of parent)

Voorbeeld, bij zoeken op tekst "ga" (strTekst="ga"):
  Pre:
  |oParent|-->|oTextNode.nodeValue="ik ga zoeken"|

  Post (indien gevonden):
  |oParent|---->|oTextNode.nodeValue="ik "|
         |
         +--->|oHTMLElement:cite|---->|oTextNode:"ga"|
         |
         +--->|oTextNode.nodeValue=" zoeken"|
  Post (indien gevonden: zoektekst "ga zoeken"):
  |oParent|---->|oTextNode.nodeValue="ik "|
         |
         +--->|oHTMLElement:cite|---->|oTextNode:"ga zoeken"|
*/
function hiLiteText(strTekst,oTextNode)
{

  var oNewNode,i,oSplitNode,oAfterText,oParent=oTextNode.parentNode;
  //--| Lookup position of text (indexOf is case-insensitive)
  i=oTextNode.nodeValue.search(new RegExp(strTekst,'i')); 

  if(i==-1) 
  {
    return 0; //not found, 0 childs toegevoegd
  }
  //--| Create found-text container
  oNewNode=document.createElement('cite');
  oParent.appendChild(oNewNode);
  
  oSplitNode = oTextNode.splitText(i);
  oNewNode.appendChild(oSplitNode);

  if(oSplitNode.nodeValue.length<=strTekst.length)
  {
    //--| Geen tekst achter de gevonden zoektekst
    return 1; //1 child toegevoegd
  }

  oAfterText=oSplitNode.splitText(strTekst.length);
  oTextNode.parentNode.appendChild(oAfterText);
  return 2; //2 childs toegevoegd
}
function zoek(strTekst,oTree)
{
  for(var i=0; i<oTree.childNodes.length; i++)
  {
    if(oTree.childNodes.item(i).nodeType==1) //element node
    {
    zoek(strTekst,oTree.childNodes.item(i));
    }
    else if(oTree.childNodes.item(i).nodeType==3) //text node
    {
    i+=hiLiteText(strTekst,oTree.childNodes.item(i));
    }
  }
}

[Dennis]

Kun je niet zoiets doen? Weet niet of dit precies goede syntax is.

document.getElementByID("blaat").className = "classincssmetvettetekst";

[Verwijderd]

Op woensdag 06 februari 2002 12:18 schreef ddc het volgende:
Kun je niet zoiets doen? Weet niet of dit precies goede syntax is.

document.getElementByID("blaat").className = "classincssmetvettetekst";

Ik zoek een stukje ongestructureerde tekst, dus dat gaat niet werken.

[DeFeCt]

Daar waar je de boel retourneert kun je toch gewoon twee bold tags omheen plaatsen ?

[Verwijderd]

document.ExecCommand('Bold')

[Verwijderd]

mystring.bold(); is een standaard string method in javascript...

[Verwijderd]

Op woensdag 06 februari 2002 13:17 schreef DeFeCt het volgende:
Daar waar je de boel retourneert kun je toch gewoon twee bold tags omheen plaatsen ?

Nee, het moet client-side gebeuren...

Op woensdag 06 februari 2002 13:22 schreef Gordijnstok het volgende:
document.ExecCommand('Bold')

Is niet DOM (en werkt dus ook niet in NS6).

Op woensdag 06 februari 2002 13:27 schreef Blues het volgende:
mystring.bold(); is een standaard string method in javascript...

Zo simpel is het helaas niet...

[Norjee]

dit is vast te simpel....

code:

document.body.innerHTML = document.body.innerHTML.replace("text" , "<b>text</b>");

[Verwijderd]

Op woensdag 06 februari 2002 21:28 schreef Norjee het volgende:
dit is vast te simpel....

code:

document.body.innerHTML = document.body.innerHTML.replace("text" , "<b>text</b>");

Probeer het woord "div" of "onclick" maar eens te replacen...

[Verwijderd]

Ik heb 'm al. Het probleem achteraf: ik zocht een insertAfter, en die moet je zelf maken:

PHP:

<?
/*Geen PHP
** Calling markText('TCP/IP',document.body) will place cite-tags around all 
** occurences of the word TCP/IP.
** Note 1: The HTML occurence "<b>TCP</b>/<b>IP</b>" will NOT match. The function
**         only matches concecutive strings of text.
** Note 2: We use the cite-tag, and no span+claas-name, because IE5 has a bug.
** 
** Add the following line to your style-sheet (or make your own entry):
**   cite { background-color: yellow }
*/
function markText(strText,oTree)
{
  //strText moet een string zijn, en niet uitsluitend uit whitespace bestaan
  if(typeof strText!='string'||strText.replace(/^s*/,'').length==0) return false;
  for(var i=0; i<oTree.childNodes.length; i++)
  {
    if(oTree.childNodes.item(i).nodeType==1) //element node
    {
      markText(strText,oTree.childNodes.item(i));
    }
    else if(oTree.childNodes.item(i).nodeType==3) //text node
    {
      i+=hiLiteText(strText,oTree.childNodes.item(i));
    }
  }
  return true;
}

/*private*/function insertAfter(oNewNode,oInsertionPoint)
{
  if(oInsertionPoint.nextSibling==null)
  {
    //oInsertionPoint is last child
    oInsertionPoint.parentNode.insertBefore(oNewNode);
  }
  else
  {
    oInsertionPoint.parentNode.insertBefore(oNewNode,oInsertionPoint.nextSibling);
  }
}

/*private*/function hiLiteText(strTekst,oTextNode)
/*
De functie "breekt" een textNode in drieen. De middelste node 
(de gevonden tekst) wordt nog extra gecontained in een <CITE> tag.
[het werken via de class-attribuut werkt niet in combinatie met IE5]

Retouneert het aantal toevoegde sibblings (childs of parent)

Voorbeeld, bij zoeken op tekst "ga" (strTekst="ga"):
  Pre:
  |oParent|-->|oTextNode.nodeValue="ik ga zoeken"|

  Post (indien gevonden):
  |oParent|---->|oTextNode.nodeValue="ik "|
           |
           +--->|oHTMLElement:cite|---->|oTextNode:"ga"|
           |
           +--->|oTextNode.nodeValue=" zoeken"|
  Post (indien gevonden: zoektekst "ga zoeken"):
  |oParent|---->|oTextNode.nodeValue="ik "|
           |
           +--->|oHTMLElement:cite|---->|oTextNode:"ga zoeken"|
*/
{

  var oNewNode,oSplitNode,oAfterText;
  var i, n=0; //n is the number of new nodes to skip.
  //--| Lookup position of text (indexOf is case-insensitive)
  i=oTextNode.nodeValue.search(new RegExp(strTekst,'i')); 

  if(i==-1) 
  {
    return n; 
  }

  oSplitNode=oTextNode.splitText(i);
  oNewNode=document.createElement('cite');
  oNewNode.appendChild(oSplitNode);
  insertAfter(oNewNode,oTextNode);
  n++; //skip the cite-element

  oAfterText=oSplitNode.splitText(strTekst.length);
  insertAfter(oAfterText,oNewNode);

  return n;
}
?>