Text mit HTML- Quelltext ersetzen

[qwert2000]

Hallo,
ich bin gerade mit einem Script, dass Text auf einer Seite farblich hervorheben soll, beschäftigt. Bis jetzt habe ich einfach stupide den Inhalt eines gesamten Containers via "innerHTML" ausgelesen und dort mit regulären Ausdrücken Entsprechendes einfach ersetzt. Eine einfache, aber in keiner Weise sinnvolle und schöne Lösung, deswegen habe ich mich heute daran versucht, das Problem mit node-Objekten anders anzugehen, stecke jedoch nun bei dem Austausch der entsprechenden Daten  fest. Zu erst einmal die entsprechende Funktion:

replace: function(begriff, quelle ,color)
{
    var replacementRegEx=new RegExp('('+begriff+')','gi');

for(var i = 0; i < quelle.childNodes.length; i+=1)
    {
        switch(quelle.childNodes.item(i).nodeType)
        {
            case 1:
                this.replace(begriff, quelle.childNodes.item(i), color);
            break;

case 3:
                quelle.childNodes.item(i).data = quelle.childNodes.item(i).data.replace(replacementRegEx,'<span style="background-color:#'+color+';">$1</span>');
        }
    }
}

Wird nun der Begriff entsprechend ausgetauscht steht der HTML- Quellcode, sinnfrei, quasi "roh" im Dokument und bis jetzt ist es mir noch nicht gelungen das Problem zu lösen.

Ich befürchte mich nicht allzu klar ausgedrückt zu haben, doch vielleicht versteht ja jemand das Problem und kann helfen.

Vielen Danke für die schnelle Hilfe schon im Vorraus.

Gruß, qwert2000

[Struppi]

replace: function(begriff, quelle ,color)
{
    var replacementRegEx=new RegExp('('+begriff+')','gi');

for(var i = 0; i < quelle.childNodes.length; i+=1)
    {
        switch(quelle.childNodes.item(i).nodeType)
        {
            case 1:
                this.replace(begriff, quelle.childNodes.item(i), color);
            break;

case 3:
                quelle.childNodes.item(i).data = quelle.childNodes.item(i).data.replace(replacementRegEx,'<span style="background-color:#'+color+';">$1</span>');
        }
    }
}

.data ist ein Textknoten, d.h. dort wird kein HTML interpretiert. Du hast nur zwei Möglichkeiten, entweder du musst die entsprechenden Elemente erzeugen mit createElement oder du benutzt innerHTML.

Struppi.

[qwert2000]

replace: function(begriff, quelle ,color)
{
    var replacementRegEx=new RegExp('('+begriff+')','gi');

for(var i = 0; i < quelle.childNodes.length; i+=1)
    {
        switch(quelle.childNodes.item(i).nodeType)
        {
            case 1:
                this.replace(begriff, quelle.childNodes.item(i), color);
            break;

case 3:
                quelle.childNodes.item(i).data = quelle.childNodes.item(i).data.replace(replacementRegEx,'<span style="background-color:#'+color+';">$1</span>');
        }
    }
}

.data ist ein Textknoten, d.h. dort wird kein HTML interpretiert. Du hast nur zwei Möglichkeiten, entweder du musst die entsprechenden Elemente erzeugen mit createElement oder du benutzt innerHTML.

Struppi.

Hallo,
Danke für die fixe Antwort, doch leider habe ich auch das bereits versucht, doch immer ich data mit einem "innerHTML" ersetze bekomme ich folgende Fehlermeldung:

Error: quelle.childNodes.item(i).innerHTML has no properties
Line: 88

Auch die zweite Möglichkeit ist mir bekannt, doch muss ich gestehen, ich hatte eine Lösung in der Richtung bereits angedacht, dass mir diese Methode nicht so sehr geläufig ist, dass ich in der Lage wäre damit das Problem zu lösen, wo sie mir aber doch eigentlich die liebste wäre. Könnt ihr helfen?

Nochmal Dank und  Gruß, qwert2000

[Thomas Meinike]

Hallo,

... doch immer ich data mit einem "innerHTML" ersetze bekomme ich folgende Fehlermeldung:

Error: quelle.childNodes.item(i).innerHTML has no properties
Line: 88

innerHTML ist bei Elementknoten (nodeType --> 1) angesiedelt und nicht bei Textknoten (nodeType --> 3).

MfG, Thomas