जावास्क्रिप्ट के साथ जावास्क्रिप्ट में HTML टैग निकालें


108

मैं जावास्क्रिप्ट में एक स्ट्रिंग से सभी html टैग को हटाने की कोशिश कर रहा हूं। Heres मेरे पास क्या है ... मैं समझ नहीं पा रहा हूँ कि इसका काम क्यों नहीं हो रहा है .... कोई भी जानता है कि मैं क्या गलत कर रहा हूँ?

<script type="text/javascript">

var regex = "/<(.|\n)*?>/";
var body = "<p>test</p>";
var result = body.replace(regex, "");
alert(result);

</script>

आपका बहुत बहुत धन्यवाद!

जवाबों:


237

यह प्रयास करें, यह देखते हुए कि HTML का व्याकरण नियमित अभिव्यक्तियों के लिए 100% सही होने के लिए बहुत जटिल है:

var regex = /(<([^>]+)>)/ig
,   body = "<p>test</p>"
,   result = body.replace(regex, "");

console.log(result);

यदि आप jQuery जैसे किसी पुस्तकालय का उपयोग करने के इच्छुक हैं , तो आप बस ऐसा कर सकते हैं:

console.log($('<p>test</p>').text());

2
आप एक स्ट्रिंग में रेगेक्स को क्यों लपेट रहे हैं? var regex = / (<([^>] +)>) / ig;
रिश्वत

यह काम नहीं करेगा। विशेष रूप से, यह लघु टैग पर विफल रहेगा: is-thought.co.uk/book/sgml-9.htm#SHORTTAG
माइक शमूएल

4
यह एक पुराना प्रश्न है, लेकिन मैं इसे यहां पोस्ट करूंगा
यहोशू

2
इस पर चलने का प्रयास करें "<img src=bogus onerror=alert(1337)"। पहला विफल हो जाता है क्योंकि HTML पार्सर की आवश्यकता नहीं होती है कि अंतिम टैग को एक द्वारा बंद किया जाता है >, और दूसरा विफल रहता है क्योंकि छवि लोड हो रहा है पहले भी एक डोम डोमेन में जोड़े गए डोम पेड़ में जोड़ा जाता है, और $('<img ...>')HTML पार्सर को आमंत्रित करता है।
माइक शमूएल

1
रेगेक्स समाधान भी विफल हो जाएगा यदि एक >विशेषता मूल्य में शामिल है; इस तरह<div data="a + b > c">
MT0

34

यह एक पुराना प्रश्न है, लेकिन मैंने इसे ठोकर खाया और सोचा कि मैं जिस विधि का उपयोग करता हूं उसे साझा करूंगा:

var body = '<div id="anid">some <a href="link">text</a></div> and some more text';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

sanitized अब शामिल होंगे: "some text and some more text"

सरल, कोई jQuery की जरूरत नहीं है, और यह आपको और अधिक जटिल मामलों में भी निराश नहीं करना चाहिए।


हिया। खैर, मूल रूप से यह सब एक नया DIV बनाता है, जो कुछ भी प्रदान किया गया है उसे आंतरिक HTML सामग्री सेट करें (जो मुझे लगता है कि किसी भी HTML कोड को पार्स किया गया है), और फिर div के सभी पाठ सामग्री के लिए पूछता है, जो अनदेखा करता है HTML कहा ।
jsdw

मेरे ब्राउज़र में ऑब्जेक्ट में फ़ील्ड नहीं हैinnerText
एड्रियन

@ अंतिम पंक्ति temp.textContentमौजूद है अगर यह मौजूद है, तो आउटपुट का चयन करेगी , और केवल temp.innerTextयदि यह नहीं है तो प्रयास करें । आपके ब्राउज़र में पूर्व होना चाहिए, लेकिन उन ब्राउज़रों के लिए, जो बाद में उपयोग नहीं किए जाते हैं :)
jsdw

इसे फिर से देखने के बाद (वहाँ बहुत सारे उत्तर हैं)। मैं इस विधि का उपयोग कर रहा हूं। यह वही विधि है जिसका उपयोग पाठ-कोणीय में किया जाता है। उन्होंने कुछ अतिरिक्त जोड़े हैं जिन्हें मैंने इस धागे में शामिल किया है
Rentering.com

यह समाधान मेरे लिए विफल रहा, मैं Angular के लिए @kolkov Text Editor का उपयोग कर रहा हूं।
वसीम अहमद नईम

10

इसने मेरे लिए काम किया।

   var regex = /(&nbsp;|<([^>]+)>)/ig
      ,   body = tt
     ,   result = body.replace(regex, "");
       alert(result);

5
+1 धन्यवाद। यह एक लाइनर मेरी जरूरतों के लिए एकदम सही है। console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
डेवलेगर

6

यह कैसे TextAngular (WYSISYG संपादक) कर रहा है। मैंने इसे सबसे सुसंगत उत्तर भी पाया, जो NO REGEX है।

@license textAngular
Author : Austin Anderson
License : 2013 MIT
Version 1.5.16
// turn html into pure text that shows visiblity
function stripHtmlToText(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    var res = tmp.textContent || tmp.innerText || '';
    res.replace('\u200B', ''); // zero width space
    res = res.trim();
    return res;
}

2

आप प्रबंधन स्ट्रिंग के लिए एक शक्तिशाली पुस्तकालय का उपयोग कर सकते हैं जो कि undrescore.string.js है

_('a <a href="#">link</a>').stripTags()

=> 'एक लिंक'

_('a <a href="#">link</a><script>alert("hello world!")</script>').stripTags()

=> 'एक कड़ी ("हैलो दुनिया!")

इस लिबास को निम्नानुसार आयात करना न भूलें:

        <script src="underscore.js" type="text/javascript"></script>
        <script src="underscore.string.js" type="text/javascript"></script>
        <script type="text/javascript"> _.mixin(_.str.exports())</script>

2
मैंने स्रोत को देखा, और वे वास्तव में आंतरिक रूप से अन्य उत्तर में सुझाए गए उसी रेगेक्स का उपयोग करते हैं।
यूजीन

2

FuncJS नामक मेरी सरल जावास्क्रिप्ट लाइब्रेरी में "स्ट्रिप_टैग्स ()" नामक एक फ़ंक्शन है जो आपके लिए कार्य करता है - बिना किसी नियमित अभिव्यक्ति दर्ज करने की आवश्यकता के।

उदाहरण के लिए, कहें कि आप एक वाक्य से टैग हटाना चाहते हैं - इस फ़ंक्शन के साथ, आप इसे इस तरह से कर सकते हैं:

strip_tags("This string <em>contains</em> <strong>a lot</strong> of tags!");

यह उत्पादन करेगा "इस स्ट्रिंग में बहुत सारे टैग हैं!"।

बेहतर समझ के लिए, कृपया GitHub FuncJS पर प्रलेखन पढ़ें ।

इसके अतिरिक्त, यदि आप चाहें, तो कृपया फ़ॉर्म के माध्यम से कुछ प्रतिक्रिया दें। यह मेरे लिए बहुत उपयोगी होगा!


क्या आप शायद strip_tags()सिर्फ अपनी लाइब्रेरी को बढ़ावा देने और उसे समझाने के बजाय क्या प्रदान कर सकते हैं ? लिंक एपीआई उपयोग की व्याख्या करता है लेकिन ऐसा नहीं करता है
जस्टिन ब्यूडरी

1
ठीक है, यह उस वेबसाइट पर मिला जिसे उन्होंने दिया था,strip_tags = function(e) { var _hasTag, _tag_string; if (!(e === void 0 || e === null || e === "")) { _tag_string = e; if (typeof _tag_string === "object") { _tag_string = _tag_string.outerHTML; } _hasTag = _tag_string.match(/(<([^>]+)>)/ig); if (_hasTag) { return trim(_tag_string.replace(/(<([^>]+)>)/ig, '')); } else { return trim(_tag_string); } } else { throw new Error("The 'strip_tags' function expects one argument in the form of a string or object."); } };
प्राग्रैग स्टोजादिनोविक

1

यह HTML टैग और & nbsp आदि के लिए एक समाधान है और आप HTML के बिना पाठ प्राप्त करने के लिए शर्तों को हटा और जोड़ सकते हैं और आप इसे किसी भी द्वारा बदल सकते हैं।

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}


0
<html>
<head>
<script type="text/javascript">
function striptag(){
var html = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(html, "")
}
</script>
</head> 
<body>
       <form name="myform">
<textarea class="comment" title="comment" name=comment rows=4 cols=40></textarea><br>
<input type="button" value="Remove HTML Tags" onClick="striptag(this.form.comment)">
</form>
</body>
</html>

0

चयनित उत्तर हमेशा यह सुनिश्चित नहीं करता है कि एचटीएमएल छीन लिया गया है, क्योंकि यह अभी भी एक अवैध एचटीएमएल स्ट्रिंग का निर्माण संभव है, इसके माध्यम से निम्नलिखित की तरह एक स्ट्रिंग का निर्माण।

  "<<h1>h1>foo<<//</h1>h1/>"

यह इनपुट सुनिश्चित करेगा कि स्ट्रिपिंग आपके लिए टैग का एक सेट असेंबल करता है और इसके परिणामस्वरूप होगा:

  "<h1>foo</h1>"

इसके अलावा jquery का पाठ फ़ंक्शन पाठ को टैग से घिरा नहीं छोड़ेगा।

यहां एक फ़ंक्शन है जो jQuery का उपयोग करता है लेकिन इन दोनों मामलों के खिलाफ अधिक मजबूत होना चाहिए:

var stripHTML = function(s) {
    var lastString;

    do {            
        s = $('<div>').html(lastString = s).text();
    } while(lastString !== s) 

    return s;
};

0

जिस तरह से मैं करता हूं वह व्यावहारिक रूप से एक-लाइनर है।

फ़ंक्शन एक रेंज ऑब्जेक्ट बनाता है और फिर चाइल्ड कंटेंट के रूप में स्ट्रिंग के साथ रेंज में एक DocumentFragment बनाता है।

फिर यह टुकड़े के पाठ को पकड़ लेता है, किसी भी "अदृश्य" / शून्य-चौड़ाई वाले वर्णों को हटा देता है, और इसे किसी भी अग्रणी / अनुगामी श्वेत स्थान पर ट्रिम कर देता है।

मुझे लगता है कि यह सवाल पुराना है, मुझे लगा कि मेरा समाधान अनूठा था और साझा करना चाहता था। :)

function getTextFromString(htmlString) {
    return document
        .createRange()
        // Creates a fragment and turns the supplied string into HTML nodes
        .createContextualFragment(htmlString)
        // Gets the text from the fragment
        .textContent
        // Removes the Zero-Width Space, Zero-Width Joiner, Zero-Width No-Break Space, Left-To-Right Mark, and Right-To-Left Mark characters
        .replace(/[\u200B-\u200D\uFEFF\u200E\u200F]/g, '')
        // Trims off any extra space on either end of the string
        .trim();
}

var cleanString = getTextFromString('<p>Hello world! I <em>love</em> <strong>JavaScript</strong>!!!</p>');

alert(cleanString);

-1

जैसा दूसरों ने कहा है, रेगेक्स काम नहीं करेगा। मेरे लेख को पढ़ने के लिए कुछ समय निकालें कि आप html को regex के साथ पार्स करने की कोशिश क्यों नहीं कर रहे हैं, जो कि आप तब कर रहे हैं जब आप अपने स्रोत स्ट्रिंग से html को हटाने का प्रयास कर रहे हैं।

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