Save selection text and show it later in html and javascript

Question

I have a difficult situation with html and javascript. My html page allows user to select text and highlight it with colors. Now I want to save the state into database to sh

Answer 1

my idea is to add <span > at the start and end of selected text after that when you save the document whole html is saved into the database so when he retrieves the record back highlighted text will remain.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>this is a paragraph creted to demonstrate highlighting selected text</p>
<script>
$(document).ready(function(){

$("p").on("mouseup",function() {
    oldtxt = chosenText();
    
        var newtxt = '<span  style="color:red;">' + oldtxt +'</span>';
$(this).html($(this).html().replace(oldtxt,newtxt));
    
});

//Grab selected text
function chosenText(){
    if(window.getSelection){
        return window.getSelection().toString();
    }
    else if(document.getSelection){
        return document.getSelection();
    }
    else if(document.selection){
        return document.selection.createRange().text;
    }
}
});
</script>

it will be comfortable in jquery to add elements

Answer 2

You can use Array to save a selection of the user!! after that you save the whole array to your database! and when user view the site again, function compares the letter and word from array and highlight it..