[JS] Geselecteerde tekst markeren in p/div

[Rekcor]

Is het mogelijk om met Javascript tags te zetten rondom de geselecteerde tekst in een paragraaf of div?

Ik weet hoe je de huidige selectie moet krijgen (met dank aan www.quirksmode.org)

JavaScript:

function getSel()
{
    var txt = '';
    var foundIn = '';
    if (window.getSelection)
    {
        txt = window.getSelection();        
    }
    else if (document.getSelection)
    {
        txt = document.getSelection();
    }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
    }
    else return;

return txt;
}

maar onderstaande code werkt niet, want de geselecteerde tekst (hier sText) heeft geen parentNode:

JavaScript:

function markeer()
{
  var sText = getSel();
  
  oSpan = document.createElement("span");
  oSpan.innerHTML = sText;

  sText.parentNode.replaceChild(oSpan, sText);
}

Op internet vind ik wel voorbeelden, edoch die gaan allemaal over tekst in een textarea...

[ Voor 6% gewijzigd door Rekcor op 03-04-2007 16:17 . Reden: code cleanup ]

[akaIDIOT]

Wat wil je hiermee doen na de tags omgevoegd te hebben? Als het gaat om anders stylen kan je dit ook met CSS oplossen:

Cascading Stylesheet:

::selection {
    background-color: red;
}

Geloof dat er ook een -moz-selection zin in FF, maar het verschil daarmee weet ik zo niet... (hoop dat dit je bedoeling was )

[Rekcor]

akaIDIOT schreef op dinsdag 03 april 2007 @ 15:24:
Wat wil je hiermee doen na de tags omgevoegd te hebben? Als het gaat om anders stylen kan je dit ook met CSS oplossen:

Cascading Stylesheet:

::selection {
    background-color: red;
}

Geloof dat er ook een -moz-selection zin in FF, maar het verschil daarmee weet ik zo niet... (hoop dat dit je bedoeling was )

Het gaat erom dat de gebruiker stukken tekst blijvend kan markeren. Ik gebruik een popupje onder de rechtermuisknop 'Markeer tekst'.

De document.selection.createRange().text kun je trouwens gewoon veranderen. Alleen wil ik niet de text veranderen, maar de htmlText. En die is read-only .

[ Voor 12% gewijzigd door Rekcor op 03-04-2007 15:44 ]

[Rekcor]

In IE heb ik het nu werkend:

JavaScript:

function markeer()
{
  txt = getSel();
  txt.pasteHTML("<span style='background-color: yellow;'>" + txt.htmlText + "</span>");
}

Heb geen FF hier, dus kan het daar niet in testen.

[Verwijderd]

En wat als je nou in het volgende stukje HTML de tekst "Hallo, selecteer mij" selecteert?

HTML:

Hallo, <em>selecteer <strong>mij</strong> niet.</em>

[Rekcor]

Verwijderd schreef op dinsdag 03 april 2007 @ 17:33:
En wat als je nou in het volgende stukje HTML de tekst "Hallo, selecteer mij" selecteert?

HTML:

Hallo, <em>selecteer <strong>mij</strong> niet.</em>

Werkt prima. He, je hebt wel meer nodig om mijn superscript te verslaan!

[Rickets]

Rekcor schreef op dinsdag 03 april 2007 @ 20:04:
Werkt prima. He, je hebt wel meer nodig om mijn superscript te verslaan!

Je HTML klopt dan waarschijnlijk niet meer:

HTML:

<span style='background-color: yellow;'>
   Hallo, <em>selecteer <strong>mij</strong>
</span>
 niet.</em>

[Rekcor]

Ok. Maar dat vind ik eerlijk gezegd niet zo'n ramp.

HTML:

<span style='background-color: yellow;'> 
   Hallo, <em>selecteer <strong>mij</strong> 
</span> 
 niet.</em>

zou dan moeten worden:

HTML:

<span style='background-color: yellow;'> 
   Hallo, <em>selecteer <strong>mij</strong></em> 
</span> 
<em>niet.</em>

Het is wel netter, maar we moeten niet te puristisch worden.

Bovendien vind ik dit eerlijk gezegd een zwakte van XML als opmaaktaal. Oplossing 1 is mijns bescheidens inziens duidelijk en op maar 1 manier uit te leggen, waardoor oplossing 2 helemaal niet nodig is.

[Rickets]

Rekcor schreef op woensdag 04 april 2007 @ 10:13:
Het is wel netter, maar we moeten niet te puristisch worden.

Bovendien vind ik dit eerlijk gezegd een zwakte van XML als opmaaktaal. Oplossing 1 is mijns bescheidens inziens duidelijk en op maar 1 manier uit te leggen, waardoor oplossing 2 helemaal niet nodig is.

Dat gaat op zich wel, maar wat als iemand in een tabel tekst gaat selecteren? Dan wordt niet alleen de HTML ongeldig, maar sloopt dat de hele structuur van de tabel. (En dus ook hoe het er uit ziet.) (Niet getest overigens, maar dat vermoed ik.)

Ik denk dat je beter de nodes van de huidige selectie kan doorlopen op zoek naar textnodes, om die vervolgens in een span te zetten. Misschien kan je wat code of ideeën uit dit topic gebruiken.

[Rekcor]

Thanx Rickets, die link is zzzoeper!