本质上，我正在尝试实现一个在选择时突出显示某些文本的功能。这仅适用于 Google Chrome 浏览器。
例如：
选型前：
<html>
<body>
<p>sample text</p>
</body>
</html>
从“示例文本”中选择“文本”后：
<html>
<body>
<p>sample <span class="state-highlighted">text</span> </p>
</body>
</html>
JavaScript：
document.body.addEventListener("mousedown", (event) => {
document.body.addEventListener("mouseup", (event) => {
// Assume we have checked that mousedown position is different from mouseup position.
// Not sure what to do after this.
});
});
我可以从一个更简单的问题开始：
如何将 span 元素插入到 paragragh 元素中，比如说单击时？
鼠标松开时，调用window.getSelection()得到一个选择 https://developer.mozilla.org/en-US/docs/Web/API/Selection目的。您可以检查它以查找内部所选内容的开始和结束文本<p>。然后更换<p>的 HTML 包围该文本部分<span class="highlighted">:
const p = document.body.querySelector('p');
const origContent = p.textContent;
p.addEventListener('mousedown', () => {
p.textContent = origContent;
});
p.addEventListener('mouseup', (e) => {
const selection = window.getSelection();
if (!selection) {
return;
}
const range = selection.getRangeAt(0);
// If user starts highlighting on the right, and drags mouse to the left,
// endOffset will be smaller than startOffset:
const startIndex = Math.min(range.startOffset, range.endOffset);
const { length } = String(selection);
const endIndex = startIndex + length;
p.textContent = p.textContent;
p.innerHTML = (
p.textContent.slice(0, startIndex) +
'<span class="highlighted">' +
selection +
'</span>' +
p.textContent.slice(endIndex)
);
});
.highlighted {
background-color: orange;
}
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
如果用户可能一次选择文本的多个部分，并且您想要突出显示两个不连续的文本片段，则可以迭代从 0 到selection.rangeCount并对原始上下文进行切片以相应地创建新的 HTML。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
