Changing the text color of a selected text in HTML

Question

Changing the text color of a selected text in HTML

I have a feature to change the color of selected text using Javascript. Here is the method I am currently using:

function marking_text(replacrmenthtml){
    try {
        if (window.getSelection) {
            sel = window.getSelection();
            var range = sel.getRangeAt(0);

            var selectionStart = $("<span style=\"color:red\">");
            var startRange = document.createRange();
            startRange.setStart(range.startContainer, range.startOffset);


            var selectionEnd = $("</span>");
            var endRange = document.createRange();
            endRange.setStart(range.endContainer, range.endOffset);

            startRange.insertNode(selectionStart[0]);
            endRange.insertNode(selectionEnd[0]);
        }
    }
    catch (e) {

    }
}

However, when calling this method, it encounters a DOM exception. It seems that inserting the starting span tag before the selected text causes disruption in the DOM structure without an end tag present. How can this issue be resolved?

Edited: There will be a highlight button. When the user selects text and clicks on the highlight button, the color of the selected text will change.

javascript html css getselection

Answer 1

Answer №1

For those situations where you need to alter the color upon selection, add the following code snippet.

    ::-moz-selection { color: red;}
    ::selection { color: red; }

Answer 2

For those situations where you need to alter the color upon selection, add the following code snippet.

    ::-moz-selection { color: red;}
    ::selection { color: red; }

Answer 3

Answer №2

While this question pertains to JS, there is a nifty CSS selector that can achieve the desired effect.

::selection {
  color: blue;
}

If the browser deems your choice inaccessible, it may override your selected colors. This technique works best with colors and background colors for styling purposes.

For further reading:

Answer 4

While this question pertains to JS, there is a nifty CSS selector that can achieve the desired effect.

::selection {
  color: blue;
}

If the browser deems your choice inaccessible, it may override your selected colors. This technique works best with colors and background colors for styling purposes.

For further reading:

Answer 5

Answer №3

The CSS Custom Highlight API, https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API, provides a convenient way to mark specific text ranges with custom highlight styles in JavaScript. By defining the highlight style in CSS, you can create persistent highlighting effects that resemble text selection.

For instance:

<style>
  div::highlight(bar) {
    background-color: orange;
  }
</style>
<div id="highlighted">This text is customized highlighted</div>
<script>
  let range = new Range();
  range.setStart(highlighted, 0);
  range.setEnd(highlighted, 1);
  let customHighlight = new Highlight(range);
  CSS.highlights.set('bar', customHighlight);
</script>

Answer 6

The CSS Custom Highlight API, https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API, provides a convenient way to mark specific text ranges with custom highlight styles in JavaScript. By defining the highlight style in CSS, you can create persistent highlighting effects that resemble text selection.

For instance:

<style>
  div::highlight(bar) {
    background-color: orange;
  }
</style>
<div id="highlighted">This text is customized highlighted</div>
<script>
  let range = new Range();
  range.setStart(highlighted, 0);
  range.setEnd(highlighted, 1);
  let customHighlight = new Highlight(range);
  CSS.highlights.set('bar', customHighlight);
</script>

Changing the text color of a selected text in HTML

Answer №1

Answer №2

Answer №3

Similar questions

Can someone explain the process of unescaping characters in an API response to me?

Steps for implementing a dynamic animation within a table cell when the value is updated

Hiding the author, category, and date information from displaying on WordPress posts

Answer for background picture when reducing magnification

What is the best way to choose a specific row with Enzyme?

Tips for aligning navigation bar items to the right side

Having trouble getting numerical values from the computed transform matrix in Javascript? The result might be NaN

What is the best way to utilize AJAX for uploading .mp4, .mp3, and .doc files together with additional FormData?

Read a local file using the HTML5 FileReader

What is the default way to toggle content in rows using Material UI?

Guide on transferring JSON information from a client to a node.js server

Angular JS throwing error: 'ngMessages' not initialized

Changing the text of a button using ngClass in Angular's toggle functionality

Issue with React Testing Library: Attempting to access the 'contents' property of an undefined value in Redux

"Unlock the power of Angular.js: Extracting table row data with the click of a checkbox

How can we efficiently loop through all the icons in React Material-UI?

Hide a parent div in jQuery depending on the checkbox status

Is there a way to verify if a variable is a generator function, for example, a function with the asterisk symbol and

Display a loading indicator while rendering several Vue components

Troubleshooting Issue with InfoWindow Display on Multiple Markers in Google Maps