রেগেক্সের সাহায্যে জাভাস্ক্রিপ্টে এইচটিএমএল ট্যাগগুলি সরান


108

আমি জাভাস্ক্রিপ্টের স্ট্রিংয়ের বাইরে সমস্ত এইচটিএমএল ট্যাগগুলি সরিয়ে দেওয়ার চেষ্টা করছি। আমার যা আছে তা এখানে ... আমি বুঝতে পারি না কেন এটি কাজ করছে না .... কেউ কী জানি আমি কী ভুল করছি?

<script type="text/javascript">

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

</script>

অনেক ধন্যবাদ!

উত্তর:


237

এটি চেষ্টা করে দেখুন যে, এইচটিএমএল এর ব্যাকরণটি 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
এটি একটি পুরানো প্রশ্ন তবে আমি কেবল এখানে এখানে পোস্ট করব: jsperf.com/regex-replace-vs-jquery-text
জোশুয়া

2
এটি চালিয়ে যাওয়ার চেষ্টা করুন "<img src=bogus onerror=alert(1337)"। প্রথমটি ব্যর্থ হয়েছে কারণ এইচটিএমএল পার্সারের প্রয়োজন হয় না যে শেষ ট্যাগটি একটি দ্বারা বন্ধ করা হবে >, এবং দ্বিতীয়টি ব্যর্থ হয়েছে কারণ একটি পার্সড ডিওএম ট্রি ডিওমে যুক্ত হওয়ার আগেই চিত্র লোডিং শুরু হয় এবং $('<img ...>')এইচটিএমএল পার্সারকে অনুরোধ করে।
মাইক স্যামুয়েল

1
রেগেক্স সলিউশনটিও ব্যর্থ হবে যদি >কোনও অ্যাট্রিবিউট মানের সাথে অন্তর্ভুক্ত করা হয়; এটি পছন্দ করুন<div data="a + b > c">
এমটি 0

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"

সরল, কোনও জিক্যুরির প্রয়োজন নেই এবং এটি আরও জটিল ক্ষেত্রে আপনাকে হতাশ করা উচিত নয়।


ফোন করেই বলা যায়। ঠিক আছে, মূলত এটি যা হয় তা একটি নতুন ডিআইভি তৈরি করা হয়, যা সরবরাহ করা হয় তার অভ্যন্তরীণ এইচটিএমএল বিষয়বস্তু সেট করে (যার অর্থ আমি মনে করি যে কোনও এইচটিএমএল কোড বিশ্লেষণ করা হয়েছে), এবং তারপরে ডিভের সমস্ত পাঠ্য সামগ্রীর জন্য জিজ্ঞাসা করে, যা এইচটিএমএলকে উপেক্ষা করে ।
jsdw

আমার ব্রাউজারে বস্তুর ক্ষেত্র নেইinnerText
অ্যাড্রিয়ান

@ অ্যাড্রিয়ান সর্বশেষ লাইনটি temp.textContentউপস্থিত থাকলে আউটপুট নির্বাচন করবে এবং temp.innerTextএটি না থাকলে কেবল চেষ্টা করবে। আপনার ব্রাউজারটিতে
আগেরটি

এটি আবার দেখার পরে (সেখানে অনেক উত্তর আছে)। আমি এই পদ্ধতিটি ব্যবহার করছি। এটি পাঠ্য-কৌণিক ক্ষেত্রে ব্যবহৃত একই পদ্ধতি। আমি এই থ্রেডে অন্তর্ভুক্ত করেছি এমন একটি অতিরিক্ত অতিরিক্ত যোগ করেছেন তারা
রেন্টার ডটকম 21 21 '21

এই সমাধানটি আমার জন্য ব্যর্থ হয়েছে, আমি কৌনিকের জন্য @ কলোভভ পাঠ্য সম্পাদকটি ব্যবহার করছি।
ওয়াসিম আহমদ না

10

এটি আমার পক্ষে কাজ করেছে।

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

5
+1 ধন্যবাদ এই এক লাইনার আমার প্রয়োজনের জন্য নিখুঁতভাবে জেগেছিলেন। console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
ডেভএলগার

6

এখানে টেক্সটআঙ্গুলার (ডাব্লুওয়াইএসআইজিইজি সম্পাদক) এটি কীভাবে করছে। আমি এটি সর্বাধিক সামঞ্জস্যপূর্ণ উত্তরও পেয়েছি, যা কোনও রেগেক্স নয়।

@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()

=> 'একটি লিঙ্কলোর্ট ("হ্যালো ওয়ার্ল্ড!")'

নিম্নলিখিত হিসাবে এই lib আমদানি করতে ভুলবেন না:

        <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

ফানকজেএস নামে পরিচিত আমার সাধারণ জাভাস্ক্রিপ্ট লাইব্রেরিতে "স্ট্রিপ_ট্যাগস ()" নামে একটি ফাংশন রয়েছে যা আপনাকে কোনও নিয়মিত অভিব্যক্তি প্রবেশের প্রয়োজন ছাড়াই - আপনার পক্ষে কাজ করে।

উদাহরণস্বরূপ, বলুন যে আপনি একটি বাক্য থেকে ট্যাগগুলি মুছে ফেলতে চান - এই ফাংশনটির সাহায্যে আপনি এটি সহজভাবে এটি করতে পারেন:

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

এটি তৈরি করবে "এই স্ট্রিংটিতে প্রচুর ট্যাগ রয়েছে!"।

আরও ভাল বোঝার জন্য দয়া করে গিটিহাব ফানকজেএস- এ ডকুমেন্টেশন পড়ুন ।

অতিরিক্তভাবে, আপনি চাইলে দয়া করে ফর্মের মাধ্যমে কিছু প্রতিক্রিয়া জানান। এটা আমার জন্য খুব সহায়ক হবে!


আপনি strip_tags()কেবল আপনার গ্রন্থাগারটি প্রচার না করে এবং এটি ব্যাখ্যা না করার পরিবর্তে কী সরবরাহ করতে পারেন? লিঙ্কটি API ব্যবহারের ব্যাখ্যা দেয় তবে এটি কী করে তা নয়
জাস্টিন বিউড্রি

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

এটি এইচটিএমএল ট্যাগ এবং & nbsp ইত্যাদির জন্য একটি সমাধান এবং আপনি এইচটিএমএল ছাড়াই পাঠ্য পেতে শর্তগুলি সরিয়ে ফেলতে পারেন এবং এটি যে কোনও দ্বারা প্রতিস্থাপন করতে পারেন।

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 ব্যবহার করে তবে এই দুটি ক্ষেত্রেই আরও দৃ rob় হওয়া উচিত:

var stripHTML = function(s) {
    var lastString;

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

    return s;
};

0

আমি যেভাবে এটি করি তা কার্যত একটি ওয়ানলাইনার।

ফাংশনটি একটি রেঞ্জ অবজেক্ট তৈরি করে এবং তারপরে শিশু সামগ্রীতে স্ট্রিং সহ রেঞ্জের একটি ডকুমেন্টফ্রেগমেন্ট তৈরি করে ।

তারপরে এটি খণ্ডটির পাঠ্য ধরবে, কোনও "অদৃশ্য" / শূন্য-প্রস্থের অক্ষর মুছে ফেলবে এবং এটিকে কোনও শীর্ষস্থানীয় / অনুসরণকারী সাদা স্থান ছাঁটাই করবে।

আমি বুঝতে পারি এই প্রশ্নটি পুরানো, আমি কেবল আমার সমাধানটি অনন্য বলে মনে করেছি এবং ভাগ করে নিতে চাই wanted :)

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

অন্যরা যেমন বলেছে, রেজেক্স কাজ করবে না। আপনি কেন রেজেক্সের সাহায্যে এইচটিএমএলকে পার্স করার চেষ্টা করতে পারবেন না এবং করা উচিত নয় সে সম্পর্কে আমার নিবন্ধটি পড়ার জন্য কিছুক্ষণ সময় নিন , আপনি যখন আপনার উত্সের স্ট্রিং থেকে এইচটিএমএল ফেলা করার চেষ্টা করছেন তখন আপনি এটি করছেন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.