<!--
* @Date: 2024-10-14 10:02:56
* @Description: Modify here please
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Range范圍選區(qū)的理解</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-variant: tabular-nums;
}
.edit {
width: 100%;
min-height: 210px;
overflow-x: hidden;
border: none;
outline: none;
background-color: transparent;
color: #333;
font-size: 14px;
white-space: pre-wrap;
word-break: break-all;
}
p {
line-height: 1.5;
}
</style>
</head>
<body>
<p style="margin-bottom: 20px"><a target="_blank">Range文檔</a></p>
<div class="edit" contenteditable="true" spellcheck="true" id="edit">
<p><span>123456789</span><span style="color: red">高亮啦</span><span>abcde</span></p>
</div>
<script>
// Range 接口表示一個(gè)包含節(jié)點(diǎn)與文本節(jié)點(diǎn)的一部分的文檔片段
var range = document.createRange();
// Selection 對(duì)象表示用戶選擇的文本范圍或插入符號(hào)的當(dāng)前位置。它代表頁(yè)面中的文本選區(qū)，可能橫跨多個(gè)元素。文本選區(qū)由用戶拖拽鼠標(biāo)經(jīng)過(guò)文字而產(chǎn)生。
var s = window.getSelection();
var editRef = document.getElementById("edit");
var spanNode1 = document.getElementsByTagName("span").item(0);
var spanNode2 = document.getElementsByTagName("span").item(1);
var spanNode3 = document.getElementsByTagName("span").item(2);
/**
* 1： 以其它節(jié)點(diǎn)為基準(zhǔn)，來(lái)設(shè)置 Range 的起始點(diǎn)或者終點(diǎn)--- Api
*/
/**
* range.setStartBefore(referenceNode)方法用于將一個(gè)范圍（range）的起始位置設(shè)置在指定的參考節(jié)點(diǎn)（referenceNode）之前。
* 理解為：用于將某個(gè)節(jié)點(diǎn)的起點(diǎn)位置設(shè)置為range對(duì)象的起點(diǎn)位置。
*/
// range.setStartBefore(spanNode1);
/**
* range.setStartAfter(referenceNode)方法用于將一個(gè)范圍（range）的起始點(diǎn)設(shè)置在指定的參考節(jié)點(diǎn)（referenceNode）之后。
* 理解為：用于將某個(gè)節(jié)點(diǎn)的終點(diǎn)位置設(shè)置為range對(duì)象的起點(diǎn)位置。
*/
// range.setStartAfter(spanNode1);
/**
* range.setEndBefore(referenceNode)方法用于將一個(gè)范圍（range）的結(jié)束位置設(shè)置在指定的參考節(jié)點(diǎn)（referenceNode）之前。
* 理解為：用于將某個(gè)節(jié)點(diǎn)的起點(diǎn)位置設(shè)置為range對(duì)象的終點(diǎn)位置。
*/
// range.setEndBefore(spanNode1);
/**
* range.setEndAfter(referenceNode)方法用于將一個(gè)范圍（range）的結(jié)束位置設(shè)置在指定的參考節(jié)點(diǎn)（referenceNode）之后
* 理解為：表示用于將某個(gè)節(jié)點(diǎn)的終點(diǎn)位置設(shè)置為range對(duì)象的終點(diǎn)位置。
*/
// range.setEndAfter(spanNode1);
/**
* 2. 選中節(jié)點(diǎn), 把range的開(kāi)始和結(jié)束
*/
/**
* 2.1 此操作將會(huì)選中spanNode1節(jié)點(diǎn)
*/
// range.setStartBefore(spanNode1);
// range.setEndAfter(spanNode1);
/**
* 2.2 此操作將會(huì)選中spanNode2節(jié)點(diǎn)
*/
// range.setStartAfter(spanNode1);
// range.setEndBefore(spanNode3);
/**
* 3. 選中某個(gè)節(jié)點(diǎn), 把光標(biāo)設(shè)置為節(jié)點(diǎn)的開(kāi)始或結(jié)束位置
*/
// 選中某個(gè)節(jié)點(diǎn)
// range.selectNode(spanNode1);
/**
* ?range.collapse()方法可以將某一區(qū)域或所選內(nèi)容折疊到起始位置或結(jié)束位置。? 折疊后，起始位置和結(jié)束位置會(huì)相同。
* 一個(gè)布爾值： true 折疊到 Range 的 start 節(jié)點(diǎn)，false 折疊到 end 節(jié)點(diǎn)。如果省略，則默認(rèn)為 false
* 要確定 Range 是否已折疊，使用Range.collapsed 屬性
*/
// range.collapse(true);
/**
* 4. Range.setStart(startNode, startOffset)方法用于設(shè)置一個(gè)范圍（Range）的起始位置。
參數(shù)說(shuō)明：
startNode：指定范圍起始位置所在的節(jié)點(diǎn)，可以是一個(gè)元素節(jié)點(diǎn)、文本節(jié)點(diǎn)等。
startOffset：一個(gè)整數(shù)，表示在startNode中的字符偏移量。如果startNode是一個(gè)元素節(jié)點(diǎn)，偏移量表示子節(jié)點(diǎn)的索引；如果startNode是一個(gè)文本節(jié)點(diǎn)，偏移量表示字符位置。
*/
// range.setStart(spanNode1.firstChild, 0);
// range.setEnd(spanNode1.firstChild, 3);
console.log(range);
s.addRange(range);
</script>
</body>
</html>
浙公網(wǎng)安備 33010602011771號(hào)