所以我需要找到一种方法，使用 javascript 或 jQuery 将网页中选定的(突出显示的)文本包装到特定的标记中。我设法将一些文本包装到标签中，但问题是每当我的选择包含两个不同的段落时，所选文本就会变成新的段落(即一切都变得一团糟)。这就是我得到的(我正在使用 Google Chrome 扩展中的代码):
var sel = window.getSelection();
var rng = sel.getRangeAt(0);
var wrappingNode = document.createElement("myElement");
wrappingNode.appendChild(rng.extractContents());
rng.insertNode(wrappingNode);
我正试图找到一种方法来防止搞乱网页结构。你们有什么想法吗？？
我的目标是将特定的 css 样式应用到选定的文本。
谢谢!
最佳答案
FF 只是示例，因为 range.createContextualFragment 但可以使用。该 sleep 了!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.highlight {color: red; }
</style>
<script>
function highlight() {
var text, sel, range;
if (window.getSelection) {
text = window.getSelection().toString();
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(range.createContextualFragment('<span class="highlight">'+text+'</span>'));
}
} else if (document.selection && document.selection.createRange) {
text = document.selection.createRange().text;
range = document.selection.createRange();
range.innerHTML = '<span class="highlight">'+text+'</span>';
}
}
</script>
</head>
<body>
<p>lorem ipsum donor kebab</p>
<button onclick="highlight()">Click me</button>
</body>
</html>
关于javascript - 如何使用 JavaScript 或 jQuery 将选定的文本包装到特定标签中的网页中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26208811/