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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
var new_node = text.splitText(offset);

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody splitText(offset) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. 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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
interface Text : CharacterData {
	[NewObject] Text splitText(unsigned long offset);
};

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Text (H1) Text.splitText() (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)