files/ko/web/api/text/splittext/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

---
title: Text.splitText()
slug: Web/API/Text/splitText
tags:
  - API
  - DOM
  - Text
  - 메소드
translation_of: Web/API/Text/splitText
---
<div>{{apiref("DOM")}}</div>

<p><strong><code>Text.splitText()</code></strong> 메소드는 {{domxref("Text")}} 노드를 지정된 오프셋에서 두 노드로 분리합니다. 두 노드는 sibling으로써 트리에 유지됩니다.</p>

<p>분리한 이후, 현재 노드는 지정된 오프셋 지점까지의 모든 컨텐츠를 포함하며, 새롭게 생성된 같은 타입의 노드는 남아있는 텍스트를 포함합니다. 새롭게 생성된 노드는 호출자에게 반환됩니다. 기존 노드가 부모를 갖고 있다면, 새 노드는 기존 노드의 다음 sibling으로 삽입됩니다. 기존 노드의 길이와 오프셋이 동일하다면, 새롭게 생성된 노드는 데이터를 갖지 않습니다.</p>

<p>분리된 텍스트 노드는 {{domxref("Node.normalize()")}} 메소드를 사용해 이어붙혀질 수 있습니다.</p>

<p>지정된 오프셋이 음수이거나 노드의 텍스트의 16 비트 단위의 수보다 크면 <code>INDEX_SIZE_ERR</code> 값을 갖는 {{domxref("DOMException")}} 을 throw됩니다. <code>NO_MODIFICATION_ALLOWED_ERR</code> 값을 갖는 {{domxref("DOMException")}} 은 노드가 읽기 전용일 때 throw됩니다.</p>

<h2 id="문법">문법</h2>

<pre class="syntaxbox"><em>replacementNode</em> = <em>textnode</em>.splitText(offset)
</pre>

<h2 id="예제">예제</h2>

<p>이 예제에서 {{HTMLElement("p")}} 텍스트 노드는 두 텍스트 노드로 분리되며 그 사이에 {{HTMLElement("span")}} 이 삽입됩니다.</p>

<pre class="brush:html">&lt;body&gt;
  &lt;p id="p"&gt;foobar&lt;/p&gt;

  &lt;script type="text/javascript"&gt;
    var p = document.getElementById('p');
    var textnode = p.firstChild;

    // foo 와 bar 사이를 분리
    var replacementNode = textnode.splitText(3);

    // ' span contents ' 를 포함하는 span을 생성
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(' span contents '));

    // 'bar' 앞에 span을 추가
    p.insertBefore(span, replacementNode);

    // 결과: &lt;p id="p"&gt;foo&lt;span&gt; span contents &lt;/span&gt;bar&lt;/p&gt;
  &lt;/script&gt;
&lt;/body&gt;
</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">코멘트</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>{{SpecName('DOM3 Core')}} 로부터 변경 사항 없음.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>{{SpecName('DOM2 Core')}} 로부터 변경 사항 없음.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>{{SpecName('DOM1')}} 로부터 변경 사항 없음.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>초기 정의.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>


<p>{{Compat("api.Text.splitText")}}</p>

<h2 id="함께_보기">함께 보기</h2>

<ul>
 <li>이 메소드가 속한 {{domxref("Text")}} 인터페이스.</li>
 <li>반대되는 메소드: {{domxref("Node.normalize")}}.</li>
</ul>