CODEWITHSUNDEEP
javascripthtmldynamicbookmarklet
Tamler
Tamler

Reputation: 130

Word count bookmarklet

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>

Upvotes: 0

Views: 1093

Answers (2)

Cecchi
Cecchi

Reputation: 1535

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/

Upvotes: 1

DG.
DG.

Reputation: 3517

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/

Upvotes: 1

Related Questions