Home >Web Front-end >JS Tutorial >How can I detect which word within a block of text has been clicked using JavaScript and Browser APIs?
Detecting Clicked Word in Text with JavaScript and Browser APIs
The problem involves detecting which word has been clicked within a text on a webpage and storing it in a variable. While a previous solution involved adding individual class elements for each word and using jQuery to capture clicks, it proved inefficient and visually unappealing.
Improved JavaScript Solution
A more efficient solution leverages browser selection capabilities:
.
<code class="javascript">$(".clickable").click(function(e) { s = window.getSelection(); var range = s.getRangeAt(0); var node = s.anchorNode; // Find starting point while (range.toString().indexOf(" ") != 0) { range.setStart(node, range.startOffset - 1); } range.setStart(node, range.startOffset + 1); // Find ending point do { range.setEnd(node, range.endOffset + 1); } while ( range.toString().indexOf(" ") == -1 && range.toString().trim() != "" ); // Alert result var str = range.toString().trim(); alert(str); });</code>
Browser API Solutions
If JavaScript alone proves insufficient, consider leveraging browser APIs:
Extending Functionality with a Browser Extension
If necessary, you can develop a browser extension to enhance the functionality:
By combining JavaScript and browser APIs, you can effectively create a user-friendly interface where users can click on words within text and store the clicked word in a variable.
The above is the detailed content of How can I detect which word within a block of text has been clicked using JavaScript and Browser APIs?. For more information, please follow other related articles on the PHP Chinese website!