JSFiddle - React, Tailwind, and code Playground

by NikolaKG80

HTML

<div id="test_case_01" contentEditable="true">Select part of this text</div>
<input type="text" id="test_case_02" value="Select part of this text" />
<br />
<br />
<label for="test_type">Set selection on</label><br />
<select id="test_type">
<option value="1">contentEditable DIV</option>
<option value="2">text element</option>
</select>
<input type="text" id="select_start" value="" placeholder="Selection Start" />
<input type="text" id="select_end" value="" placeholder="Selection End" />
<input type="button" id="run_test" value="Test" />

JavaScript

$.fn.get_selection_start = function(){
	var result = this.get(0).selectionStart;
	if (typeof(result) == 'undefined') result = this.get_selection_range().selection_start;
	return result;
}

$.fn.get_selection_end = function(){
	var result = this.get(0).selectionEnd;
	if (typeof(result) == 'undefined') result = this.get_selection_range().selection_end;
	return result;
}

$.fn_get_selected_text = function(){
	var value = this.get(0).value;
	if (typeof(value) == 'undefined'){
		var result = this.get_selection_range().selected_text;
	}else{
		var result = value.substring(this.selectionStart, this.selectionEnd);
	}
	return result;
}

$.fn.get_selection_range = function(){

	var range = window.getSelection().getRangeAt(0);
	var cloned_range = range.cloneRange();
	cloned_range.selectNodeContents(this.get(0));
	cloned_range.setEnd(range.startContainer, range.startOffset);
	var selection_start = cloned_range.toString().length;
	var selected_text = range.toString();
	var selection_end = selection_start + selected_text.length;
	var result = {
		selection_start: selection_start,
		selection_end: selection_end,
		selected_text: selected_text
	}
	return result;
}

$.fn.set_selection = function(selection_start, selection_end){
	var target_element = this.get(0);
	selection_start = selection_start || 0;
	if (typeof(target_element.selectionStart) == 'undefined'){
		if (typeof(selection_end) == 'undefined') selection_end = target_element.innerHTML.length;

		var character_index = 0;
		var range = document.createRange();
		range.setStart(target_element, 0);
		range.collapse(true);
		var node_stack = [target_element];
		var node = null;
		var start_found = false;
		var stop = false;

		while (!stop && (node = node_stack.pop())) {
			if (node.nodeType == 3){
				var next_character_index = character_index + node.length;
				if (!start_found && selection_start >= character_index && selection_start <= next_character_index){
					range.setStart(node, selection_start -...