Click on the span to choose the text within it

Question

Click on the span to choose the text within it

I am looking to retrieve the specific text that was clicked on. For example, if I click on the word "mother," I want the log to display just that word "mother" even if it is contained within a span with other words.

The code I have tried doesn't seem to select the spans:

function getSelectedText(e) {

    if(window.getSelection)
        return console.log(window.getSelection().toString());
    else if(document.getSelection)
        return console.log(document.getSelection());
    else if(document.selection)
        return console.log(document.selection.createRange().text);
    return console.log("");
    
}

document.body.onmouseup = getSelectedText;

<div class="destination">
  <span class="word">sister mother</span>
  <span class="word" >brother</span>
  <span class="word" >father</span>
</div>

<h1>hi</h1>

javascript html css

Answer 1

Answer №1

The option of span splitting is compatible with all browsers and does not require the use of external libraries.

  <body>
        <style>
          .container{
              display: flex;
              gap: 5px;
              flex-wrap: wrap;
          }
      </style>
    <div id="root" class = "container"></div>
    <script>
      var text = 'Soon after this, I started working with Kitty, who has volunteered at the shelter for years, so she knew all the lay of the land and was super helpful.'
      var container = document.getElementById("root")
      text.split(' ').forEach((word)=>{
          var newWord = document.createElement("span")
          newWord.innerText = word
          newWord.className = 'myClass'
          container.appendChild(newWord)
      })
      function handler(event) {
          if (event.target.className === "myClass"){
              console.log(event.target.textContent)
          }
      }
      document.addEventListener('click',handler,false)
    </script>
  </body>

Answer 2

The option of span splitting is compatible with all browsers and does not require the use of external libraries.

  <body>
        <style>
          .container{
              display: flex;
              gap: 5px;
              flex-wrap: wrap;
          }
      </style>
    <div id="root" class = "container"></div>
    <script>
      var text = 'Soon after this, I started working with Kitty, who has volunteered at the shelter for years, so she knew all the lay of the land and was super helpful.'
      var container = document.getElementById("root")
      text.split(' ').forEach((word)=>{
          var newWord = document.createElement("span")
          newWord.innerText = word
          newWord.className = 'myClass'
          container.appendChild(newWord)
      })
      function handler(event) {
          if (event.target.className === "myClass"){
              console.log(event.target.textContent)
          }
      }
      document.addEventListener('click',handler,false)
    </script>
  </body>

Answer 3

Answer №2

function addHighlight(span) {
  span.classList.toggle("highlight");
  
  //get the selected text
  var highlightedText = span.innerHTML;
  alert(highlightedText);
}

.highlight {
  background-color: lightblue;
}

<span onclick="addHighlight(this)">sister mother</span>
<span onclick="addHighlight(this)">brother</span>
<span onclick="addHighlight(this)">father</span>

Answer 4

function addHighlight(span) {
  span.classList.toggle("highlight");
  
  //get the selected text
  var highlightedText = span.innerHTML;
  alert(highlightedText);
}

.highlight {
  background-color: lightblue;
}

<span onclick="addHighlight(this)">sister mother</span>
<span onclick="addHighlight(this)">brother</span>
<span onclick="addHighlight(this)">father</span>

Click on the span to choose the text within it

Answer №1

Answer №2

Similar questions

What is the best way to isolate JSON data based on a specific field?

Delay the fading in of an element using jQuery

Incorporating personalized cells within Row Formatter in Tabulator

Unable to attach numerous parameters to the content of the request

What is the best way to transform the content within a div into accordion tabs exclusively for display on mobile devices?

Is there a cutting-edge javascript/jquery tool that enables SQL-type queries on JSON datasets?

The Fetch API's Post functionality is currently experiencing issues

Can we define a style or CSS for one element depending on the characteristics of another element?

What is the easiest way to create a star pattern using JavaScript?

Using Immutable JS to Generate an OrderedMap from a List

Searching for text within an HTML document using Selenium in Python can be easily achieved by using the appropriate methods and

The Ajax request encountered a syntax error due to an unexpected token '<'

Exploring the Implementation of Conditional Logic Using Variables in ReactJS

Tips for deploying a Nuxt application using an alternative command line interface

Issues with JavaScript Array Splice Function

What are the best scenarios for utilizing (a)synchronous calls?

Utilizing SASS in Eclipse for Java EE Development

Generate a unique 4-6-4 pattern using React JS

Tips for detecting HTML updates using Python requests

Ways to track a moving div element using jQuery animations on the screen