단일 내부 노드가있는 div가 있습니다.
<section id="Source" class="source">
<div>
test
</div>
</section>
나는 그것의 내용을 얻기 위해 노력하고 있어요와 document.createRange()
및 document.createTreeWalker()
아래에 따라 :
function findEndNode(source, maxHeight) {
const range = document.createRange();
range.selectNodeContents(source);
var nodes = document.createTreeWalker(
source,
NodeFilter.SHOW_ELEMENT,
null,
null
);
while (node = nodes.nextNode()) {
range.setEndBefore(nodes.currentNode);
const {
height
} = range.getBoundingClientRect();
const rangeHeight = height;
if (maxHeight <= rangeHeight) {
console.log('out of bounds');
const newNode = nodes.previousNode();
range.setEndBefore(nodes.currentNode);
break;
} else {
console.log('within bounds');
continue;
}
}
return range;
};
그러나 도중 어딘가에서 가장 안쪽 노드가 손실됩니다.
전체 코드 (스 니펫에 포함)에서 볼 수 있듯이 "테스트"범위는 소스 내부에 남아 있지만 복제로 이동해야합니다.
const source = document.getElementById('Source');
const target = document.getElementById('Target');
const wrapper = document.getElementById('Wrapper');
wordWrap(source);
splitContent(source, target, wrapper);
//splitContent(source, target, wrapper);
function splitContent(source, target, wrapper) {
const {
height
} = target.getBoundingClientRect();
const maxHeight = height;
const range = document.createRange();
const endNode = findEndNode(source, maxHeight);
range.setStart(source, 0);
range.setEnd(endNode.endContainer, endNode.endOffset);
const content = range.extractContents();
const clone = target.cloneNode(false);
clone.id = 'Clone';
clone.appendChild(content);
wrapper.appendChild(clone);
const hasChildren = source.hasChildNodes();
};
function findEndNode(source, maxHeight) {
const range = document.createRange();
range.selectNodeContents(source);
var nodes = document.createTreeWalker(
source,
NodeFilter.SHOW_ELEMENT,
null,
null
);
while (node = nodes.nextNode()) {
range.setEndBefore(nodes.currentNode);
const {
height
} = range.getBoundingClientRect();
const rangeHeight = height;
if (maxHeight <= rangeHeight) {
console.log('out of bounds');
const newNode = nodes.previousNode();
range.setEndBefore(nodes.currentNode);
break;
} else {
console.log('within bounds');
continue;
}
}
return range;
};
function wordWrap(element) {
var nodes = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
null,
null
);
var node;
while (node = nodes.nextNode()) {
var p = node.parentNode;
var text = node.nodeValue;
var m;
while (m = text.match(/^(\s*)(\S+)/)) {
text = text.slice(m[0].length);
p.insertBefore(document.createTextNode(m[1]), node);
var word = p.insertBefore(document.createElement('span'), node);
word.appendChild(document.createTextNode(m[2]));
word.className = 'word';
}
node.nodeValue = text;
}
}
section {
font-family: arial;
font-size: 11pt;
}
.target {
height: 400px;
width: 400px;
border: 2px dashed green;
margin: 20px;
}
.source {
border: 2px dashed blue;
width: 400px;
margin: 20px;
}
#Clone {
border-color: red;
}
<section id="Source" class="source">
<div>
test
</div>
</section>
<div id="Target" class="target">
</div>
<section id="Wrapper">
</section>
엔드 오프셋이 꺼져 있습니다. 에서 findEndNodes
당신은 당신의 현재 코드 오프셋의 수는 setEndAfter를 사용해야 할 때 setEndBefore을 사용하고 있기 때문입니다, 덜 필요한 것보다 하나입니다 가정 노드를 찾을 때.
const source = document.getElementById('Source');
const target = document.getElementById('Target');
const wrapper = document.getElementById('Wrapper');
wordWrap(source);
splitContent(source, target, wrapper);
//splitContent(source, target, wrapper);
function splitContent(source, target, wrapper) {
const {
height
} = target.getBoundingClientRect();
const maxHeight = height;
const range = document.createRange();
const endNode = findEndNode(source, maxHeight);
range.setStart(source, 0);
range.setEnd(endNode.endContainer, endNode.endOffset);
const content = range.extractContents();
const clone = target.cloneNode(false);
clone.id = 'Clone';
clone.appendChild(content);
wrapper.appendChild(clone);
const hasChildren = source.hasChildNodes();
};
function findEndNode(source, maxHeight) {
const range = document.createRange();
range.selectNodeContents(source);
var nodes = document.createTreeWalker(
source,
NodeFilter.SHOW_ELEMENT,
null,
null
);
while (node = nodes.nextNode()) {
range.setEndAfter(nodes.currentNode);
const {
height
} = range.getBoundingClientRect();
const rangeHeight = height;
if (maxHeight <= rangeHeight) {
console.log('out of bounds');
const newNode = nodes.previousNode();
range.setEndAfter(nodes.currentNode);
break;
} else {
console.log('within bounds');
continue;
}
}
return range;
};
function wordWrap(element) {
var nodes = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
null,
null
);
var node;
while (node = nodes.nextNode()) {
var p = node.parentNode;
var text = node.nodeValue;
var m;
while (m = text.match(/^(\s*)(\S+)/)) {
text = text.slice(m[0].length);
p.insertBefore(document.createTextNode(m[1]), node);
var word = p.insertBefore(document.createElement('span'), node);
word.appendChild(document.createTextNode(m[2]));
word.className = 'word';
}
node.nodeValue = text;
}
}
section {
font-family: arial;
font-size: 11pt;
}
.target {
height: 400px;
width: 400px;
border: 2px dashed green;
margin: 20px;
}
.source {
border: 2px dashed blue;
width: 400px;
margin: 20px;
}
#Clone {
border-color: red;
}
<section id="Source" class="source">
<div>
test
</div>
</section>
<div id="Target" class="target">
</div>
<section id="Wrapper">
</section>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다