JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="textarea" cols="50" rows="20" alwaysShowSelection="true">
augue est. Vestibulum auctor velit vel mauris euismod in ullamcorper libero pharetra. Vivamus eleifend dui vitae lorem tincidunt a ullamcorper turpis lacinia. Sed ut mi augue. Phasellus ac lorem ante, vitae bibendum urna. Maecenas enim purus, lacinia id viverra at, congue quis nibh. Maecenas blandit, odio vitae pellentesque tincidunt, sapien magna euismod libero, at rutrum lorem ligula nec dui. Cras euismod cursus est, ac sagittis leo volutpat et.
Donec magna erat, molestie at dignissim vel, sollicitudin et justo. Phasellus nulla felis, sodales vel interdum at, consequat eu enim. Nam vehicula purus ac turpis vulputate et consequat urna tincidunt. Cras elementum, metus quis mollis accumsan, lectus odio vehicula dui, nec consequat massa orci ac eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus eu libero purus. Nam ultricies justo a ante ultricies venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Cras convallis, enim ac varius feugiat, purus risus vehicula quam, eu suscipit massa nulla fermentum dolor. Sed congue metus id nunc feugiat vel venenatis tortor molestie. Nunc vel libero ac massa interdum molestie ut et felis. Morbi metus nunc, dapibus in eleifend vel, vulputate sed ante. Morbi sed leo sed orci sodales scelerisq
</textarea>
<input type="button" id="deletebutton" value="Delete" />
<input type="button" id="findfermentum" value="Find fermentum" />
<script type="text/javascript">
JavaScript
// ie8 ie7
function compatibilitySelect(start, length) {
var input = document.getElementById('textarea');
input.selectionStart = start;
input.selectionEnd = length;
input.focus();
}
//ie9 , chrome , ff
function selectagain(start, length) {
var input = document.getElementById('textarea');
var inputRange = input.createTextRange();
inputRange.moveStart("character", start);
inputRange.collapse();
inputRange.moveEnd("character", length);
inputRange.select();
input.focus();
}
$("#deletebutton").click(function () {
var input = document.getElementById('textarea');
if (typeof input.selectionStart == "number") {
alert("chrome firefox ie9");
var start = input.selectionStart,
end = input.selectionEnd,
val = input.value;
if (start != end) {
input.value = val.slice(0, start) + val.slice(end);
input.setSelectionRange(start, start);
}
} else if (typeof document.selection != "undefined") {
alert("ie7 ie8");
document.selection.createRange().text = "";
}
});
$("#findfermentum").click(function () {
var input = document.getElementById('textarea');
var searchforword = "fermentum";
var index = $("#textarea").val().indexOf(searchforword);
if (index <= 0) {
} else {
if (typeof input.selectionStart == "number") {
selectagain(index, searchforword.length);
} else if (typeof document.selection != "undefined") {
compatibilitySelect(index, searchforword.length);
}
}
});