个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
下面是我的代码。我想在 mouseup 上突出显示文本。我是网络新手。我不知道为什么我的代码不起作用。它没有突出显示任何文本。
有人可以帮我找出问题所在吗？我写的代码大部分是我从网上到处复制的。
问题 2:突出显示文本后，我想通过鼠标右键单击打开一个菜单，其中包含 4 到 5 个选项，然后选择其中一个来标记突出显示的文本。稍后下载 JSON 格式的标记数据。
首先，我想解决我的第一个问题。
<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需要先准备好
$(function() {
thisRespondHightlightText(".select--highlight--active");
});
关于javascript - 如何使用 javascript 和 html 突出显示文本并在运行时对其进行标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57198387/
26
4
0
我是一名优秀的程序员,十分优秀！