惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Engineering at Meta
Engineering at Meta
博客园_首页
H
Help Net Security
WordPress大学
WordPress大学
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
B
Blog
I
InfoQ
SecWiki News
SecWiki News
T
Tailwind CSS Blog
Spread Privacy
Spread Privacy
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
Vulnerabilities – Threatpost
N
Netflix TechBlog - Medium
P
Palo Alto Networks Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Vercel News
Vercel News
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
K
Kaspersky official blog
M
MIT News - Artificial intelligence
S
Schneier on Security
T
Threat Research - Cisco Blogs
F
Fortinet All Blogs
Cyberwarzone
Cyberwarzone
Scott Helme
Scott Helme
aimingoo的专栏
aimingoo的专栏
Martin Fowler
Martin Fowler
MyScale Blog
MyScale Blog
The Cloudflare Blog
Recent Announcements
Recent Announcements
Security Latest
Security Latest
G
GRAHAM CLULEY
IT之家
IT之家
Y
Y Combinator Blog
The Last Watchdog
The Last Watchdog
腾讯CDC
Google DeepMind News
Google DeepMind News
V
V2EX
S
Securelist
TaoSecurity Blog
TaoSecurity Blog
B
Blog RSS Feed
S
SegmentFault 最新的问题
博客园 - 叶小钗
P
Proofpoint News Feed
云风的 BLOG
云风的 BLOG
Project Zero
Project Zero
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
F
Full Disclosure

Gary' Blog

Migrate pip to uv - Gary' Blog Terminal autocomplete (only macOS and Linux) How to expand the hard disk capacity of Debian/Ubuntu in ESXi Authentication FastAPI with Keycloak - Gary' Blog Keycloak configuration problems and solutions Careers and LinkedIn Jobs Page of Fortune 500 American Companies How to connect Windows desktop remotely using RDP and cloudflare ZeroTrust tunnel ESXi 8 issue solved: This PC can’t run Windows 11 How to download and license ESXi 8?
Get clicked word using pure Javascript
Gary · 2024-10-03 · via Gary' Blog

On browser, if we want to get the clicking word we can use following Javascript:

var captureWordOnClick = function(containerEl, callback) {
    containerEl.addEventListener('click', function (event) {
        // Get the mouse position relative to the clicked element
        const x = event.clientX;
        const y = event.clientY;

        // Get caret position at the point of click
        const caretPosition = document.caretPositionFromPoint(x, y);

        // If the click is on text, the offsetNode should be a text node
        if (caretPosition && caretPosition.offsetNode.nodeType === Node.TEXT_NODE) {
            // Get the full text where the click happened
            const fullText = caretPosition.offsetNode.nodeValue;

            // Get the clicked word by splitting text around the clicked character
            const offset = caretPosition.offset;
            const words = fullText.split(' ');

            // Find which word was clicked by checking the offsets
            let charCount = 0;
            for (let word of words) {
                if (offset <= charCount + word.length) {
                    // Clean the word by removing punctuation at the end
                    const cleanedWord = word.replace(/[.,!?;:"]+$/, '');
                    callback(cleanedWord);
                    break;
                }
                charCount += word.length + 1; // +1 for spaces
            }
        }
    });
};

Usage:

captureWordOnClick(
    document.getElementById('post-content'),
    (w) => {console.log(w);}
)

The callback function will receive the word and you can handle it it callback function.