다음과 같은 HTML에 1 버튼과 일부 텍스트가 있습니다.
function get_content(){
// I don't know how to do in here!!!
}
<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>
사용자가 버튼을 클릭하면의 콘텐츠 <p id='txt'>
가 다음과 같은 예상 결과가됩니다.
<p id='txt'>
// All the HTML element within the <p> will be disappear
I am working in ABC company.
</p>
누구든지 JavaScript 함수를 작성하는 방법을 도울 수 있습니까?
감사합니다.
답변
[2017-07-25]이 답변이 계속해서 받아 들여지고 있기 때문에 매우 해키 한 솔루션 임에도 불구하고 Gabi 의 코드를 여기에 통합하고 제 자신의 코드를 나쁜 예로 남겨 둡니다.
<style>
.A {background: blue;}
.B {font-style: italic;}
.C {font-weight: bold;}
</style>
<script>
// my hacky approach:
function get_content() {
var html = document.getElementById("txt").innerHTML;
document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
var element = document.getElementById('txt');
element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
txt.innerHTML = txt.innerText || txt.textContent;
}
</script>
<input type="button" onclick="get_content()" value="Get Content (bad)"/>
<input type="button" onclick="gabi_content()" value="Get Content (good)"/>
<input type="button" onclick="txt_content()" value="Get Content (shortest)"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>
답변
이것을 사용할 수 있습니다 :
var element = document.getElementById('txt');
var text = element.innerText || element.textContent;
element.innerHTML = text;
필요한 항목에 따라 element.innerText
또는을 사용할 수 있습니다 element.textContent
. 그들은 여러면에서 다릅니다. innerText
보이는 것을 선택하고 (렌더링 된 html) 클립 보드에 복사하면 어떤 일이 발생할지 대략적으로 추정하는 반면 textContent
, html 태그를 제거하고 남은 것을 제공합니다.
innerText
또한 이전 IE 브라우저와 호환성이 있습니다.
답변
jquery를 사용할 수 있다면 간단합니다.
$("#txt").text()
답변
이 답변은 모든 HTML 요소에 대한 텍스트를 얻는 데 효과적입니다.
이 첫 번째 매개 변수 “node”는 텍스트를 가져올 요소입니다. 두 번째 매개 변수는 선택 사항이며 true 인 경우 공백이 없으면 요소 내의 텍스트 사이에 공백이 추가됩니다.
function getTextFromNode(node, addSpaces) {
var i, result, text, child;
result = '';
for (i = 0; i < node.childNodes.length; i++) {
child = node.childNodes[i];
text = null;
if (child.nodeType === 1) {
text = getTextFromNode(child, addSpaces);
} else if (child.nodeType === 3) {
text = child.nodeValue;
}
if (text) {
if (addSpaces && /\S$/.test(result) && /^\S/.test(text)) text = ' ' + text;
result += text;
}
}
return result;
}
답변
필요한 항목에 따라 element.innerText
또는을 사용할 수 있습니다 element.textContent
. 그들은 여러면에서 다릅니다. innerText
보이는 것을 선택하고 (렌더링 된 html) 클립 보드에 복사하면 어떤 일이 발생할지 대략적으로 추정하는 반면 textContent
, html 태그를 제거하고 남은 것을 제공합니다.
innerText
더이상 IE 사용되지 , 그것은되어 모든 주요 브라우저에서 지원 . 물론,와는 달리 textContent
이전 IE 브라우저와 호환성이 있습니다.
완전한 예 ( Gabi의 답변에서 ) :
var element = document.getElementById('txt');
var text = element.innerText || element.textContent; // or element.textContent || element.innerText
element.innerHTML = text;
답변
이것은 더 현대적인 표준으로 여기에서 말한 것을 기반으로 컴파일되었습니다. 이것은 여러 조회에 가장 적합합니다.
let element = document.querySelectorAll('.myClass')
element.forEach(item => {
console.log(item.innerHTML = item.innerText || item.textContent)
})
답변
작동합니다.
function get_content(){
var p = document.getElementById("txt");
var spans = p.getElementsByTagName("span");
var text = '';
for (var i = 0; i < spans.length; i++){
text += spans[i].innerHTML;
}
p.innerHTML = text;
}
이 바이올린을 사용해보십시오 : http://jsfiddle.net/7gnyc/2/