Ich zeige einen einfachen formatierten Text als HTML in einem UIWebView auf dem iPhone. Es ist im Grunde eine Reihe von Absätzen mit der gelegentlichen starken oder hervorgehobenen Phrase. Zur Laufzeit muss ich Stile auf Textbereiche anwenden.
Es gibt ein paar ähnliche Szenarien, von denen eines die Suchergebnisse hervorhebt. Wenn der Benutzer nach "etwas" gesucht hat, möchte ich die Hintergrundfarbe hinter den Vorkommen des Wortes ändern und später den ursprünglichen Hintergrund wiederherstellen.
Ist es möglich, Stile mit JavaScript auf Textbereiche anzuwenden? Ein wichtiger Teil davon ist auch in der Lage, die Stile zu deaktivieren.
Es scheint zwei mögliche Wege zu geben. Man würde etwas HTML in Objective-C ändern und es über Javascript als das neue innerHTML eines Containers übergeben. Der andere wäre, Javascript zu verwenden, um DOM-Knoten direkt zu manipulieren.
Ich könnte HTML manipulieren, aber das hört sich in Objective-C mühsam an, also würde ich lieber das DOM manipulieren, wenn das ein vernünftiger Ansatz ist. Ich bin nicht so vertraut mit Javascript und DOM, so dass ich nicht weiß, ob es ein vernünftiger Ansatz ist.
Ich habe einige Routinen geschrieben, um zwischen Textbereichen und Knotenbereichen mit Offsets zu übersetzen. Wenn ich also mit dem Textbereich 100-200 anfange und das in einem Absatz beginnt und in einem dritten endet, kann ich die Textknoten und die Offsets innerhalb der Knoten erhalten, die den gegebenen Textbereich darstellen. Ich brauche nur einen Weg, um einen Textknoten an einem Offset im Text zu teilen. Zur Zeit wende ich nur Stile auf die Absätze an, die den Textbereich enthalten.
Einige Anmerkungen:
Danke für Anregungen.
Ich denke, Sie verlangen viel, um eine komplette Lösung dafür zu bekommen, aber es schien interessant, also habe ich es implementiert. Folgendes funktioniert in aktuellen WebKit-Browsern, einschließlich Safari auf dem iPhone mit OS 3.0. Es verwendet die nicht standardmäßige, aber bequeme Methode intersectsNode von Range , die in WebKit vorhanden ist, aber in Firefox aus Firefox entfernt wurde. Daher funktioniert sie in neueren Firefox-Versionen nicht, könnte aber trivial gemacht werden.
Im Folgenden wird jeder ausgewählte Textknoten mit einem <span> -Element mit einer Klasse "someclass" und einer eindeutigen Klasse umgeben, um ein einfaches Rückgängigmachen zu ermöglichen. applyClassToSelection gibt diese eindeutige Klasse zurück; Übergeben Sie diese Klasse in removeSpansWithClass , um die Bereiche zu entfernen.
UPDATE: Problem behoben, wenn die Auswahl vollständig in einem einzelnen Textknoten enthalten ist
UPDATE 2: Jetzt getestet und funktioniert auf dem iPhone unter OS 3.0.
UPDATE 3: Funktion rangeIntersectsNode hinzugefügt, um Unterstützung für Firefox 3.0 und höher hinzuzufügen. Dieser Code sollte jetzt in Firefox 1.0+, Safari 3.1+, Google Chrome, Opera 9.6+ und möglicherweise anderen (bisher nicht getesteten) funktionieren. Es funktioniert überhaupt nicht im Internet Explorer und gibt Fehler in diesem Browser. Ich werde bald an einer IE-Version arbeiten.
Tags und Links javascript html css iphone uiwebview