Below is my code , I want to highlight text on mouse up. I am new to web. I have no idea why my code is not working. It is not highlighting any text. can someone help me in finding the problem ? the code i have written is mostly what i have copied from here and there on web.
Problem 2: once the text is highlighted i want to open a menu on right click from mouse with 4 to 5 options and select one of them to label the highlighted text. later download the labeled data in json format
Firstly, I want to solve my first problem.
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.red {
color: red;
};
</style>
<script>
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;
}
</script>
</head>
<body>
<div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire