问题描述
下面是我的代码.我想突出显示mouseup上的文本.我是Web的新手.我不知道为什么我的代码无法正常工作.它没有突出显示任何文本.
Below is my code. I want to highlight text on mouseup. 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.
问题2:突出显示文本后，我想用鼠标右键单击打开带有4至5个选项的菜单，然后选择其中之一以标记突出显示的文本.以后以JSON格式下载带标签的数据.
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.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<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>推荐答案
更改此设置，需要先准备好jQuery
change this, Jquery needs to be ready first
$(function() {
thisRespondHightlightText(".select--highlight--active");
});
这篇关于如何在运行时使用javascript和html突出显示文本并为其添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！