Getting the selection within a particular div – how can it be done?

Question

Getting the selection within a particular div – how can it be done?

Currently, I am working on a contenteditable div feature (identified by id 'editor1') which allows users to input text. Additionally, there is a function that enables users to highlight and change the color of selected text. In my JavaScript code, I utilize

window.getSelection().getRangeAt(0)

, however, I have encountered an issue where users can select text outside of the div causing all highlighted words to change color. To address this problem, I have attempted the following:


        function red(){
    {       
        var getText = document.getElementById("editor1").innerHTML;
        var selection = getText.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "red";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }
    }

You can view a live example here: https://jsfiddle.net/xacqzhvq/

Currently, if I were to highlight "this will become red as well," the button allows me to change the color as desired. However, my main concern remains - how can I limit the color-changing functionality to only affect text within the editor1 div?

javascript html css

Answer 1

Answer №1

If you want to retrieve the node element from the selection, you can use .baseNode method. Once you have accessed the base node, you can then obtain the parent node and utilize it for comparison purposes.

function red(){
    // Stop the function and return if the selected element does not have an id of "foo"
    if(window.getSelection().baseNode.parentNode.id != "foo") return;
    ...
    // Perform highlighting if it matches our specified div.
}

In the following example, I have assigned an id to the div which can be checked to ensure it is the desired element:

Demo

As mentioned by @z0mBi3, this approach will work initially but may not be suitable for multiple highlights (especially if they are cleared). The presence of <span> elements within the div forms a hierarchy where the div serves as the parent node for numerous span elements. To address this, you can traverse up through the ancestors of the node until locating one with the id of "foo".

Fortunately, jQuery offers a convenient solution using their .closest() method:

if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;

Here is a resource detailing a native JS implementation of .closest().

Answer 2

If you want to retrieve the node element from the selection, you can use .baseNode method. Once you have accessed the base node, you can then obtain the parent node and utilize it for comparison purposes.

function red(){
    // Stop the function and return if the selected element does not have an id of "foo"
    if(window.getSelection().baseNode.parentNode.id != "foo") return;
    ...
    // Perform highlighting if it matches our specified div.
}

In the following example, I have assigned an id to the div which can be checked to ensure it is the desired element:

Demo

As mentioned by @z0mBi3, this approach will work initially but may not be suitable for multiple highlights (especially if they are cleared). The presence of <span> elements within the div forms a hierarchy where the div serves as the parent node for numerous span elements. To address this, you can traverse up through the ancestors of the node until locating one with the id of "foo".

Fortunately, jQuery offers a convenient solution using their .closest() method:

if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;

Here is a resource detailing a native JS implementation of .closest().

Answer 3

Answer №2

Here is a code snippet for you to try:

function addBold(){
 
if(window.getSelection().focusNode.parentElement.closest("#editor").id != "editor") return;

 





  const selection = window.getSelection().getRangeAt(0);
  
  let selectedParent = selection.commonAncestorContainer.parentElement;
  

  let mainParent = selectedParent;
  
  if(selectedParent.closest("b"))
  {
  //Unbold
    var text = document.createTextNode(selectedParent.textContent);
    mainParent = selectedParent.parentElement;
    mainParent.insertBefore(text, selectedParent);
    mainParent.removeChild(selectedParent);
    mainParent.normalize();
  }
  else
  {
    const span = document.createElement("b");
    span.appendChild(selection.extractContents());
    selection.insertNode(span);
    mainParent.normalize();
  }
  

  if (window.getSelection) {
    if (window.getSelection().empty) {  // Chrome
      window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) {  // Firefox
      window.getSelection().removeAllRanges();
    }
  } else if (document.selection) {  // IE?
    document.selection.empty();
  }




};

<div id="editor" contenteditable="true">

You are the programmers of the future 

</div>


<button onclick="addBold()">Bold</button>

This code was inspired by the information provided in the following answers:

Solution for bold/unbold selected text using Window.getSelection()

Fix for getSelection().focusNode inside a specific id not working

Answer 4

Here is a code snippet for you to try:

function addBold(){
 
if(window.getSelection().focusNode.parentElement.closest("#editor").id != "editor") return;

 





  const selection = window.getSelection().getRangeAt(0);
  
  let selectedParent = selection.commonAncestorContainer.parentElement;
  

  let mainParent = selectedParent;
  
  if(selectedParent.closest("b"))
  {
  //Unbold
    var text = document.createTextNode(selectedParent.textContent);
    mainParent = selectedParent.parentElement;
    mainParent.insertBefore(text, selectedParent);
    mainParent.removeChild(selectedParent);
    mainParent.normalize();
  }
  else
  {
    const span = document.createElement("b");
    span.appendChild(selection.extractContents());
    selection.insertNode(span);
    mainParent.normalize();
  }
  

  if (window.getSelection) {
    if (window.getSelection().empty) {  // Chrome
      window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) {  // Firefox
      window.getSelection().removeAllRanges();
    }
  } else if (document.selection) {  // IE?
    document.selection.empty();
  }




};

<div id="editor" contenteditable="true">

You are the programmers of the future 

</div>


<button onclick="addBold()">Bold</button>

This code was inspired by the information provided in the following answers:

Solution for bold/unbold selected text using Window.getSelection()

Fix for getSelection().focusNode inside a specific id not working

Answer 5

Answer №3

Are you in search of the following:

  //html
  <body>
     <p id='editor1'>asdf</p>
     <button onclick='red()'>
     RED
     </button>
  </body>

  //JavaScript

    window.red = function(){
        //var getText = document.getElementById("editor1").innerHTML;
        var selection = window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "red";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }

Check out the Plunker example here: https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview

Answer 6

Are you in search of the following:

  //html
  <body>
     <p id='editor1'>asdf</p>
     <button onclick='red()'>
     RED
     </button>
  </body>

  //JavaScript

    window.red = function(){
        //var getText = document.getElementById("editor1").innerHTML;
        var selection = window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "red";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }

Check out the Plunker example here: https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview

Getting the selection within a particular div – how can it be done?

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Safari not displaying properly when using float:left and float:right (works fine in Firefox and Chrome)

Tips for setting up a proxy with an enum

Tips for accessing a child element within a specific div from a selection of divs in Angular

Revamping elements according to ordered array. Angular version 4.3

execute javascript functions upon page load

What is the process for transforming a Binary field from type 4 to type 0?

Filtering GridView Results with Live Search on ASP.net Textbox

Unable to obtain the accurate response from a jQuery Ajax request

Utilize the HTML img tag in conjunction with AngularJS and Ionic to showcase dynamic images

"Form submission fails to populate _POST when file and text fields are used simultaneously

Troubleshooting problem with Chrome's getRangeAt function following changes to innerHTML of a contenteditable div using code

Map Row is unreturned

Delve into the world of tackling catastrophic backtracking with regex in Node

Responsive left and right image styling in CSS and HTML

developing a segment within an HTML document

Javascript: Understanding Error Handling in the Context of Async Await

Filtering text for highlighting in Vue.js is a breeze

Exploring the Use of data- Attributes in SVG Circle Elements

The challenge of aligning widgets in bootstrap panels across different browsers

Steps to turn off fancybox for mobile and show the full image instead