单击即可获取单词

Question

在 HTML 文档中，如何通过单击获取单词？

例如，如果我有这个：

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

我希望能够单击 word div 中的任何单词并无需选择即可获取它。也许使用 JQuery 可以实现这一点吗？

Answer 1

您想说点击文本块中的某个单词会提醒您该特定单词？如果是，那么这里是适合您的 js fiddle：

$("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>

这是一个类似的 Stackoverflow 问题，可能会对您有很大帮助：

检测文本中哪个单词被点击

希望这有帮助。

Answer 2

也许这个可以帮助某人：

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>