JS with HTML
<style>
#wrap { border: 1px solid red; width: 200px; }
#wrap div { border: 1px solid red; padding: 10px; margin: 10px; }
.c-1 { width: 160px; }
.c-2 { width: 140px; }
.c-3 { width: 120px; }
.c-4 { width: 100px; }
</style>
<div id="wrap">
<div class="c-1">
Hello
<div class="c-1-1">Welcome</div>
<div class="c-1-2">to my</div>
</div>
<div class="c-2">
Home.
<div class="c-2-1">
I
<div class="c-2-1-1">am</div>
</div>
</div>
<div class="c-3">
Happy
<div class="c-3-1">Today.</div>
</div>
<div class="c-4">
Thanks
<div class="c-4-1">Guys!</div>
</div>
</div>
// 1. 해당 돔 내 children, childNode를 구분한다.
// 2. 리커시브 알고리즘으로 해당 돔 내 텍스트를 모두 불러온다.
// 3. 특정 범위의 텍스트만 뽑는다.
function printStr(from, to) {
// wrap 내 모든 값을 가져온다.
// from, to까지 범위를 선택하는데, 어떻게 선택해야할까?
// 특정 돔을 선택했을 때 해당 돔 아래 텍스트만 가져오는 함수를 만들어본다.
// from부터
let allDiv = $('#wrap').children();
let fromIndex;
let toIndex;
let returnValue = '';
allDiv.each(function(i, o){
let className = $(o).attr('class');
if (from.substr(1) === className) {
fromIndex = i;
} else if (to.substr(1) === className) {
toIndex = i;
}
})
allDiv.splice(fromIndex, toIndex).map(function(o){
returnValue += getText(o);
});
return returnValue;
}
let allStr;
function getText(el, str) {
allStr = str || '';
const $el = $(el);
const contents = $el.contents();
contents.each(function(i, o){
if ($(this)[0].nodeName === 'DIV') {
getText(this, allStr);
} else {
let text = $(this).text().replace(/\n/gi, "").trim();
if (text.length > 0) {
allStr += `${text} `;
}
}
})
return allStr;
}
// `Home. I feel Happy Today.`
// let result = printStr('.c-2', '.c-3');
let result = printStr('.c-2', '.c-3');
console.log(result);
Last updated