जावास्क्रिप्ट का उपयोग करके HTML तत्व के बिना शुद्ध पाठ कैसे प्राप्त करें?

122

मेरे 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  html 
— जॉन
स्रोत
क्या इससे आपके सवाल का जवाब मिलता है? पाठ जावास्क्रिप्ट से पट्टी एचटीएमएल
— KyleMit

जवाबों:

73

[२०१ [-० answer-२५] क्योंकि यह बहुत ही घिनौना उपाय होने के बावजूद स्वीकार किए जाते हैं, मैं इसका जवाब दे रहा हूं, मैं इसमें गबी के कोड को शामिल कर रहा हूं , अपने खुद के बुरे उदाहरण के रूप में सेवा करने के लिए।

<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>
— jcomeau_ictx
स्रोत
3
हैक और धीमी गति से खराब है। क्या कोई गारंटी भी है कि प्रदान किए गए पाठ में कभी भी टैग नहीं होने चाहिए?
— डोमी
1
नहीं, ऐसी कोई गारंटी नहीं है। जब मैंने पोस्ट किया तो मैंने एक डिस्क्लेमर दिया। इसने ओपी के उद्देश्य को स्पष्ट रूप से पूरा किया।
— jcomeau_ictx
3
नियमित भावों के साथ HTML को पार्स करने की कोशिश करना वास्तव में खतरनाक है --- यह व्यावहारिक रूप से असंभव है (मुझे संदेह है कि यह सही होने के लिए सैद्धांतिक रूप से असंभव हो सकता है )। बहुत सारे किनारे मामले हैं और फिर आपका कोड अजीब इनपुट के साथ सामना करने पर उड़ जाता है, जिसका अक्सर एक्सएसएस करने के लिए शोषण किया जा सकता है।
— डेविड
2
मेरा अनुमान है कि इसे क्यों स्वीकार किया गया: यह एक पूर्ण उत्तर है, जिसे तुरंत HTML फ़ाइल में काटकर एक ब्राउज़र के साथ परीक्षण किया जा सकता है। मैंने कभी नहीं कहा कि यह एक अच्छा जवाब था। मैंने सभी अच्छे उत्तरों को देखने के बाद पोस्ट किया, और स्वीकार नहीं किया गया, और लगा कि ओपी को थोड़ा हैंडहोल्डिंग की जरूरत है। यह अभी भी किसी भी अनुप्रयोग के लिए पर्याप्त है जिसके लिए HTML स्रोत पहले से ही असंतुलित कोण कोष्ठक में नहीं होने के लिए जाना जाता है।
— jcomeau_ictx
211

आप इसका उपयोग कर सकते हैं:

var element = document.getElementById('txt');
var text = element.innerText || element.textContent;
element.innerHTML = text;

आप की जरूरत के आधार पर, आप element.innerTextया तो उपयोग कर सकते हैं या element.textContent। वे कई मायनों में भिन्न हैं। innerTextअनुमानित करने की कोशिश करता है कि क्या होगा यदि आप चुनेंगे कि आप क्या देखते हैं (HTML प्रदान की गई है) और इसे क्लिपबोर्ड पर कॉपी करें, जबकि textContentकेवल HTML टैग्स को छीन लेता है और आपको देता है कि क्या बचा है।

innerText पुराने IE ब्राउज़रों (वहाँ से आए) के साथ संगतता भी है।

— गाबी पुरकारू
स्रोत
3
+1 - कुछ उच्च प्रदर्शन textविधि की तलाश में था क्योंकि यह एक लूप में बहुत कुछ करता है। jQuery पर्याप्त प्रदर्शन नहीं कर रहा था, लेकिन यह बहुत तेज़ था। IE8 +, क्रोम, ff में काम किया। उत्तम।
— ट्रैविस जे
2
पुराने IE पर, el.textContentहोगा undefinedऔर el.innerTextहो सकता है ""। लेकिन "" || undefinedहै undefined। का उपयोग करना el.innerText || el.textContent || ''बेहतर हो सकता है।
— ओरिऑल
3
इनर टेक्स्ट कस्टम टेक्स्ट और स्क्रिप्ट के कंटेंट को छिपा नहीं पाता है जबकि टेक्स्टकॉन्टेंट करता है। यदि आप IE के एक संस्करण पर हैं जो textContent का समर्थन करता है, तो इसे पहले उपयोग करना बेहतर हो सकता है, इसलिए el.textContent || el.innerText || ""।
— डोमिनोज
2
वर्तमान में इस उत्तर को पढ़ने वाले किसी भी व्यक्ति के लिए सिर्फ एक नोट, इस उत्तर के छह साल बाद, इन दिनों आप बस उपयोग कर सकते हैं var text = element.textContent;; जब तक कुछ अस्वाभाविक कारण से आपको अभी भी IE8 या नीचे का समर्थन नहीं करना है ।
— बेकार कोड
el.innerTextके रूप में लगभग एक ही है el.textContent.replace(/\W+/g, ' ')। वे एक जैसे नहीं हैं।
— पोलाव
26

यदि आप jquery का उपयोग कर सकते हैं तो इसका सरल

$("#txt").text()
— सरत
स्रोत
8
मुझे सिर्फ इतना कहना है, सभी शुद्ध जेएस उत्तरों को देखें और फिर इस पर गौर करें। यह दूसरा सबसे महत्वपूर्ण कारण है कि मैं jQuery का उपयोग क्यों करता हूं (यानी, यह कार्यों को सरल करता है, मेरे कार्यभार को कम करता है, और पठनीयता बढ़ाता है)। पहला सबसे महत्वपूर्ण कारण (मेरे लिए) है क्योंकि यह कई क्रॉस-कम्पैटिबिलिटी मुद्दों को हैंडल करता है, मुझे अन्यथा इसकी जानकारी भी नहीं हो सकती है (जैसे अस्पष्टता को समायोजित करने के लिए jQuery का उपयोग करना, ताकि मुझे IE8 के लिए एक अलग लाइन न लिखनी पड़े। filterसंपत्ति को लक्षित करने के लिए। मुझे पता है कि शुद्ध जेएस तकनीकी रूप से अधिक कुशल है जब यह गति की बात आती है, लेकिन यह शायद ही अब सबसे सामान्य मामलों में मायने रखती है ..
— VoidKing
8
शुद्ध js एक लाइनर समतुल्य: document.querySelector("#txt").innerText;लोग पूरे jQuery पुस्तकालय को बहुत दूर तक शामिल करते हैं जब उनकी एकमात्र आवश्यकता कोड की कुछ पंक्तियाँ होती हैं। यह बुरा अभ्यास है।
— लेवी जोहानसन
10

यह उत्तर किसी भी HTML तत्व के लिए केवल पाठ प्राप्त करने के लिए काम करेगा।

यह पहला पैरामीटर "नोड" पाठ से प्राप्त करने के लिए तत्व है। दूसरा पैरामीटर वैकल्पिक है और अगर सच है कि तत्वों के भीतर पाठ के बीच एक स्थान जोड़ देगा यदि कोई स्थान अन्यथा वहां मौजूद नहीं होगा।

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;
}
— जेम्स
स्रोत
2

आप की जरूरत के आधार पर, आप element.innerTextया तो उपयोग कर सकते हैं या element.textContent। वे कई मायनों में भिन्न हैं। innerTextअनुमानित करने की कोशिश करता है कि क्या होगा यदि आप चुनेंगे कि आप क्या देखते हैं (HTML प्रदान की गई है) और इसे क्लिपबोर्ड पर कॉपी करें, जबकि textContentकेवल HTML टैग्स को छीन लेता है और आपको देता है कि क्या बचा है।

innerText अब केवल IE के लिए उपयोग नहीं किया जाता है , और यह सभी प्रमुख ब्राउज़रों में समर्थित है । बेशक, इसके विपरीत textContent, पुराने IE ब्राउज़रों के साथ इसकी संगतता है (क्योंकि वे इसके साथ आए थे)।

पूरा उदाहरण ( गबी के जवाब से ):

var element = document.getElementById('txt');
var text = element.innerText || element.textContent; // or element.textContent || element.innerText
element.innerHTML = text;
— मथायस
स्रोत
2

यह मेरे लिए काम करता है जो एक अधिक आधुनिक मानक के साथ यहां कहा गया है, इसके आधार पर संकलित किया गया है। यह कई बार दिखने में सबसे अच्छा काम करता है।

let element = document.querySelectorAll('.myClass')
  element.forEach(item => {
    console.log(item.innerHTML = item.innerText || item.textContent)
  })
— इस्साक गैबल
स्रोत
1

यह काम करना चाहिए:

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/

— इगोर Dymov
स्रोत
1 
function get_content(){
 var returnInnerHTML = document.getElementById('A').innerHTML + document.getElementById('B').innerHTML + document.getElementById('A').innerHTML;
 document.getElementById('txt').innerHTML = returnInnerHTML;
}

इससे हो जाना चाहिए।

0

आज़माएँ (गबी उत्तर विचार का छोटा संस्करण )

function get_content() {
   txt.innerHTML = txt.textContent;
}

कोड स्निपेट दिखाएं

— कामिल कियॉलेजवस्की
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.