Hello, you know if it is possible to create a text marker, similar to the ones used in pdf, but in an html? Not necessarily he would need to save the markings, but if he saved it would be better.
Thanks!
Hello, you know if it is possible to create a text marker, similar to the ones used in pdf, but in an html? Not necessarily he would need to save the markings, but if he saved it would be better.
Thanks!
Hello, I found this JavaScript library by searching the web. Now I'll be looking for a way to save the tags. TextHighlighter
From what I understand, would it be something related to this?
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>
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>