Is there a javascript function that marks a selected random text with the mouse?

Question

Hello, do you know if it is possible to create a text marker, similar to those used in pdf, but in an html? Not necessarily would he need to save the markings, but saving would be better.

Thanks!

Answer 1

From what I understand, it would be something related to that?

var textMark = null;
var textStart = 0;
var textStop = 0;

function getSelectionText() {
    var text = "";
    var select = null;
    if (window.getSelection){
        select = window.getSelection();
        text = select.toString();
        textMark = select.anchorNode.textContent;
        textStart = select.anchorOffset;
        textStop = select.focusOffset;
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

function mark(elements){
    var textSelected = getSelectionText();
    if(textSelected.length > 0){
        for(var i in elements){
            var element     = elements[i];
            var html        = element.innerHTML;
            var htmlParts   = html.split(/(?=(?:<\/?mark>))/);
            var htmlPartsClear  = [];
            var divClear = document.createElement('div');
            for(var i in htmlParts){
                divClear.innerHTML = htmlParts[i];
                htmlPartsClear.push(divClear.textContent);
            }
            var index       = htmlPartsClear.indexOf(textMark);
            var change      = htmlParts[index];
            if(change.length >= textStop){

                var lenMarks = 0;
                var matchs = change.match(/<\/?mark>/g);
                for (var i in matchs){
                    lenMarks += matchs[i].length;
                }

                var r = new RegExp('(.{'+(textStart+lenMarks)+'})(.{'+(textStop-textStart)+'})(.*)');
                change = change.replace(r, '$1<mark>$2</mark>$3');

                htmlParts[index] = change;
            }
            element.innerHTML = htmlParts.join('');
        }
    }
}

$(document).ready(function(){

    var elementsCheck = [];

    var allowMark = 0;
    var timerToMark = 0.5;
    var timer = null;

    $('p').on('mouseover', function(){
        allowMark = 1;
        elementsCheck.push(this);
    });
    $('p').on('mouseout', function(){
        allowMark = 0;
        var i = elementsCheck.indexOf(this);
        if (i > -1) {
            elementsCheck.splice(i, 1);
        }
    });

    $(document).on('mousemove', function(){
        if(allowMark){
            clearInterval(timer);
            var current = [];
            for(var i = 0; i < elementsCheck.length; i++){
                current.push(elementsCheck[i]);
            }
            timer = setTimeout(function(){
                mark(current);
            }, timerToMark*1000);
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h3>Selecionar parte do texto (abaixo) e aguardar 500ms</h3>
<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>

Note

• That’s the introduction, there’s a lot to do yet.
• I did not test on all browsers, only on FF 50.

Answer 2

Hello, I found this Javascript library searching on the web. I will now search for a way to save tags. Texthighlighter

Answer 3

By Imran Bughio Selecting text with mouse and Highlighting the same text with Multiple occurences in that div

//<![CDATA[
$(window).load(function(){


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


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);
    });
}

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;
}
});//]]> 

    .red {
    color: red;
}
  

<!DOCTYPE html>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

    
  <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    
    
  <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  
    <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>