Word count bookmarklet

Question

I'm trying to create a word count (for any page) bookmarklet without loading an external file. In short I want to click the bookmarklet and then be able to drag and select text on the screen and get an alert with the number of words selected. I have put this together to get the correct functionality but am stumbling on converting to bookmarklet:

<html>
<body onmouseup="countWords()">     
<article id="page1">
    <h1>Home 2</h1>
    <p>Welcome 2</p>
    <script type="text/javascript">
function countWords() {
var selectedText = document.activeElement;
var selection = selectedText.value.substring(selectedText.selectionStart, selectedText.selectionEnd);
words = selection.match(/[^\s]+/g).length;
if (words !== "") {
    alert(words);
}
}
</script>
    <div><textarea></textarea></div>
</article>
</body>
</html>

First issue: I may be barking up the wrong tree but I wanted to attach the onmouseup to the activeElement but am at a loss as to how to do this.

Second issue: Can I insert this in a bookmarklet without the use of an external file?

Any assistance would be greatly appreciated.

Best,

Tamler

Escape characters... That was the issue.

Here is a working example:

<a href="javascript:(document.onmouseup=function(){var selectedText=document.activeElement;var selection=selectedText.value.substring(selectedText.selectionStart,selectedText.selectionEnd);words=selection.match(/[^\s]+/g).length;if(words!==&quot;&quot;){alert(words)}})();" target="_blank">Word Count</a>

Your code should not be able to run because selectedTextArea is not defined. — epascarello, Oct 19 '12 at 13:23
I tried to simplify and needed to clean it up. Above code should work now. — Tamler, Oct 19 '12 at 13:31
http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html — mplungjan, Oct 19 '12 at 13:33
@Tamler: OK, but is it a personal bookmarklet only you would use only in Chrome, or should it work in other browsers too? — Bergi, Oct 19 '12 at 13:54
To keep it simple for now, Chrome only. Eventually I'd move to more, but there is a limit to the size of bookmarklets. And not to mention initial complexity so I can learn from a simple example. — Tamler, Oct 19 '12 at 13:59
I tested this against the bookmarklet found here http://marklets.com/Word%20Count.aspx. The results are way off. — Faiz, Nov 08 '16 at 04:48

Cecchi · Accepted Answer · 2012-10-19T17:18:29.613

Try this, it looks like your code is a bit convoluted:

alert(window.getSelection().toString().match(/\w+/g).length);

The first part, window.getSelection().toString() will get the actual selected text. The last part is a basic regular expression to match every word, and then count the matches. You could modify the regex to be more or less lenient to fit your needs.

This will simply alert the number of words already selected, if you wanted to make the selection after hitting the bookmarklet you could wrap the above in a function that listens for a window mouseup event.

Edit: Here's a full-fledged example bookmarklet:

<a href="javascript: _wcHandler = function() { var _wcSelection, _wcCount; ((_wcSelection = window.getSelection().toString().match(/[^\s]+/g)) && (_wcCount = _wcSelection.length) && (window.removeEventListener('mouseup', _wcHandler) || alert(_wcSelection.length))); }; window.addEventListener('mouseup', _wcHandler);">Word Count</a>

... and written in a readable format:

_wcHandler = function() {
    var _wcSelection, _wcCount; 
    ((_wcSelection = window.getSelection().toString().match(/[^\s]+/g)) 
     && (_wcCount = _wcSelection.length) 
     && (window.removeEventListener('mouseup', _wcHandler) 
         || alert(_wcCount))); 
}; 
window.addEventListener('mouseup', _wcHandler);

And lastly, a jsFiddle for you to tinker with: http://jsfiddle.net/Rr2KU/1/

`/\w+/` doesn't match umlauts etc. I'd recommend to use `/\S+/g` — Bergi, Oct 19 '12 at 13:52
Thank you for the simplified code example, but it doesn't work in the same way as the example above nor does it address my stated issues. — Tamler, Oct 19 '12 at 13:54
I've edited my answer with an actual functional bookmarklet. Do you need to have the mouseup listener attached to the `activeElement` or is a window-level event listener acceptable? It would be relatively trivial to edit my code to use the `activeElement` only. — Cecchi, Oct 19 '12 at 17:25

score 1 · Answer 2 · answered Oct 19 '12 at 14:35

I may be barking up the wrong tree but I wanted to attach the onmouseup to the activeElement but am at a loss as to how to do this.

Attach it to document. document.onmouseup = countWords or document.onmouseup = function(){...}

Can I insert this in a bookmarklet without the use of an external file?

Yes:

javascript:document.onmouseup=function(){var selectedText=document.activeElement;var selection=selectedText.value.substring(selectedText.selectionStart,selectedText.selectionEnd);words=selection.match(/[^\s]+/g).length;if(words!==""){alert(words)}}

http://www.google.com/search?q=bookmarklet+generator

But I used: http://javascriptcompressor.com/

Word count bookmarklet

2 Answers2