Get a word by single click

Question

In an HTML document, how do I get a word with a single click?

For instance if I have this:

<div id = "word">
    hello world
</div>

I'd like to be able to click any word within the word div and get it without selection. Would this be possible using JQuery, perhaps?

Answer 1

You want to say clicking on a word in a block of text alerts you that specific word?? If yes then here is the js fiddle for you:

$("body").click(function() {
  var s = window.getSelection();
  s.modify('extend', 'backward', 'word');
  var b = s.toString();

  s.modify('extend', 'forward', 'word');
  var a = s.toString();
  s.modify('move', 'forward', 'character');
  alert(b + a);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis
  ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu,
  consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis, est eu pulvinar suscipit, nisl neque
  commodo dui, eu bibendum velit leo vel tortor. Nulla eget mauris et libero gravida malesuada. Sed at massa gravida diam rhoncus condimentum. Duis nulla turpis, faucibus vel luctus et, gravida condimentum ante. Integer tincidunt lacus in ante pharetra
  vitae auctor ipsum malesuada. Phasellus nunc mauris, ultrices quis ultrices a, ultricies fermentum eros. Curabitur non diam et tellus bibendum pellentesque ac vel eros. Nullam varius turpis non est viverra viverra. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Quisque consectetur, tortor eget viverra laoreet, eros ante lobortis massa, eu molestie nisl mi non urna. Fusce vehicula tincidunt porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  Fusce ac arcu faucibus tellus eleifend blandit. Donec quis massa odio, in hendrerit lacus. Proin a dolor massa. Aenean urna nunc, mattis vel euismod sit amet, accumsan quis elit. Fusce sit amet odio diam. Curabitur ipsum enim, eleifend et aliquam non,
  laoreet ac est. Maecenas cursus mauris eu sapien consequat consequat. Curabitur commodo euismod arcu non condimentum. Proin quis libero vitae arcu pretium porttitor. Ut sapien tellus, fermentum sit amet scelerisque ut, tincidunt vel nisl. Nam sed urna
  sapien. Donec molestie sodales dui, in consequat risus ultricies a. Sed vestibulum aliquam consequat. Nulla facilisi. Sed congue, nulla a semper consectetur, libero elit semper orci, id feugiat magna odio eget nibh. Suspendisse semper faucibus dui,
  hendrerit facilisis nunc sodales sed. Integer a diam vitae massa congue commodo volutpat sed dui. Phasellus sed leo nisi, bibendum eleifend mi. Suspendisse pulvinar iaculis venenatis. Mauris ultricies commodo luctus. Quisque malesuada risus nec risus
  accumsan a condimentum nunc lobortis. Nam tristique fringilla augue sed eleifend. Sed in velit quis sem porta malesuada. In eget imperdiet justo. Ut faucibus laoreet nunc eu convallis. Aenean in augue eget justo pellentesque faucibus. Maecenas adipiscing,
  augue at venenatis sollicitudin, nisl tortor semper est, sit amet imperdiet ligula ante non tortor. Suspendisse in facilisis risus. Integer massa mauris, porttitor ut molestie non, vestibulum vitae massa. Sed feugiat euismod congue. Cras ornare dictum
  sapien non ultricies. Etiam sollicitudin tortor id massa convallis luctus. Nam feugiat ligula sed lectus scelerisque auctor. Donec at dolor urna. Pellentesque fermentum faucibus viverra. Nam vehicula pharetra ultricies. Sed ultrices tortor ut felis
  dapibus sit amet pulvinar nibh bibendum. Praesent gravida tincidunt tellus, eget congue nibh posuere varius. Nullam vel nisl bibendum nulla tempus lobortis posuere id lectus. Integer dapibus neque tincidunt arcu ornare ultricies. Ut erat arcu, blandit
  vel facilisis non, bibendum id quam. Donec semper nisi sit amet tortor commodo non tincidunt ligula lacinia. Proin luctus lobortis enim quis porttitor. Cras porta nisl nec nunc tristique sagittis. Donec condimentum accumsan leo. Ut sit amet tempus urna.
  Nunc eget luctus augue. Ut tristique dui non lectus auctor tempus. Nullam sed erat metus. Curabitur at nibh et mi tempor aliquet id iaculis justo. Morbi vulputate porttitor felis eu lobortis. Nunc faucibus convallis consectetur. Proin at est velit.
  Morbi placerat scelerisque ante, a faucibus purus posuere in. Mauris et lorem odio, eu ullamcorper nisl. Aenean quis nisl ac metus feugiat ullamcorper. Aliquam ultrices scelerisque nisi sed pellentesque. Nam laoreet semper tempor. Etiam hendrerit vehicula
  adipiscing. Donec ultricies cursus neque a cursus. Vestibulum massa tortor, luctus quis eleifend sed, laoreet ac enim. In nec enim eu ante euismod pellentesque. Morbi id arcu nisi. Pellentesque a neque sed tortor mattis tempor. Proin fringilla convallis
  diam, ac fermentum orci aliquet quis. Suspendisse eget ullamcorper tellus. Proin sit amet libero pellentesque sem cursus aliquet ut non arcu. Mauris id elementum tellus. Cras fringilla egestas nisi, sit amet cursus dui aliquet nec. Sed viverra bibendum
  nisl, ac condimentum urna sollicitudin at. Duis congue, nunc quis pretium volutpat, risus eros pharetra tortor, quis mattis elit risus at eros. Sed volutpat consectetur ligula sed mollis. In nisi tortor, congue a faucibus nec, aliquam eget ligula. Phasellus
  malesuada lectus et odio molestie faucibus. Nullam rhoncus, neque in ullamcorper auctor, mauris orci adipiscing velit, et convallis nisi libero vel lectus. Etiam lacus felis, congue non congue ut, imperdiet in eros. Curabitur lacinia, eros quis porta
  aliquam, orci velit rhoncus diam, et bibendum arcu neque et purus. Sed lobortis malesuada fermentum. In arcu lacus, congue ac dignissim et, pulvinar nec quam.
</p>

and here is a similar Stackoverflow question which may help you alot:

Detect which word has been clicked on within a text

Hope this helps.

Answer 2

May be this one can help someone:

function splitToSpans(element) {
  if ($(element).children().length)
    return;
  var arr = new Array();
  $($(element).text().split(' ')).each(function() {
    arr.push($('<span>' + this + ' </span>'));
  });
  $(element).text('');
  $(arr).each(function() {
    $(element).append(this);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv" onmouseover="splitToSpans(this)" onclick="alert(event.target.innerHTML)">This is a test paragraph. I love cats. Please apply here</div>