Tanlash va Range

Hujjatdagi matn yoki elementlarni tanlash brauzerda ikki bosqichli tushuncha bilan ifodalanadi: Range — hujjatning ma'lum bir qismi (boshlanish va tugash nuqtalari bilan), Selection esa — foydalanuvchi yoki dastur belgilagan joriy tanlov. Ushbu darsda ular qanday ishlashini va dastur orqali qanday boshqarilishini ko'ramiz.

Range obyekti

Range — hujjatdagi ikki nuqta orasidagi qismni ifodalaydi. Har bir nuqta ikkita qiymat bilan beriladi: tugun (node) va uning ichidagi siljish (offset).

let range = new Range();

Boshlanish va tugash nuqtalari setStart va setEnd bilan o'rnatiladi:

• range.setStart(node, offset) — boshlanish nuqtasini o'rnatadi;
• range.setEnd(node, offset) — tugash nuqtasini o'rnatadi.

Bu yerda offset ikki xil ma'noga ega:

• Agar node — matn tuguni bo'lsa, offset matn ichidagi belgi (harf) pozitsiyasi;
• Agar node — element bo'lsa, offset uning bola tugunlari orasidagi pozitsiya.

setStart va setEnd

Aytaylik, sahifada <p id="matn">Salom, dunyo!</p> bor. Matndagi 'Salom' so'zini tanlaymiz — bu <p>ning birinchi matn tuguni ichidagi 0-belgidan 5-belgigacha:

let p = document.getElementById('matn');
let textNode = p.firstChild; // matn tuguni: 'Salom, dunyo!'

let range = new Range();
range.setStart(textNode, 0);  // 0-belgidan
range.setEnd(textNode, 5);    // 5-belgigacha (S-a-l-o-m)

console.log(range.toString()); // 'Salom'

range.toString() tanlangan qismning matnli ko'rinishini qaytaradi.

Elementlarni qamrab olish

Nuqta faqat matn ichida emas, elementlar orasida ham bo'lishi mumkin. Masalan, <p> ichida <i> va <b> teglari bor deylik. Ularning bir qismini tanlash uchun offset bola tugun indeksini bildiradi:

// <p>Bu <i>muhim</i> va <b>qalin</b> matn</p>
let p = document.getElementById('matn');

let range = new Range();
range.setStart(p, 0);  // birinchi bola tugundan oldin
range.setEnd(p, 2);    // ikkinchi bola tugungacha

// natijada 'Bu <i>muhim</i>' qismi tanlanadi
console.log(range.toString());

Yana qulay usullar mavjud:

• range.selectNode(node) — tugunni butunlay (o'zi bilan birga) tanlaydi;
• range.selectNodeContents(node) — tugunning faqat ichini tanlaydi;
• range.setStartBefore(node) / setStartAfter(node) — tugundan oldin/keyin boshlaydi;
• range.setEndBefore(node) / setEndAfter(node) — tugundan oldin/keyin tugatadi;
• range.collapse(toStart) — Range'ni bir nuqtaga siqadi (bo'sh qiladi).

Range xususiyatlari

Range obyekti quyidagi asosiy xususiyatlarga ega:

• startContainer, startOffset — boshlanish tuguni va siljishi;
• endContainer, endOffset — tugash tuguni va siljishi;
• collapsed — agar boshlanish va tugash bir xil bo'lsa (bo'sh Range) true;
• commonAncestorContainer — barcha tanlangan tugunlarning eng yaqin umumiy ajdodi.

Range bilan amallar

Range orqali tanlangan qismni nusxalash, o'chirish yoki chiqarib olish mumkin:

• range.deleteContents() — tanlangan qismni hujjatdan o'chiradi;
• range.extractContents() — o'chiradi va DocumentFragment sifatida qaytaradi;
• range.cloneContents() — hujjatga tegmasdan nusxasini DocumentFragment qilib qaytaradi;
• range.insertNode(node) — Range boshiga yangi tugun kiritadi;
• range.surroundContents(node) — tanlangan qismni berilgan tugun ichiga o'raydi.

let range = new Range();
range.setStart(textNode, 0);
range.setEnd(textNode, 5);

// tanlangan 'Salom' qismini <mark> ichiga o'raymiz
let mark = document.createElement('mark');
range.surroundContents(mark);

Selection obyekti

Range — bu shunchaki hujjatning bir qismi; u hali ekranda ko'rinmaydi. Foydalanuvchi ko'rgan haqiqiy tanlovni Selection obyekti ifodalaydi. Uni window.getSelection() yoki document.getSelection() orqali olamiz:

let selection = window.getSelection();

Nazariy jihatdan bir tanlov bir nechta Range'dan iborat bo'lishi mumkin (masalan, Firefox'da Ctrl bilan bir nechta qismni tanlash mumkin), ammo amalda ko'pchilik brauzerlarda bitta Range bo'ladi.

Selectionning asosiy xususiyatlari:

• anchorNode, anchorOffset — tanlov boshlangan nuqta (foydalanuvchi bosgan joy);
• focusNode, focusOffset — tanlov tugagan nuqta (kursor hozir turgan joy);
• isCollapsed — tanlov bo'shmi (faqat kursor turibdimi);
• rangeCount — tanlovdagi Range'lar soni.

getSelection va matnni o'qish

Foydalanuvchi tanlagan matnni olishning eng oson yo'li — Selectionni matnga aylantirish:

document.onselectionchange = function() {
  let selection = document.getSelection();
  console.log('Tanlangan matn: ' + selection.toString());
};

selectionchange hodisasi tanlov har o'zgarganda ishga tushadi. Bu tanlangan matnni real vaqtda kuzatish uchun qulay.

Agar Range darajasida ishlash kerak bo'lsa:

let selection = document.getSelection();

if (selection.rangeCount > 0) {
  let range = selection.getRangeAt(0);
  console.log(range.startContainer, range.startOffset);
  console.log(range.endContainer, range.endOffset);
}

Dastur orqali tanlash

Tanlovni faqat o'qibgina qolmay, dastur orqali o'rnatish ham mumkin. Buning uchun avval Range tuzamiz, keyin uni tanlovga qo'shamiz:

let p = document.getElementById('matn');
let textNode = p.firstChild;

// 'Salom' so'zini qamrab oluvchi Range
let range = new Range();
range.setStart(textNode, 0);
range.setEnd(textNode, 5);

let selection = window.getSelection();
selection.removeAllRanges();  // avvalgi tanlovni tozalaymiz
selection.addRange(range);    // yangi tanlovni o'rnatamiz

Selectionda bir necha qulay metodlar bor:

• selection.addRange(range) — tanlovga Range qo'shadi;
• selection.removeAllRanges() — barcha tanlovni olib tashlaydi;
• selection.collapse(node, offset) — tanlovni bir nuqtaga siqadi;
• selection.selectAllChildren(node) — tugunning barcha bolalarini tanlaydi;
• selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset) — anchor va focusni bir yo'la o'rnatadi;
• selection.deleteFromDocument() — tanlangan matnni hujjatdan o'chiradi.

Form maydonlaridagi tanlash

Muhim istisno: <input> va <textarea> maydonlarida yuqoridagi Range/Selection ishlamaydi. Ular oddiy matndan iborat bo'lgani uchun o'zining alohida, soddaroq API'siga ega:

• input.selectionStart, input.selectionEnd — tanlovning boshi va oxiri (belgi indekslari);
• input.selectionDirection — tanlov yo'nalishi;
• input.select() — barcha matnni tanlaydi;
• input.setSelectionRange(start, end) — tanlovni o'rnatadi;
• input.setRangeText(replacement, start, end) — tanlangan qismni matn bilan almashtiradi.

let input = document.getElementById('maydon');

input.onclick = function() {
  // birinchi 5 ta belgini tanlaymiz
  input.setSelectionRange(0, 5);
  input.focus();
};

Xulosa

• Range — hujjatning bir qismi; setStart(node, offset) va setEnd(node, offset) bilan nuqtalari belgilanadi;
• offset matn tugunida — belgi indeksi, elementda — bola tugun indeksi;
• Range orqali qismni o'chirish, nusxalash, o'rash mumkin: deleteContents, extractContents, surroundContents va h.k.;
• Selection — foydalanuvchi ko'rgan joriy tanlov; window.getSelection() orqali olinadi;
• selection.toString() — tanlangan matn; getRangeAt(0) — Range darajasi;
• Dastur orqali tanlash: removeAllRanges() + addRange(range), yoki selectAllChildren(node);
• <input>/<textarea> uchun alohida API: selectionStart, setSelectionRange va boshqalar.