还是highlight问题
之前悬赏过，因为第一次用这个平台，没有完全测试就给钱了，现在还是存在问题，主要问题是用的highlight问题，单个单词标记完保存会相同的单词都会自动标记，我们需要只定位这一个单词，希望不高改动这个插件等。
简单示例如下
<style>
.highlight{background:yellow;display:inline!important}
</style>
<div id="highlight">
<!--需要高亮的单词放到id为highlight的容器里面-->
<p>To promote tourism recovery and reconnect stakeholders, ITE - Hong Kong’s only travel fair, will be held from 18-21 August 2022 in HKCEC with scale bigger than in 2021! Its first 1.5 days open only to registered trade while in remaining sessions, visitors can pay at entrance for admission. Exhibiting and Visiting are welcome!</p>
<p>Despite increased coverage on local travel, ITE2022 remains highly international! Of its 100 plus exhibitors, which include tourism authorities and enterprises, some 60% from abroad, which still significant but lower than the 85% in pre-pandemic year.</p>
<p>The latest list of participating countries and regions include the mainland, Hong Kong, Japanese prefectures, Macau, Taiwan, Thailand, Canada, South Korea, Iceland, Spain and more.</p>
</div>
<input type="button" value="高亮选中单词" onclick="setHighlight()" />
<input type="button" value="清除所有高亮单词" onclick="clearHighlight()" />
<input type="button" value="保存高亮单词" onclick="saveHighlightWords()" />
<input type="button" value="高亮上次选中的单词" onclick="startHightlight()" />
<br />刷新后自动高亮，去掉代码最后一句的注释。
<script>
function saveHighlightWords(notAlert) {
words = words
localStorage.setItem('words', JSON.stringify(words.sort((a, b) => b.length - a.length)));
if (!notAlert)alert('保存成功，刷新页面后点击按钮加载高亮单词重试！')
}
function clearHighlight() {
words = [];
saveHighlightWords(1);
var sps = highlight.querySelectorAll('span.highlight');
for (var sp of sps) {
var textNode = document.createTextNode(sp.innerText);
sp.parentNode.replaceChild(textNode, sp);
}
}
function setHighlight() {
let s = window.getSelection().toString();
if (s.length && words.findIndex(i => i == s) == -1) {
words.push(s);
doHightlight(highlight, s);
}
}
function doHightlight(node,word) {
var childNodes = node.childNodes,cNode;
for (var i = 0; i < childNodes.length; i++) {
cNode = childNodes[i];
if (cNode.nodeType == 3) {//文本节点执行高亮操作
if (cNode.parentNode.tagName == 'SPAN' && cNode.parentNode.className == 'highlight') continue;//高亮过的退出
var span = document.createElement('span');
span.className = highlight;
span.innerHTML = cNode.data.replace(new RegExp('(' + word + ')', 'gi'), '<span class=highlight>$1</span>');
cNode.parentNode.replaceChild(span, cNode);/*
cNode.parentNode.insertBefore(span,cNode);
cNode.parentNode.removeChild(cNode);*/
}
else doHightlight(cNode, word);
}
}
function startHightlight() {
if (words.length) {
for (let word of words) doHightlight(highlight, word);
}
}
//初始化
let highlight = document.querySelector('#highlight');
let words = localStorage.getItem('words');
words = words ? JSON.parse(words) : [];
//startHightlight();//刷新页面不需要自动高亮去掉这句代码
</script>
解决方案
安装
要实现上面的效果我们需要用到一款名为 Multi-highlight 的浏览器拓展，在新版的 Edge 以及 Chrome 浏览器都可使用，当然我更建议使用 Edge ，因为真的很好用。
其下载地址为：
可在Multi-highlight - Chrome 网上应用店 (google.com) 直接安装，网络通畅的话。
本来是推荐在Microsoft Edge 拓展商店 下载，但是这款拓展似乎还没上架，其它拓展可以推荐在Edge拓展商店下载。
若网络不可达的同学也可在国内的 扩展迷 下载。
当然也可以在云盘直接下载
下载地址： https://yours.lanzous.com/b064k5u3e 提取码：wang
下载好后其中后缀为crx的文件就是接下来需要用到的安装文件 。
安装方法为：
Edge 浏览器打开 edge://extensions/
Chrome浏览器打开 Chrome://extensions/
然后打开开发者模式
将 multi-highlight.crx 拖拽到上面这个页面即可安装好。
你是要我们修改代码bug，还是要一个现成插件？没看懂你的需求
朋友，你这个高亮指的是类似WPS里面那种“高亮”嘛？
然后的话，你可以试试百度的ueditor编辑器，里面可以设置高亮
第一步：找到你的集成的编辑器里面的代码高亮文件如下
ueditor\third-party\SyntaxHighlighter
下面的两个文件
shCoreDefault.css
shCore.js
可以直接调用你的编辑器所在的路径，但是我喜欢单独出来所以你直接copy一份到你自己设定的目录里面。
第二步：调用对应的js和css文件
插件是啥，发出来撒，怕我帮你问题解决了蛮
你的项目现在已集成了 highlight 吗？也就是必须要使用 highlight 吗？ 如果非必须个人建议可以使用 web-highlighter 。
如果必须要使用这个插件，以下代码希望能解决你的问题。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
</head>
<body>
<p>你可以选中目标字或者文字片段，目前效果是选中部分会变成斜体。</p>
<button id="button">选中一些文字，然后点击本按钮</button>
<script>
// 页面加载时，加载标注的部分
document.querySelectorAll('i.code').forEach(el => {
// then highlight each
hljs.highlightElement(el);
});
var oBtn = document.getElementById("button");
oBtn.onclick = function() {
var userSelection, text;
if (window.getSelection) {
userSelection = window.getSelection();
} else if (document.selection) {
userSelection = document.selection.createRange();
}
if (!(text = userSelection.text)) {
text = userSelection;
}
if(text.trim != ""){
var rang = userSelection.getRangeAt(0);
var ele = document.createElement("i");
ele.className = "code";
ele.textContent = text;
rang.surroundContents(ele);
}
};
</script>
</body>
</html>
你可以选中目标字或者文字片段，选中部分会变成斜体。同样段落没选中的不会改变，选中标记后的内容存储后，页面重新加载时只要被标注过的都会被渲染。
以上是解决思路，具体到你的工程，还需要调整。
建议您上外包网站，这里一般求不到长代码，这里只是回答一些小问题（比如报错之类的）
插件是啥，这你得发一下啊,不然咋解决呢