Text#
Text.splitText()#
Metoda splitText()
dzieli dany węzeł tekstowy na dwa węzły tekstowe zgodnie z przekazanym przesunięciem w jego danych tekstowych i zwraca referencję do nowego węzła tekstowego.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var new_node = text.splitText(offset);
gdzie poszczególne człony oznaczają:
- new_node - referencja do nowego węzła tekstowego.
- text - węzeł tekstowy będący obiektem kontekstu.
- offset - liczba całkowita określająca przesunięcie, od którego część danych tekstowych (kolejne znaki) aktualnego węzła tekstowego będą dodawane do nowego węzła tekstowego.
Algorytm wywołania metody splitText(offset)
nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć wynik podziału z węzłem tekstowym będącym obiektem kontekstu oraz przesunięciem wskazywanym przez offset.
Warto nadmienić, że argument offset
przekazywany do metody nie może być większy od wartości z właściwości CharacterData.length
danego węzła tekstowego, bo zrzucony zostanie błąd.
Najważniejszą kwestią będzie fakt, że jeśli węzeł tekstowy, na którym wywoływana jest metoda, ma jakiegoś rodzica, to nowy węzeł tekstowy (będący wynikiem podziału) będzie do tego rodzica automatycznie dodawany, jako brat następujący za oryginalnym węzłem tekstowym. Jeśli wartość argumentu offset
będzie równa wartości z właściwości CharacterData.length
danego węzła tekstowego, to dodawany będzie nowy pusty węzeł tekstowy.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function splitData(offset){
var p = document.getElementById("tekst");
var textNode = p.firstChild;
var info = document.getElementById("info");
var flag = true;
if (p.childNodes.length == 1){
flag = false;
info.innerHTML = "Początkowa liczba węzłów tekstowych w akapicie: "
+ p.childNodes.length
+ "<br>" + "Dane tekstowe tego węzła: " + p.firstChild.data
+ "<br>" + "Ilość znaków w węźle: " + p.firstChild.data.length;
var newText = textNode.splitText(offset);
info.innerHTML += "<br><br>"
+ "Liczba węzłów tekstowych w akapicie po pierwszym podziale: "
+ p.childNodes.length
+ "<br>" + "Dane tekstowe akapitu (pierwsze dziecko): " + p.firstChild.data
+ "<br>" + "Dane tekstowe akapitu (drugie dziecko): " + p.childNodes[1].data
+ "<br>" + "Dane tekstowe węzła tekstowego zwracanego z metody: " + newText.data;
}
if (p.childNodes.length > 1 && flag){
var newText = textNode.splitText(offset);
info.innerHTML += "<br><br>"
+ "Liczba węzłów tekstowych w akapicie po kolejnym podziale: "
+ p.childNodes.length
+ "<br>" + "Dane tekstowe nowego węzła tekstowego (mogą być puste): " + newText.data;
}
}
</script>
</head>
<body>
<p>Kliknij konkretny przycisk by podzielić węzeł tekstowy w testowym akapicie.</p>
<input type="button" value="splitText('0')" onclick="splitData('0')">
<input type="button" value="splitText('7')" onclick="splitData('7')">
<input type="button" value="splitText('47')" onclick="splitData('47')">
<p id="tekst" >Węzeł tekstowy umieszczony w testowym akapicie.</p>
<p style="color: blue;">Wynik działania przycisku:</p>
<p id="info"></p>
</body>
</html>
Składnia Web IDL#
interface Text : CharacterData { [NewObject] Text splitText(unsigned long offset); };