Get Word Under Tap from Uiwebview Using JavaScript

How to get word under cursor?

Well, no magic tricks so far, so here is the dull boring (and yet working) solution:

  $(document.body).mousemove(function(e){

    var onmousestop = function() {
      function getHitWord(hit_elem) {
        var hit_word = '';
        hit_elem = $(hit_elem);

        //text contents of hit element
        var text_nodes = hit_elem.contents().filter(function(){
          return this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/[a-zA-Z]{2,}/)
        });

        //bunch of text under cursor? break it into words
        if (text_nodes.length > 0) {
          var original_content = hit_elem.clone();

          //wrap every word in every node in a dom element
          text_nodes.replaceWith(function(i) {
            return $(this).text().replace(/([a-zA-Z-]*)/g, "<word>$1</word>")
          });

          //get the exact word under cursor
          var hit_word_elem = document.elementFromPoint(e.clientX, e.clientY);

          if (hit_word_elem.nodeName != 'WORD') {
            console.log("missed!");
          }
          else  {
            hit_word = $(hit_word_elem).text();
            console.log("got it: "+hit_word);
          }

          hit_elem.replaceWith(original_content);
        }

        return hit_word;
      }

      var hit_word = getHitWord(document.elementFromPoint(e.clientX, e.clientY));
      ...
    }
  }

There are few other subtleties involved (like event 'noise reduction', keeping replaced dom context (such as selection) and so forth), but you get the idea.

Here you can learn how set up mousestop event.

EDIT:

Making custom html elements may not be that strait forward in IE (who would have thought?). Check out more here.

Word on HTML document point, using UIWebView, DOM and Javascript

I am not sure how you would get the exact word, but, I believe you can get the text in an element iterating through it's children and looking for elements with nodeType 3 which is text.

Convert location of tap in UIWebView into the character tapped

I figured out how to do it, based on this question.

In the viewController that is loaded with the UITextView, I pass an attribute called pointForCursor that's a CGPoint with the X and Y as mentioned above.

Then in viewWillAppear, I run the following:

if (self.pointForCursor.x > 0) {
        NSLog(@"Should have point for cursor");
        UITextPosition *position=[noteTextView closestPositionToPoint:pointForCursor];
        [noteTextView setSelectedTextRange:[noteTextView textRangeFromPosition:position toPosition:position]];
}

NOTE: My UIWebView and this UITextView use the same size font, so there weren't any concerns there.

Get word under mouse pointer

You need the parentheses that appear in the original regular expression. In regular expression notation, parentheses form a "match group" which is substituted in for the "$1" in the replace string.

$this.html($this.text().replace(/([^\x00-\x80]+)/g, "<span>$1</span>"));

Without any match groups in your regex, the $1 is simply treated as a literal dollar sign and one.

When you have multiple parenthesized match groups, the groups are used in to replace dollar-sign-denoted numbered placeholders in the order that the match groups are opened (the first match group replaces $1, the second replaces $2, etc).

Detect text selection changes in UIWebView text selection

You can use document.addEventListener("selectionchange") which fires whenever the selection changes, and forward those changes to Obj-C through a bridge.

Bridges:

1. WebViewJavascriptBridge
2. JavaScriptCore

Example Code:

document.addEventListener("selectionchange", function(){
    bridge.send("selectionchange"); // WebViewJavaScriptBridge
    bridge.selectionChanged();  // JavaScriptCore
}, false);

I can't find a way to simulate a click/tap with WKWebView and Java Script

You have to add a [0] or where ever the tag is to the code

webView.evaluateJavaScript("document.getElementsByTagName('button')[0].click()", completionHandler: nil)

---

Related Topics