Selecting Text in an Element (Akin to Highlighting With Your Mouse)

Selecting text in an element (akin to highlighting with your mouse)

Plain Javascript

function selectText(nodeId) {
    const node = document.getElementById(nodeId);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));

<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>

Selecting text with mouse and highlighting the same text with multiple occurences in that div

DEMO

I am getting the selected text value using this function

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Then i am using using this script to highlight the text

function thisRespondHightlightText(thisDiv){
    $(thisDiv).on("mouseup", function () {
        var selectedText = getSelectionText();
        var selectedTextRegExp = new RegExp(selectedText,"g");
        var text = $(this).text().replace(selectedTextRegExp, "<span class='red'>" + selectedText + "</span>");
        $(this).html(text);
    });
}

Since this is a function you can use it for any div you want to respond to highlighting.

thisRespondHightlightText(".select--highlight--active");

HTML:

<div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

How to Select Text in an Element (akin to highlighting with your mouse) on newly created ajax content?

Re: Is there a way to call this function immediately after the ajax request is done?

Do you mean after success of the ajax success. or http://api.jquery.com/jQuery.ajax/

or This should help: Execute function after all ajax .load() requests are finished

Hope this fits the cause :)

Sample

$.ajax({
    url: this.html_url,
    cache: false,
    success: function(html){
        doSomething();
        return true;
    }
});

Programmatically select text (like as done with a mouse) that matches string in a textarea element

You could use my jQuery plug-in. It works around browser differences in textarea selection manipulation and has some convenience methods:

https://code.google.com/p/rangyinputs/

For your example, the code would be

var $textarea = $("#body");
var text = "path to image file"
$textarea.replaceSelectedText(text, "select");
$textarea.surroundSelectedText("[img]", "[/img]");

Demo: http://jsfiddle.net/P8Jrh/1/

Selecting text with Cypress

The answer you linked to deals with selecting text specifically outside an input field. Here is an answer for selecting text in an input field.

They posted a demo, and I've modified it for Cypress.

HTML:

<html>
  <body>
    <textarea type="textarea" name="message" id="message">Hello World</textarea>
  </body>
</html>

Cypress:

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}

describe('Text selection', function() {
    it('Selects text in a text area', function() {
        cy.get("#message").then(textarea => {
            createSelection(textarea, 0, 5);
        });
    }
}

Weird double click behavior with text highlighting, when dynamically changing the contentedible attribute of a div

The issue essentially occurs in the browser inaccurately assuming the click count is higher than it should be. I solved it by keeping a store of the previous range, and replacing the current range with the previous if need be.

Sandbox: https://jsfiddle.net/2gvxrf3y/56/

Selecting text from iframe with mouse and showing selection in a div

You can see here how to get the references to window and document for the iframe (or vice versa, the references to the main document from inside the iframe); from there, it should be easy to do anything you're currently doing in the main document.

Selecting Text in an Element (Akin to Highlighting With Your Mouse)