[JS] Highlight tekst in pagina

[Rekcor]

Modbreak:

Topic aangemaakt nav [Javascript] Highlight tekst in zoek op pagina

Mmm... ik probeer Crisp's script om te bouwen, zodat ik een willekeurig geselecteerd stuk HTML wat geselecteerd is, een andere achtergrondskleur kan geven. Vooralsnog zonder succes.

JavaScript:

function commentSelection()
{
  var q = document.getSelection();      
  var s = q.getRangeAt(0);

  var i = 0, e, j, l, o, k;

  do {

    e = s[i];
    etc...

Hij geeft als foutmelding: 'e has no properties'. Dit snap ik niet, want s is toch gewoon een stuk DOM?

[ Voor 8% gewijzigd door BtM909 op 14-06-2007 20:35 ]

[Rekcor]

*schop* (zie mijn vorige reactie)

[Verwijderd]

Rekcor schreef op donderdag 14 juni 2007 @ 16:15:
*schop* (zie mijn vorige reactie)

Post anders ff de hele do-while want op basis van dit stuk kan ik niet zoveel zeggen...

[BtM909]

Sterker nog, waarom nou een oud topic schoppen als je gewoon een nieuwe kan maken en verwijzen naar het oude topic

[ Voor 6% gewijzigd door BtM909 op 14-06-2007 20:36 ]

[Rekcor]

BtM909 schreef op donderdag 14 juni 2007 @ 20:34:
Sterker nog, waarom nou een oud topic schoppen als je gewoon een nieuwe kan maken en verwijzen naar het oude topic

Eh... ik dacht dat het handig was om beide oplossingen in een thread te hebben?

Hier de code:

JavaScript:

function highlight()
{ 
  var h = document.createElement('SPAN'); 
  h.style.backgroundColor = '#ff0'; 

  var q = document.getSelection();   //get selected text      
  var s = q.getRangeAt(0);              //get range object of selected text

  var i = 0, e, j, l, o, k; 

  do { 

    e = s[i]; 
 
    if (e.nodeType == 3) { 

      r.lastIndex = 0; 
      l = r.exec(e.nodeValue); 
      if (l != null) { 
        k = l[0].length; 
        if (r.lastIndex > k) { 
          e.splitText(r.lastIndex-k); 
          e = e.nextSibling; 
        } 
        if (e.nodeValue.length > k) { 
          e.splitText(k); 
          s[i++] = e.nextSibling; 
        } 
        o = h.cloneNode(true); 
        o.appendChild(document.createTextNode(l[0])); 
        e.parentNode.replaceChild(o, e); 
      } 

    } else { 

      j = e.childNodes.length; 
      while (j) s[i++] = e.childNodes.item(--j); 

    } 

  } while(i--); 

} 

[funkwurm]

Een simpele google zoekactie leert ons dat document.getSelection() niet bestaat. Het is window.getSelection().

[ Voor 39% gewijzigd door funkwurm op 16-06-2007 23:28 ]

[Rekcor]

funkwurm schreef op zaterdag 16 juni 2007 @ 23:27:
Een simpele google zoekactie leert ons dat document.getSelection() niet bestaat. Het is window.getSelection().

Ik denk dat je zoekactie te simpel was, want document.getSelection() bestaat wel degelijk . Het verschilt per browser. Voor de zekerheid gebruik ik nu deze functie, met hetzelfde resultaat (nl. geen ).

JavaScript:

/**
 * function getSelection()
 * 
 * + returns currently selected text
 **/    
function getSelectedText()
{
    var txt = '';

    if (window.getSelection)
    {
        txt = window.getSelection();        
    }
    else if (document.getSelection)
    {
        txt = document.getSelection();      
    }
    else if (document.selection)
    {
        txt = document.selection.createRange();
    }
    else return;

  return txt;
}

[ Voor 4% gewijzigd door Rekcor op 16-06-2007 23:42 ]

[Rekcor]

Intussen ben ik ietsje verder gekomen. Wat ik nu doe is door alle childnodes van de selectie heen lopen en <span>-tags om de textnodes zetten.

Toch doet zich nog een vervelend probleem voor. Stel de gebruiker maakt de volgende selectie:

<p>Dit is paragraaf 1</p><h3>Kopje</h3><p>Dit is paragraaf 2</p>

Dan maakt de functie getRangeAt(0); er het volgende van:

<p>Dit is parag<p>raaf 1</p><h3>Ko</h3><h3>pje</h3><p>Dit is paragraaf 2</p>

Erg aardig natuurlijk, maar e.e.a. verknald wel mijn opmaak. Zie deze voorbeeldpagina.

Hoe los ik dit op?

De relevante code is:

JavaScript:

  /* function mark() gives the selection a red background */
  function mark()
  {
    if (window.getSelection)
    {
     var userSelection   = window.getSelection();
     var rangeObject     = userSelection.getRangeAt(0);;
     
     //extract the selection 
     oDocumentFragment = rangeObject.extractContents();
             
     //give all textnodes in document fragment a red background          
     setDomNodeBackgroundColor(oDocumentFragment, 'red');
     
     //re-insert the altered document fragment   
       rangeObject.insertNode(oDocumentFragment);       
    }
  }
  
  function setDomNodeBackgroundColor(oNode, sColor)
  {
    /* walk through all childnodes:
         - put a <span> around text nodes
         - reiterate this function for all other nodes
    */
    
    /* get childnodes */     
    var aoChildNodes = oNode.childNodes;
    var iLength      = aoChildNodes.length;
    
    for (i=0; i<iLength; i++)
    {
      var oChildNode = aoChildNodes[i];
      
      if (oChildNode.nodeType==3)
      {
        /* childnode is textnode, add span */
        setTextNodeBackgroundColor(oChildNode, sColor);
      }
      else
      {
        /* childnode is node, use this function again */
        setDomNodeBackgroundColor(oChildNode, sColor)
      } 
    }
  }
  
  function setTextNodeBackgroundColor(oTextNode, sColor)
  {
    if (oTextNode.nodeType==3)
    { 
      /* create a span with the same contents as the textnode */         
      oTextClone = document.createTextNode(oTextNode.data);
      
      oSpan = document.createElement('span');
      oSpan.style.backgroundColor = sColor;               
      oSpan.appendChild(oTextClone);
      
      /* replace the original textnode with the spanified one */
      oTextNode.parentNode.replaceChild(oSpan, oTextNode);
   }  
}  

[funkwurm]

Ik denk dat je oTextNode.data zal moeten opsplitsen in alle stukjes tekst zonder tag-chunk erin en op elke van die stukjes moet je de span replaceChild()'en.

[Rekcor]

Bedankt!

Ik heb nu een oplossing gevonden, en wel op http://www.geof.net/code/annotation/

[r0bert]

Is dat een oplossing of een alternatief?