highlight高亮问题
我们网站在选中某个单词标记高亮后，在最后保存页面，所有和这个一样的单词都会被自动标记高亮，我们只需要之前这一个单词高亮标记，有没有可以解决的，高价求
<html>
<head>
<script type="text/javascript">
function saveHighlight() {
let sel = window.getSelection();
let range = sel.getRangeAt(0);
console.log(range)
let startNode = range.startContainer;
let endNode = range.endContainer;
if (startNode.nodeType == 3) {
var startIsText = true;
var startFlag = startNode.parentNode;
startNode = startNode.nodeValue;
} else {
var startIsText = false;
var startFlag = startNode;
}
if (endNode.nodeType == 3) {
var endIsText = true;
var endFlag = endNode.parentNode;
endNode = endNode.nodeValue;
} else {
var endIsText = false;
var endFlag = endNode;
}
let startOffset = range.startOffset;
let endOffset = range.endOffset;
let startTagName = startFlag.nodeName;
let startHTML = startFlag.innerHTML;
let endTagName = endFlag.nodeName;
let endHTML = endFlag.innerHTML;
let rInfo = {
startNode: startNode,
startOffset: startOffset,
startIsText: startIsText,
startTagName: startTagName,
startHTML: startHTML,
endNode: endNode,
endOffset: endOffset,
endIsText: endIsText,
endTagName: endTagName,
endHTML: endHTML
};
let highlight_position_list = JSON.parse(window.localStorage.getItem("highlight_position_list") || '[]')
highlight_position_list.push(rInfo)
window.localStorage.setItem("highlight_position_list", JSON.stringify(highlight_position_list));
highlight(sel);
}
function getHighlight() {
let highlight_position_list = JSON.parse(window.localStorage.getItem("highlight_position_list") || '[]')
// use(highlight_position_list[0]);
for (let position of highlight_position_list) {
use(position);
}
window.localStorage.removeItem("highlight_position_list");
}
function findEle(tagName, innerHTML) {
let list = document.getElementsByTagName(tagName);
for (let i = 0; i < list.length; i++) {
if (list[i].innerHTML == innerHTML) {
return list[i];
}
}
}
function show(startNode, startIsText, startOffset,
endNode, endIsText, endOffset, sP, eP) {
var s, e;
if (startIsText) {
let childs = sP.childNodes;
for (let i = 0; i < childs.length; i++) {
if (childs[i].nodeType == 3 && childs[i].nodeValue == startNode)
s = childs[i];
}
} else {
s = startNode;
}
if (endIsText) {
let childs = eP.childNodes;
for (let i = 0; i < childs.length; i++) {
if (childs[i].nodeType == 3 && childs[i].nodeValue == endNode)
e = childs[i];
}
} else {
e = startNode;
}
// 开始高亮
let range = document.createRange();
range.setStart(s, startOffset);
range.setEnd(e, endOffset);
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
// 开启文档编辑
document.designMode = 'on'
document.execCommand('BackColor', false, "yellow")
document.designMode = 'off'
// 去掉默认选中的蓝色
window.getSelection().empty()
}
function use(obj) {
let sP = findEle(obj.startTagName, obj.startHTML);
let eP = findEle(obj.endTagName, obj.endHTML);
show(
obj.startNode,
obj.startIsText,
obj.startOffset,
obj.endNode,
obj.endIsText,
obj.endOffset,
sP,
eP
);
}
function highlight(sel) {
// 开启文档编辑
document.designMode = 'on'
range = sel.getRangeAt(0)
if (range) {
sel.removeAllRanges()
sel.addRange(range)
}
document.execCommand('BackColor', false, "yellow")
document.designMode = 'off'
// 去掉默认选中的蓝色
window.getSelection().empty()
}
</script>
</head>
<body id="content">
我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本
<button onclick="saveHighlight()">高亮</button>
<button onclick="getHighlight()">加载上一次高亮结果</button>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS关键字文本高亮</title>
</head>
<body>
<div id="content">
前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
Window.getSelection 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
如果想要将 selection 转换为字符串，可通过连接一个空字符串（""）或使用 String.toString() 方法。
你还可以使用 Document.getSelection()，两个方法等价。
</div>
<input type="button" id="button" value="确定"/>
<script>
var content = document.getElementById("content");
var contents = content.innerHTML;
var button = document.getElementById("button");
button.onclick = function() {
var value = window.getSelection() // 选中文本;
alert('选择的文本是：'+value);
if(value == ''){
alert('未选中文本，请选择文本');
}
var values = contents.split(value);
content.innerHTML = values.join('<span style="background:yellow;">' + value + '</span>');
};
</script>
</body>
</html>
第一步：找到你的集成的编辑器里面的代码高亮文件如下
ueditor\third-party\SyntaxHighlighter
下面的两个文件
shCoreDefault.css
shCore.js
可以直接调用你的编辑器所在的路径，但是我喜欢单独出来所以你直接copy一份到你自己设定的目录里面。
第二步：调用对应的js和css文件
<link rel="stylesheet" href="XXX(你自己的路径)/shCoreDefault.css?v=v1.3.5" >
<script src="XXX(你自己的路径)shCore.js" ></script>
在这里我们还需要加一段js代码如下
<script type="text/javascript">
//为了在编辑器之外能展示高亮代码
SyntaxHighlighter.all();
</script>
tips:至此你已经集成上了这个代码高亮插件，然后我们需要的就是后台添加对应的代码即可
解决问题
目前看起来，你们网站已经实现了高亮，只不过亮的地方多了。
这个理论上应该是需要修改前端代码解决的
方便问下
你们网站的前端技术架构是什么？目前高亮采用的第三方库或者方式是什么？
这种需要具体问题具体分析的
如有问题及时沟通
你可以把你们实现的程序放出来，看上去匹配的有问题。你这不光The高亮了，to和and为什么也高亮呢？用正则去匹配的吗
可以实用百度的ueditor编辑器，里面可以设置高亮
https://www.jianshu.com/p/b039282d3be2
当前是如何实现高亮的，匹配替换吗，但看到不太类似的也高亮了
大家回答我都看到 我目前在一个个私信 给远程演示一下问题 这样一目了然 感谢各位大大
保存的时候调用一下光比高亮的方法就可以了，不要整那么麻烦的
可以让后台加高亮标签，前端用v-html接收，就可以了
之前搞过一个NLP实体标注工具。
这个不是通过事件定位的吗？要高亮那个就配置那个span的css，
贴个代码吧，或者用两个下标记录标记的位置？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input value=null>
<div></div>
</body>
<script src="../../jquery-3.6.0.min.js"></script>
<script>
var input = $("input").val();
$("div").text(input === null)
</script>
</html>
给你个思路：你保存的时候，假设你要高光的字符串是“你好”；
let val=“你好”；
let html='
we31231231dasda你好dasdasdasdasda
';你可以html.split("你好")；然后for循环 str+=v+""+你好+;
再把str拼回去html