Using Javascript Selection, Range and split()
This solution splits the entire block of text into lines, then splits the line into words. It first searches line by line for the cursor position, then, once the line if found, searches the line for the word containing the cursor. The larger the text block the more processing is required to find and highlight the target word. For a solution independent of text block size see my other answer.
Place cursor within any word, and click "GO". That word is returned for further processing, and highlighted. If the cursor is not placed in a word, or text is already selected, the block of text is not searched and the message "no cursor position" is returned.
To find the word, (a continuous string of characters without spaces), containing the cursor, the entire text block is split on spaces or line returns. This array is looped over searching for the cursor position. Once it is found the corresponding word in the array is returned, and then used to locate the word in the block of text, which is then highlighted.
// document.getElementById("btngo").addEventListener('click', function () { // vanilla
$(btngo).on('click', function(){
var sel = window.getSelection();
// get beginning and end of selection
let ao = sel.anchorOffset;
let fo = sel.focusOffset;
// make sure there is a cursor position but not a selected range
if ( 1 < fo && ao === fo ) {
// get node containing cursor
let fn = sel.focusNode;
// trim whitespace at beginning and end of block of text,
// then split on spaces into an array
let fn_arr = fn.textContent.trim().split(/\r?\n|\s/);
// loop array and search for cursor position
// when found use position to determine word in array containing cursor
let [strt,end,wrd] = fn_arr.reduce(function (acc, txt) {
return (fo > acc[1]) // have we reached the cursor position?
? [acc[1] + 1, acc[1] + txt.length + 1, txt] // if not keep track of location
: acc; // if so, keep returning location information
}, [0,0,""]);
console.log(wrd); // display word containing cursor
// select word containing cursor
let range = new Range();
range.setStart(fn, strt);
range.setEnd(fn, end);
sel.addRange(range);
}
else { console.log('no cursor position') }
});
.story{outline:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='story' id='story' contenteditable>
lorem - https://tumblr.com
more text to@select from
</div>
<br>
<button id='btngo'>GO</button>
For a LONG block of text, it can be searched line by line, then search only the line for cursor:
document.getElementById("btngo").addEventListener('click', function () {
var sel = window.getSelection();
// get beginning and end of selection
let [ao, fo] = [sel.anchorOffset, sel.focusOffset];
// make sure there is a cursor position but not a selected range
if ( 1 < fo && ao === fo ) {
// get node containing cursor
let fn = sel.focusNode;
// FIND LINE
// split on *line returns* into an array
let fn_arr = fn.textContent.trim().split(/\r?\n/);
// when found use position to determine *line* in array containing cursor
let [strt,end,wrd] = fn_arr.reduce(findCursor(fo), [0,0,""]);
// FIND WORD IN LINE
// split on *spaces* into an array
fn_arr = wrd.trim().split(' ');
// when found use position to determine *word* in array containing cursor
[strt,end,wrd] = fn_arr.reduce(findCursor(fo), [strt,strt-1,""]);
console.log(wrd); // display word containing cursor
// select word containing cursor
let range = new Range();
range.setStart(fn, strt);
range.setEnd(fn, end);
sel.addRange(range);
}
else { console.log('no cursor position')}
});
const findCursor = function (fo) {
return function (acc, txt) {
return (fo > acc[1]) // have we reached the cursor position?
? [acc[1] + 1, acc[1] + txt.length + 1, txt] // if not keep track of location
: acc; // if so, keep returning location information
}
}
