Search⌘ K
Home
Courses
Intermediate JavaScript: Building Frontend Components

Alternative Approach to find the Middle

Explore how to use the JavaScript range property to accurately find the position of text, a critical step in building interactive tooltips. Understand the value of knowing the right tools, evolving web standards, and practical debugging techniques in frontend development.

We'll cover the following...

The range property

Our previous attempt of wrapping the text we want in a span and getting the position of the span didn’t work. Time to Google for another lead. Searching for “get position of text”, I find a range property which I saw in the getSelection API but hadn’t paid attention to.

Javascript (babel-node)
document.onmouseup = () => {
  const selection = document.getSelection();
  console.log(selection);
  const anchorNode = selection.anchorNode;
  const focusNode = selection.focusNode;
  if (anchorNode != focusNode) {
    // Cross-paragraph selection
    return;
  }
  
  const selectedText = anchorNode.data.substring(selection.anchorOffset, selection.focusOffset);
  console.log(selection.getRangeAt(0).getClientRects());
}
widget

Ah, this is exactly what we need! Sometimes we do extra work trying to use the tools we’re familiar with. Part of being an experienced frontend engineer is just knowing what exists. As you progress, you gain valuable intuition about what’s possible and what’s impossible, what tasks are straightforward, and which are minefields (ahem- CSS animations), which solutions degrade the user experience and which solutions are cheap on CPU, and then some. This ...