Retrieving a compilation of items found within text selected by the user on a website

Question

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure:

 <p>
 <span class="1">Here's some text</span>
 <span class="2">that the user</span>
 <span class="3">could select.</span>
 </p>

If a user decides to select the entire sentence (from "Here's" to "select."), the desired output should be "1" and "3".

In cases where only a portion of the sentence is highlighted (e.g., from "some" in span 1 to "the" in span 2), the expected return values are "1" and "2".

Is there an optimal method or strategy that can be employed for this task?

*Edit - It is worth noting that my goal is to find a solution that supports highlighting multiple non-overlapping sections of text simultaneously.

For instance: "Here's some text that" and "user could select." - If this type of selection is made, the result should be [[1,2],[2,3]].

javascript css textselection

Answer 1

Answer №1

Edit: Recently discovered the existence of a selection.containsNode method which seems like it could be a great fit for your needs, although it's still considered experimental technology.

Given that there isn't an extensive highlight event in javascript, finding a solution won't be straightforward. The text being split across multiple elements further complicates things. While you could potentially utilize document.selection as suggested by the top response to a similar inquiry, parsing the returned text against the innerHTML of the span elements might prove to be quite challenging.

In this scenario, it might be best to recreate highlight functionality using existing JS events. Below is a basic implementation lacking some features like double-clicking for selection and keyboard selection, but it serves as a starting point.

const hLights = Array.from(document.querySelectorAll('.hlight'));
let active = false;
let hoveredEls = [];

window.addEventListener('mousedown', function() {
  active = true;
});

window.addEventListener('mouseup', function() {
  active = false;
  console.log(hoveredEls);
  hoveredEls = [];
});

hLights.forEach(el => {
  el.addEventListener('mousemove', function() {
    if (active && !hoveredEls.includes(el.id)) hoveredEls.push(el.id);
  });
  el.addEventListener('mouseenter', function() {
    if (active) {
      if(hoveredEls.includes(el.id)) {
        const idx = hoveredEls.findIndex(el => el === el.id);
        hoveredEls.splice(idx, 1);
      } else {
        hoveredEls.push(el.id);
      }
    }
  });
});

<p>
 <span id="1" class="hlight">Here's some text</span>
 <span id="2" class="hlight">that the user</span>
 <span id="3" class="hlight">could select.</span>
</p>

Answer 2

Edit: Recently discovered the existence of a selection.containsNode method which seems like it could be a great fit for your needs, although it's still considered experimental technology.

Given that there isn't an extensive highlight event in javascript, finding a solution won't be straightforward. The text being split across multiple elements further complicates things. While you could potentially utilize document.selection as suggested by the top response to a similar inquiry, parsing the returned text against the innerHTML of the span elements might prove to be quite challenging.

In this scenario, it might be best to recreate highlight functionality using existing JS events. Below is a basic implementation lacking some features like double-clicking for selection and keyboard selection, but it serves as a starting point.

const hLights = Array.from(document.querySelectorAll('.hlight'));
let active = false;
let hoveredEls = [];

window.addEventListener('mousedown', function() {
  active = true;
});

window.addEventListener('mouseup', function() {
  active = false;
  console.log(hoveredEls);
  hoveredEls = [];
});

hLights.forEach(el => {
  el.addEventListener('mousemove', function() {
    if (active && !hoveredEls.includes(el.id)) hoveredEls.push(el.id);
  });
  el.addEventListener('mouseenter', function() {
    if (active) {
      if(hoveredEls.includes(el.id)) {
        const idx = hoveredEls.findIndex(el => el === el.id);
        hoveredEls.splice(idx, 1);
      } else {
        hoveredEls.push(el.id);
      }
    }
  });
});

<p>
 <span id="1" class="hlight">Here's some text</span>
 <span id="2" class="hlight">that the user</span>
 <span id="3" class="hlight">could select.</span>
</p>

Answer 3

Answer №2

here's the HTML code snippet:

    <span class="class-1" 
    onmousedown="getElementBegin('1')" onmouseup="getElementEnd('1')" >
        some text 1
    </span> <br>
    <span class="class-2" 
    onmousedown="getElementBegin('2')" onmouseup="getElementEnd('2')">
        some text 2
    </span> <br>
    <span class="class-3" 
    onmousedown="getElementBegin('3')" onmouseup="getElementEnd('3')">
        some text 3
    </span> <br>

    <p id="selected"> nothing!</p>

And here is the javascript part:

let beginning
let ending
let selectedText

document.onmouseup = function () {
selectedText = window.getSelection().toString()
console.log(selectedText);

currentSelection = document.getElementById('selected')
currentSelection.innerHTML = `selected range: ${beginning} to ${ending} <br> selection: ${selectedText}`
}

function getElementBegin(begins) {
beginning= begins
console.log(beginning)
}

function getElementEnd(ends) {
ending = ends
console.log(ending)
}

Answer 4

here's the HTML code snippet:

    <span class="class-1" 
    onmousedown="getElementBegin('1')" onmouseup="getElementEnd('1')" >
        some text 1
    </span> <br>
    <span class="class-2" 
    onmousedown="getElementBegin('2')" onmouseup="getElementEnd('2')">
        some text 2
    </span> <br>
    <span class="class-3" 
    onmousedown="getElementBegin('3')" onmouseup="getElementEnd('3')">
        some text 3
    </span> <br>

    <p id="selected"> nothing!</p>

And here is the javascript part:

let beginning
let ending
let selectedText

document.onmouseup = function () {
selectedText = window.getSelection().toString()
console.log(selectedText);

currentSelection = document.getElementById('selected')
currentSelection.innerHTML = `selected range: ${beginning} to ${ending} <br> selection: ${selectedText}`
}

function getElementBegin(begins) {
beginning= begins
console.log(beginning)
}

function getElementEnd(ends) {
ending = ends
console.log(ending)
}

Retrieving a compilation of items found within text selected by the user on a website

Answer №1

Answer №2

Similar questions

What is the reason for the absence of Duplex Stream in the Web Streams API?

Is it possible to create a CSS checkbox without using an ID or "for" attribute

Set up a timed event for a .js file to execute

Encountered a error 500 while attempting to POST using Postman in Node.js

Node.js middleware for verifying required parameters

I am utilizing client-side JS to send a large number of requests. What methods can I implement to enable my server to cache this content

What are the steps to set a 404 status code in next.js when utilizing ISR with a fallback of "blocking"?

Setting the state variable value asynchronously using AngularJS UI-If

The issue with the AngularJS filter seems to be arising specifically when applied to

Rapidly generate VueJS templates for quick display

How can you handle undefined values in the query object parameter when using Mongoose's Find function?

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Is it possible to use jQuery to create a slide-up effect from the

Ways to monitor and measure clicks effectively

When the visitor is browsing a particular page and comes across a div element, carry out a specific action

What could be causing my divs to overlap?

Converting php array submitted from a form using ajax

What is the process for loading an HTML form into a specific target using Angular?

Retrieve the maximum number of slots from a JSON file and implement them into the

Activate audio and trigger notification