ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> #value_2 span{
background-color: #FFFF00;
color: #008000;
}
</style>
</head>
<body>
<input type="text" id="select-text">
<div id="value_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, sint, consectetur iusto esse aliquam consequuntur odio autem numquam error possimus temporibus commodi est aliquid. Earum, aut nisi ex totam a.</div>
<button onclick="insertTxt()">insertTxt</button>
<button onclick="replaceTxt()">replaceTxt</button>
<script>
let editor = document.querySelector('#select-text');
let all_text = document.getElementById('value_2');
let span = document.createElement("span");
const insertTxt = () => {
let txt = window.getSelection().toString();
if(!txt) return;
let range = window.getSelection().getRangeAt(0);
let selectionContents = range.extractContents();
span.appendChild(selectionContents);
range.insertNode(span);
editor.value = txt;
editor.focus()
}
const replaceTxt = () => {
if(span.parentNode) span.replaceWith(editor.value);
editor.value = span.innerHTML = "";
}
</script>
</body>
</html>