1

enter image description here

I highlighted WebView contents and I did unhighlighted text. I'm able to select particular words when I long press and drag in WebView contents that time area is selected for unhighlighted.

But now problem is this when I touch any where in WebView colour text I want to get complete colour span.

Please help me.

sKhan
  • 9,694
  • 16
  • 55
  • 53
  • How did you achieve the WebView highlighting feature? Is it by sending javascript to the underlying html to alter its style? – chubao Mar 14 '16 at 12:56
  • If so, you may consider using the [rangy](https://github.com/timdown/rangy/wiki) library to achieve this. – chubao Mar 14 '16 at 13:02
  • Yes,I'm using javascript to get selected text range starting and ending point.I also used rangy.but my client is saying i want when i touch any word in highlighted content then i want complete colour text selected not a particular word.How can i do – Rakesh kumar Mar 14 '16 at 13:15
  • but in this rangy is not working in unhighlighted functionality. – Rakesh kumar Mar 14 '16 at 13:17
  • var removeHighlightFromSelectedText = function(event) { if (highlightTextToBeRemoved) { highlighter.removeHighlights( [highlightTextToBeRemoved] ); var containts = { texts: highlighter.serialize() }; highlightTextToBeRemoved=''; } }; this method not working. – Rakesh kumar Mar 14 '16 at 13:18
  • I used rangy to unhighlight before, please check my code segment below to see if it helps: – chubao Mar 14 '16 at 13:32
  • function unhighlightSelection() { // refer from removeHighlights() in rangy-highlighter.js for (var i = 0, len = _highlighter.highlights.length, highlight; i < len; ++i) { highlight = _highlighter.highlights[i]; // console.log(highlight.toString()); if (_highlightUnderSelection.getRange().equals(highlight.getRange())) { highlight.unapply(); _highlighter.highlights.splice(i--, 1); } } } – chubao Mar 14 '16 at 13:33
  • if i put this method in .js file. it remove all highlighter text – Rakesh kumar Mar 15 '16 at 04:10
  • i don't want to remove complete . i need to remove only that highlighter paragraph related to my selection. – Rakesh kumar Mar 15 '16 at 04:21

1 Answers1

0

I have written the below snippets before which may be useful to you.

// this function only check if the selection is spanned across the highlighted span
function shouldSelectText() {
    // http://stackoverflow.com/a/6056743/510577
    var sel = rangy.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        var nodes = range.getNodes([1], function(node) {
            return node.tagName.toLowerCase() == "span"; // only need to satisfy one of open / close "span" tag, so no need to use "containsNode"
        });

        return (nodes.length <= 0);
    }
    return false;
}
  1. shouldSelectText in my case is invoked during - (BOOL)canPerformAction:(SEL)action withSender:(id)sender of the web view to check whether the webview should expand the highlight under selection.

    // the return value indicates whether it is highlighted before
    function selectHighlight() {
        var sel = rangy.getSelection();
        if (sel.rangeCount > 0) {
            // console.log("has selection!");
    
            if (_highlighter.getHighlightsInSelection().length <= 0) {
                return false; // do nothing if it is not highlighted before
            }
            // else the selection is highlighted, so we expand it to select the whole highlight
            window.requestAnimationFrame(function() {
                var range = rangy.createRange();
                range = _highlighter.getHighlightsInSelection()[0].getRange(); // use non-disclosed private API of rangy highlighter!
                sel.setSingleRange(range);
    
                _highlightUnderSelection = _highlighter.getIntersectingHighlights(rangy.getSelection().getAllRanges())[0]; // must be the first one
            });
    
            return true;
        }
        return false;
    }
    
  2. if shouldSelectText returns true, then you may use selectHighlight to expand the highlight under selection.

P.S. you need to make use of stringByEvaluatingJavaScriptFromString of UIWebView to call the above JS from the native side

chubao
  • 5,871
  • 6
  • 39
  • 64