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


655

জাভাস্ক্রিপ্টে এইচটিএমএল এর স্ট্রিং নেওয়া এবং এইচটিএমএল কে ফেলার সহজ উপায় কি আছে?

উত্তর:


760

আপনি যদি কোনও ব্রাউজারে চলছেন, তবে সহজতম উপায় হ'ল ব্রাউজারটি এটি আপনার জন্য করা ...

function stripHtml(html)
{
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

দ্রষ্টব্য: লোকেদের মন্তব্যে যেমন উল্লেখ করা হয়েছে, আপনি যদি HTML এর উত্সটি নিয়ন্ত্রণ না করেন তবে এটি সর্বোত্তমভাবে এড়ানো হবে (উদাহরণস্বরূপ, ব্যবহারকারীর ইনপুট থেকে আসতে পারে এমন কোনও কিছুতে এটি চালাবেন না)। এই পরিস্থিতিগুলির জন্য, আপনি ব্রাউজারটিকে এখনও আপনার জন্য কাজ করতে দিতে পারেন - এখন বহুল-উপলভ্য DOMParser ব্যবহারের জন্য সাবার উত্তর দেখুন


40
কেবল মনে রাখবেন যে এই পদ্ধতির পরিবর্তে অসঙ্গতিপূর্ণ এবং নির্দিষ্ট ব্রাউজারগুলিতে নির্দিষ্ট অক্ষরগুলি ছাঁটাই করতে ব্যর্থ হবে। উদাহরণস্বরূপ, প্রোটোটাইপ.জেজে, আমরা পারফরম্যান্সের জন্য এই পদ্ধতিটি ব্যবহার করি তবে কিছু ঘাটতিগুলি নিয়ে কাজ করি - github.com/kangax/prototype/blob/…
kangax

11
মনে রাখবেন আপনার সাদা স্থানটি গোলমাল করবে। আমি এই পদ্ধতিটি ব্যবহার করতাম এবং তারপরে সমস্যা হয়েছিল কারণ নির্দিষ্ট পণ্য কোডগুলিতে ডাবল স্পেস থাকে, যা আমি ডিআইভি থেকে ইনটারনেক্সট ফিরে পাওয়ার পরে একক স্পেস হিসাবে শেষ হয়েছিল। তারপরে অ্যাপ্লিকেশনটির পরে পণ্য কোডগুলি মেলে না।
ম্যাগনাস স্মিথ

11
@ ম্যাগনাস স্মিথ: হ্যাঁ, যদি হোয়াইট স্পেসটি উদ্বেগজনক হয় - বা সত্যই, যদি আপনার এই পাঠ্যের জন্য এমন কোনও প্রয়োজন থাকে যা আপনি যে নির্দিষ্ট এইচটিএমএল DOM এর সাথে সরাসরি কাজ করছেন তার সাথে জড়িত না - তবে আপনি অন্যটির একটি ব্যবহার করা ভাল you're সমাধান এখানে দেওয়া। এই পদ্ধতির প্রাথমিক সুবিধাগুলি হ'ল এটি 1) তুচ্ছ এবং 2) আপনি যে ব্রাউজারটি চালাচ্ছেন ঠিক সেইভাবে ট্যাগ, সাদা স্থান, সত্তা, মন্তব্য ইত্যাদির উপর নির্ভরযোগ্যভাবে প্রক্রিয়া করবে । এটি ওয়েব ক্লায়েন্ট কোডের জন্য প্রায়শই কার্যকর, তবে নিয়মগুলি পৃথক করে এমন অন্যান্য সিস্টেমের সাথে যোগাযোগের জন্য প্রয়োজনীয় নয়।
শোগ 9

220
অবিশ্বস্ত উত্স থেকে এইচটিএমএল দিয়ে এটি ব্যবহার করবেন না। কেন তা দেখতে, দৌড়াতে চেষ্টা করুনstrip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
মাইক স্যামুয়েল

24
যদি এইচটিএমএলতে চিত্র থাকে (আইএমজি ট্যাগ), ছবিগুলি ব্রাউজারের দ্বারা অনুরোধ করা হবে। এটা ভালো না.
douyw

589
myString.replace(/<[^>]*>?/gm, '');

4
<img src=http://www.google.com.kh/images/srpr/nav_logo27.png onload="alert(42)" আপনি যদি ইনজেকশন দেওয়ার আগে document.writeএকটি স্ট্রিং দিয়ে ইনজেকশন দিচ্ছেন বা কনটেনটেটিং করছেন তবে এর জন্য কাজ করে না । >innerHTML
মাইক স্যামুয়েল

1
@ পেরিশেবল ডেভ, আমি একমত যে >দ্বিতীয়টি বাকি থাকবে। যদিও এটি কোনও ইনজেকশন বিপত্তি নয়। বিপত্তিটি <প্রথমদিকে বামের কারণে ঘটে থাকে , যার ফলে এইচটিএমএল পার্সার যখন দ্বিতীয় শুরু হয় তখন ডেটা স্টেট ব্যতীত অন্য প্রসঙ্গে থাকতে পারে । নোট করুন এখানে ডেটা অবস্থা থেকে কোনও রূপান্তর নেই >
মাইক স্যামুয়েল

73
@ মাইকসামুয়েল আমরা এখনও এই উত্তর সম্পর্কে সিদ্ধান্ত নিয়েছি? নিষ্পাপ ব্যবহারকারী এখানে অনুলিপি-প্রস্তুত করতে প্রস্তুত।
জিগি

1
এটিও, আমি বিশ্বাস করি, <button onClick="dostuff('>');"></button>সঠিকভাবে লিখিত এইচটিএমএল ধরে নেওয়ার মতো কিছু দেওয়া হলে , আপনাকে এখনও বিভ্রান্ত হয়ে পড়েছে , আপনাকে এখনও বিবেচনায় নেওয়া দরকার যে কোনও গুণাবলীর উদ্ধৃত পাঠ্যের চেয়ে বড় চিহ্নটি কোথাও হতে পারে। এছাড়াও আপনি <script>ট্যাগগুলির অন্তর্ভুক্ত সমস্ত পাঠ্য অপসারণ করতে চান ।
জোনাথন

15
@ অ্যান্টোনিওম্যাক্স, আমি এই প্রশ্নের উত্তরটি নোসামের মধ্যে দিয়েছি , তবে আপনার প্রশ্নের মূল বিষয়বস্তু হিসাবে, কারণ সুরক্ষা সমালোচনামূলক কোডটি অনুলিপি করা এবং আটকানো উচিত নয়। আপনার একটি লাইব্রেরি ডাউনলোড করা উচিত এবং এটি আপ টু ডেট এবং প্যাচ করা উচিত যাতে আপনি সন্ধান করা দুর্বলতা এবং ব্রাউজারগুলির পরিবর্তনের বিরুদ্ধে সুরক্ষিত হন।
মাইক স্যামুয়েল

249

সহজ উপায়:

jQuery(html).text();

এটি এইচটিএমএল এর স্ট্রিং থেকে সমস্ত পাঠ্য পুনরুদ্ধার করে।


111
আমরা সবসময় প্রকল্পগুলির জন্য jQuery ব্যবহার করি যেহেতু আমাদের প্রকল্পগুলিতে অবিচ্ছিন্নভাবে জাভাস্ক্রিপ্ট রয়েছে। অতএব আমরা যোগ করা হয়নি বাল্ক, আমরা বিদ্যমান API কোড সুবিধা গ্রহণ ...
মার্ক

32
আপনি এটি ব্যবহার করেন, তবে ওপি নাও পারে। প্রশ্ন ছিল জাভাস্ক্রিপ্ট নট জিকুয়েরি সম্পর্কে।
ডেমেন্টিক

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

27
@ ডেমেন্টিক শোকজনকভাবে, আমি একাধিক উত্তর সহ থ্রেডগুলিকে সর্বাধিক দরকারী বলে মনে করি কারণ প্রায়শই একটি দ্বিতীয় উত্তর আমার সঠিক চাহিদা পূরণ করে, যখন প্রাথমিক উত্তরটি সাধারণ ক্ষেত্রে পূরণ করে।
এরিক গোল্ডবার্গ

36
আপনি স্ট্রিংয়ের কিছু অংশ এইচটিএমএল ট্যাগে মোড়ানো না হলে এটি কাজ করবে না। উদাহরণস্বরূপ "<b> ত্রুটি: </ b> দয়া করে একটি বৈধ ইমেল প্রবেশ করুন" কেবল "ত্রুটি:" ফিরে আসবে
আমির আফ্রিদি

127

আমি শোগ 9 এর অনুমোদিত উত্তরের একটি সম্পাদিত সংস্করণ ভাগ করতে চাই ।


মাইক স্যামুয়েল যেমন একটি মন্তব্যে ইঙ্গিত করেছেন, সেই ফাংশনটি ইনলাইন জাভাস্ক্রিপ্ট কোডগুলি কার্যকর করতে পারে।
তবে "ব্রাউজারটি এটি আপনার জন্য করুন ..." বলার সময় শোগ 9 ঠিক আছে "

সুতরাং .. এখানে আমার সম্পাদিত সংস্করণটি, ডোম পার্সার ব্যবহার করে :

function strip(html){
   var doc = new DOMParser().parseFromString(html, 'text/html');
   return doc.body.textContent || "";
}

ইনলাইন জাভাস্ক্রিপ্ট পরীক্ষা করার জন্য কোড এখানে:

strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")

এছাড়াও, এটি পার্সে সংস্থার অনুরোধ করে না (চিত্রগুলির মতো)

strip("Just text <img src='https://assets.rbl.ms/4155638/980x.jpg'>")

3
এটি যুক্ত করা উচিত যে এই সমাধানটি কেবল ব্রাউজারে কাজ করে।
kris_IV

1
এটি স্ট্রিপ ট্যাগ নয়, তবে আরও পিএইচপি এইচটিএমএল স্পেশালচার্স () এর মতো। এখনও আমার জন্য দরকারী।
দান্ত্জে

দ্রষ্টব্য যে এটি পাঠ্যের শুরু থেকে সাদা স্থান সরিয়ে দেয়।
রাইন শ্রদ্ধেয়

এছাড়াও লক্ষণীয়, এটি ওয়েব ওয়ার্কার্সে কাজ করে
ক্রিস সিফার্ট

এটি @ শোগ 9 এর উত্তরের চেয়ে অনেক বেশি দ্রুত বলে মনে হচ্ছে
কামেনস্কি

55

JQuery পদ্ধতির এক্সটেনশন হিসাবে, যদি আপনার স্ট্রিংটিতে এইচটিএমএল না থাকতে পারে (যেমন আপনি যদি কোনও ফর্ম ক্ষেত্র থেকে এইচটিএমএল সরানোর চেষ্টা করছেন)

jQuery(html).text();`

এইচটিএমএল না থাকলে একটি খালি স্ট্রিং ফিরিয়ে দেবে

ব্যবহার করুন:

jQuery('<p>' + html + '</p>').text();

পরিবর্তে.

আপডেট: মন্তব্যগুলিতে যেমন উল্লেখ করা হয়েছে, কিছু পরিস্থিতিতে এই সমাধানটির মধ্যে থাকা জাভাস্ক্রিপ্ট কার্যকর করা হবে htmlযদি htmlকোনও আক্রমণকারীর দ্বারা প্রভাবিত হতে পারে তবে ভিন্ন সমাধান ব্যবহার করুন।


12
বা$("<p>").html(html).text();
দিমিতর দিমিত্রভ

4
এটি সম্ভবত বিপজ্জনক কোডটি কার্যকর করেjQuery('<span>Text :) <img src="a" onerror="alert(1)"></span>').text()
সাইমন

jQuery চেষ্টা করুন ("aa & # X003c; স্ক্রিপ্ট> সতর্কতা (1) & # X003c; / স্ক্রিপ্ট> a") text পাঠ্য ();
গ্রজেগোর্জ কাকজান

41

হাইপারলিংক (একটি href) অক্ষত অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে অক্ষরে রাখার জন্য প্লেইন টেক্সট ইমেল করার জন্য এইচটিএমএল রূপান্তর করা

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

গুগল অনুসন্ধানের দীর্ঘ সময় পরে আমি এবং আমার কলেজগুলি জাভাস্ক্রিপ্টে রেজেক্স ইঞ্জিন ব্যবহার করে এটি নিয়ে এসেছি:

str='this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
';
str=str.replace(/<br>/gi, "\n");
str=str.replace(/<p.*>/gi, "\n");
str=str.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<(?:.|\s)*?>/g, "");

strপরিবর্তনশীল এই মত শুরু হয়:

this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>

এবং তারপরে কোডটি চালানোর পরে এটি দেখতে এরকম দেখাচ্ছে:

this string has html code i want to remove
Link Number 1 -> BBC (Link->http://www.bbc.co.uk)  Link Number 1


Now back to normal text and stuff

আপনি দেখতে পাচ্ছেন যে সমস্ত এইচটিএমএল সরিয়ে ফেলা হয়েছে এবং হাইপার-লিঙ্কযুক্ত পাঠ্যটির সাথে লিঙ্কটি স্থির করা হয়েছে এখনও অক্ষত। এছাড়াও আমি এর সাথে ট্যাগগুলি <p>এবং প্রতিস্থাপন করেছি<br>\n (সম্পর্কে newline গৃহস্থালির কাজ) যাতে চাক্ষুষ বিন্যাস কিছু বাছাই অপরিবর্তিত রাখা হয়েছে।

লিঙ্ক ফর্ম্যাটটি (উদাহরণস্বরূপ BBC (Link->http://www.bbc.co.uk)) পরিবর্তন করতে কেবল সম্পাদনা করুন $2 (Link->$1), যেখানে $1href ইউআরএল / ইউআরআই এবং $2হাইপারলিঙ্কযুক্ত পাঠ্য। প্লেইন পাঠ্যের মূল লিঙ্কগুলির সাথে বেশিরভাগ এসএমটিপি মেল ক্লায়েন্টগুলি এগুলিকে রূপান্তর করে যাতে ব্যবহারকারীর তাদের ক্লিক করার ক্ষমতা থাকে।

আশা করি আপনি এটি দরকারী পাবেন।


এটি "& nbsp;" পরিচালনা করে না
রোজ নেটটোয়র

33

গৃহীত উত্তরের একটি উন্নতি।

function strip(html)
{
   var tmp = document.implementation.createHTMLDocument("New").body;
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

এভাবে চলমান কিছু কোনও ক্ষতি করবে না:

strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")

ফায়ারফক্স, ক্রোমিয়াম এবং এক্সপ্লোরার 9+ নিরাপদ। অপেরা প্রেস্টো এখনও দুর্বল। এছাড়াও স্ট্রিংগুলিতে উল্লিখিত চিত্রগুলি ক্রোমিয়াম এবং ফায়ারফক্সে HTTP অনুরোধগুলি সংরক্ষণ করা হয় না।


এটি সেখানকার কিছু উপায়, তবে নিরাপদ নয়<script><script>alert();
আর্থ

1
এটি লিনাক্সের ক্রোমিয়াম / অপেরা / ফায়ারফক্সে কোনও স্ক্রিপ্ট চালায় না, তবে এটি নিরাপদ নয় কেন?
জানঘৌ

আমার ক্ষমা, আমার অবশ্যই মিস-টেস্ট করা উচিত, আমি সম্ভবত জেএসফিডেলে আবার রান ক্লিক করতে ভুলে গেছি forgot
আর্থ

"নতুন" যুক্তিটি অতিমাত্রায়, আমার মনে হয়?
জন স্নাইডার

চশমা অনুসারে এটি আজকাল alচ্ছিক, তবে এটি সর্বদা ছিল না।
জানুঘু

23

এটি কোনও জাভাস্ক্রিপ্ট পরিবেশে কাজ করা উচিত (নোডজেএস অন্তর্ভুক্ত)।

const text = `
<html lang="en">
  <head>
    <style type="text/css">*{color:red}</style>
    <script>alert('hello')</script>
  </head>
  <body><b>This is some text</b><br/><body>
</html>`;

// Remove style tags and content
text.replace(/<style[^>]*>.*<\/style>/gm, '')
    // Remove script tags and content
    .replace(/<script[^>]*>.*<\/script>/gm, '')
    // Remove all opening, closing and orphan HTML tags
    .replace(/<[^>]+>/gm, '')
    // Remove leading spaces and repeated CR/LF
    .replace(/([\r\n]+ +)+/gm, '');

@pstanton আপনি কি আপনার বক্তব্যের কার্যকারী উদাহরণ দিতে পারবেন?
কার্ল.এস

3
<html><style..>* {font-family:comic-sans;}</style>Some Text</html>
pstanton

@ পেস্ট্যান্টন আমি কোডটি স্থির করেছি এবং মন্তব্যগুলি যুক্ত করেছি, দেরিতে প্রতিক্রিয়ার জন্য দুঃখিত।
কার্ল.এস

15

আমি রদবদল Jibberboy2000 এর উত্তর বেশ কিছু অন্তর্ভুক্ত করা <BR />ট্যাগটি ফরম্যাট অপসারণ সবকিছু ভিতরে <SCRIPT>এবং<STYLE> ট্যাগগুলি মুছে ফেলার জন্য, একাধিক লাইন বিরতি এবং স্পেসগুলি সরিয়ে ফলাফলের এইচটিএমএলকে ফর্ম্যাট করতে এবং কিছু এইচটিএমএল-এনকোড । কিছু পরীক্ষার পরে দেখা যাচ্ছে যে আপনি বেশিরভাগ পূর্ণ ওয়েব পৃষ্ঠাগুলিকে সাধারণ পাঠ্যে রূপান্তর করতে পারেন যেখানে পৃষ্ঠার শিরোনাম এবং সামগ্রী বজায় রাখা আছে।

সাধারণ উদাহরণে,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->

<head>

<title>This is my title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

    body {margin-top: 15px;}
    a { color: #D80C1F; font-weight:bold; text-decoration:none; }

</style>
</head>

<body>
    <center>
        This string has <i>html</i> code i want to <b>remove</b><br>
        In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to &quot;normal text&quot; and stuff using &lt;html encoding&gt;                 
    </center>
</body>
</html>

হয়ে

এটি আমার শিরোনাম

এই স্ট্রিংটিতে এইচটিএমএল কোড রয়েছে যা আমি মুছে ফেলতে চাই

এই লাইনে বিবিসি ( http://www.bbc.co.uk ) লিঙ্ক সহ উল্লেখ করা হয়েছে।

এখন "সাধারণ পাঠ্য" এ ফিরে এসে স্টাফ ব্যবহার করে

জাভাস্ক্রিপ্ট ফাংশন এবং পরীক্ষার পৃষ্ঠাটি দেখতে:

function convertHtmlToText() {
    var inputText = document.getElementById("input").value;
    var returnText = "" + inputText;

    //-- remove BR tags and replace them with line break
    returnText=returnText.replace(/<br>/gi, "\n");
    returnText=returnText.replace(/<br\s\/>/gi, "\n");
    returnText=returnText.replace(/<br\/>/gi, "\n");

    //-- remove P and A tags but preserve what's inside of them
    returnText=returnText.replace(/<p.*>/gi, "\n");
    returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

    //-- remove all inside SCRIPT and STYLE tags
    returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
    returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
    //-- remove all else
    returnText=returnText.replace(/<(?:.|\s)*?>/g, "");

    //-- get rid of more than 2 multiple line breaks:
    returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");

    //-- get rid of more than 2 spaces:
    returnText = returnText.replace(/ +(?= )/g,'');

    //-- get rid of html-encoded characters:
    returnText=returnText.replace(/&nbsp;/gi," ");
    returnText=returnText.replace(/&amp;/gi,"&");
    returnText=returnText.replace(/&quot;/gi,'"');
    returnText=returnText.replace(/&lt;/gi,'<');
    returnText=returnText.replace(/&gt;/gi,'>');

    //-- return
    document.getElementById("output").value = returnText;
}

এটি এই এইচটিএমএল দিয়ে ব্যবহৃত হয়েছিল:

<textarea id="input" style="width: 400px; height: 300px;"></textarea><br />
<button onclick="convertHtmlToText()">CONVERT</button><br />
<textarea id="output" style="width: 400px; height: 300px;"></textarea><br />

1
আমি এই সমাধানটি পছন্দ করি কারণ এটিতে এইচটিএমএল বিশেষ চরিত্রগুলির চিকিত্সা রয়েছে ... তবে এখনও সেগুলির প্রায় যথেষ্ট নয় ... আমার পক্ষে সেরা উত্তরটি তাদের সকলের সাথেই মোকাবেলা করবে। (যা সম্ভবত jquery করেন)।
ড্যানিয়েল জারসন

2
আমার মনে হয় /<p.*>/giহওয়া উচিত /<p.*?>/gi
cbron

মনে রাখবেন যে সমস্ত <br>ট্যাগ মুছে ফেলার জন্য আপনি তার পরিবর্তে একটি ভাল নিয়মিত এক্সপ্রেশন ব্যবহার করতে পারেন: /<br\s*\/?>/3 এর পরিবর্তে আপনার কেবলমাত্র একটি প্রতিস্থাপন থাকতে পারে Also এছাড়াও আমার কাছে মনে হয় যে সত্তাগুলির ডিকোডিং ব্যতীত আপনার একটি একক রেজেক্স থাকতে পারে: এর মতো কিছু /<[a-z].*?\/?>/
অ্যালেক্সিস উইলক

দুর্দান্ত স্ক্রিপ্ট। তবে টেবিলের বিষয়বস্তুর কী হবে? এটি কীভাবে প্রদর্শিত হতে পারে তার কোনও ধারণা
Hristo Enev

@ ড্যানিয়েলগারসন, এনকোডিং এইচটিএমএল বাস্তব লোমশ, বাস্তব দ্রুত পেয়েছে, তবে সবচেয়ে ভাল পদ্ধতির মাধ্যমে তিনি লাইব্রেরিটি ব্যবহার করছেন বলে মনে হচ্ছে
কাইলমিট

15
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");

এটি একটি রেইজেক্স সংস্করণ, যা ত্রুটিযুক্ত এইচটিএমএল এর চেয়ে বেশি স্থিতিস্থাপক, যেমন:

অনাবৃত ট্যাগ

Some text <img

"<", ">" ট্যাগ বৈশিষ্ট্যের ভিতরে

Some text <img alt="x > y">

নতুন লাইন

Some <a href="http://google.com">

কোড

var html = '<br>This <img alt="a>b" \r\n src="a_b.gif" />is > \nmy<>< > <a>"text"</a'
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");

7

অন্যটি, নিকফের বা শোগ 9 এর চেয়ে স্বীকারোচিতভাবে কম মার্জিত সমাধান হ'ল <body> ট্যাগ থেকে শুরু করে ডমকে হাঁটতে হবে এবং প্রতিটি পাঠ্য নোড যুক্ত করা হবে।

var bodyContent = document.getElementsByTagName('body')[0];
var result = appendTextNodes(bodyContent);

function appendTextNodes(element) {
    var text = '';

    // Loop through the childNodes of the passed in element
    for (var i = 0, len = element.childNodes.length; i < len; i++) {
        // Get a reference to the current child
        var node = element.childNodes[i];
        // Append the node's value if it's a text node
        if (node.nodeType == 3) {
            text += node.nodeValue;
        }
        // Recurse through the node's children, if there are any
        if (node.childNodes.length > 0) {
            appendTextNodes(node);
        }
    }
    // Return the final result
    return text;
}

3
বাবা। যদি আপনি আপনার স্ট্রিংয়ের বাইরে কোনও ডিওএম গাছ তৈরি করতে চলেছেন তবে কেবল ছটফট করার উপায়টি ব্যবহার করুন!
নিকফ 23

হ্যাঁ, আমার সমাধানটি একটি স্লেজ-হাতুড়ি দেয় যেখানে নিয়মিত হাতুড়িটি আরও উপযুক্ত :-)। এবং আমি সম্মত হই যে আপনার এবং শোগ 9 এর সমাধানগুলি আরও ভাল, এবং মূলত উত্তরে যতটা বলেছে। আমি আমার প্রতিক্রিয়াটিও প্রতিফলিত করতে ব্যর্থ হয়েছি যে এইচটিএমএল ইতিমধ্যে একটি স্ট্রিংয়ে রয়েছে, যাইহোক মূল প্রশ্নের ক্ষেত্রে আমার উত্তরটি মূলত বেহুদা রেন্ডার করে। :-(
ব্রায়ান

1
ন্যায়সঙ্গত হওয়ার জন্য, এর মান রয়েছে - যদি আপনার অবশ্যই পাঠ্য / সমস্ত / সংরক্ষণ করতে হবে তবে নিউলাইনস, ট্যাবগুলি, ক্যারেজ রিটার্ন ইত্যাদিতে ক্যাপচার করার ক্ষেত্রে এটির কমপক্ষে একটি শট রয়েছে has আবার, নিকফের সমাধানটিও একই কাজ করা উচিত , এবং আরও দ্রুত করুন ... হ!
শোগ

7

আপনি যদি লিঙ্কগুলি এবং সামগ্রীর কাঠামোটি রাখতে চান (এইচ 1, এইচ 2, ইত্যাদি) তবে আপনার পাঠ্য ভার্সন জেএস পরীক্ষা করে দেখা উচিত আপনি এটি কোনও HTML সহ ব্যবহার করতে পারেন, যদিও এটি কোনও HTML ইমেলকে সরল পাঠ্যে রূপান্তর করার জন্য তৈরি করা হয়েছিল।

ব্যবহার খুব সহজ। উদাহরণস্বরূপ নোড.জেজে:

var createTextVersion = require("textversionjs");
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";

var textVersion = createTextVersion(yourHtml);

বা খাঁটি জেএস সহ ব্রাউজারে:

<script src="textversion.js"></script>
<script>
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
</script>

এটি প্রয়োজনীয় জাজের সাথেও কাজ করে:

define(["textversionjs"], function(createTextVersion) {
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
});

4

উত্তরগুলি উল্লেখ করার পরে সর্বাধিক উল্লিখিত সমস্ত উত্তরগুলির চেষ্টা করেও যদি তাদের সকলেরই কিনারা হয় না এবং আমার প্রয়োজনগুলি সম্পূর্ণরূপে সমর্থন করতে না পারে।

আমি পিএইচপি এটি কীভাবে করে তা অন্বেষণ করা শুরু করেছি এবং পিএইচপি.জেএস লাইব জুড়ে এসেছি যা এখানে স্ট্রিপ_ট্যাগ পদ্ধতিটি প্রতিলিপি করে তোলে: http://phpjs.org/funitions/strip_tags/


এটি একটি ঝরঝরে ফাংশন এবং ভাল ডকুমেন্টেড। যাইহোক, এটি দ্রুত তৈরি করা যেতে পারে যখন allowed == ''আমি মনে করি যে ওপি যা চেয়েছিল, যা বায়রন নীচে জবাব দিয়েছে (বায়রন কেবল [^>]ভুল পেয়েছে ))
অ্যালেক্সিস উইল্ক

1
আপনি যদি ব্যবহার allowed প্যারাম এক্সএসএসের ঝুঁকির মধ্যে আছেন: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')ফিরে আসে<p onclick="alert(1)">mytext</p>
ক্রিস সিনেলি

4
function stripHTML(my_string){
    var charArr   = my_string.split(''),
        resultArr = [],
        htmlZone  = 0,
        quoteZone = 0;
    for( x=0; x < charArr.length; x++ ){
     switch( charArr[x] + htmlZone + quoteZone ){
       case "<00" : htmlZone  = 1;break;
       case ">10" : htmlZone  = 0;resultArr.push(' ');break;
       case '"10' : quoteZone = 1;break;
       case "'10" : quoteZone = 2;break;
       case '"11' : 
       case "'12" : quoteZone = 0;break;
       default    : if(!htmlZone){ resultArr.push(charArr[x]); }
     }
    }
    return resultArr.join('');
}

অভ্যন্তরের বৈশিষ্ট্যগুলির জন্য এবং <img onerror="javascript">সদ্য নির্মিত ডোম উপাদানগুলিতে অ্যাকাউন্টগুলি ।

ব্যবহার:

clean_string = stripHTML("string with <html> in it")

ডেমো:

https://jsfiddle.net/gaby_de_wilde/pqayphzd/

শীর্ষ উত্তরের ডেমো ভয়ঙ্কর কাজ করে:

https://jsfiddle.net/gaby_de_wilde/6f0jymL6/1/


আপনাকে একটি এট্রিবিউটি মানের মধ্যেও পালিয়ে থাকা উদ্ধৃতিগুলি হ্যান্ডেল করতে হবে (উদাঃ string with <a malicious="attribute \">this text should be removed, but is not">example</a>)।
লোগান পিকআপ

4

অনেক লোক ইতিমধ্যে এর জবাব দিয়েছে, তবে আমি ভেবেছিলাম যে আমি লিখেছি যে ফাংশনটি আমি লিখেছিলাম যে এটি স্ট্রিম থেকে এইচটিএমএল ট্যাগগুলি স্ট্রিপ করে তবে আপনি যে ট্যাগগুলি ছিনিয়ে নিতে চান না সেগুলির একটি অ্যারে অন্তর্ভুক্ত করার অনুমতি দেয়। এটি বেশ সংক্ষিপ্ত এবং আমার জন্য সুন্দরভাবে কাজ করে চলেছে।

function removeTags(string, array){
  return array ? string.split("<").filter(function(val){ return f(array, val); }).map(function(val){ return f(array, val); }).join("") : string.split("<").map(function(d){ return d.split(">").pop(); }).join("");
  function f(array, value){
    return array.map(function(d){ return value.includes(d + ">"); }).indexOf(true) != -1 ? "<" + value : value.split(">")[1];
  }
}

var x = "<span><i>Hello</i> <b>world</b>!</span>";
console.log(removeTags(x)); // Hello world!
console.log(removeTags(x, ["span", "i"])); // <span><i>Hello</i> world!</span>

3

আমি মনে করি সবচেয়ে সহজ উপায় হ'ল উপরে বর্ণিত কেউ হিসাবে নিয়মিত এক্সপ্রেশন ব্যবহার করা। যদিও এগুলির একগুচ্ছ ব্যবহার করার কোনও কারণ নেই। চেষ্টা করুন:

stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");

11
আপনি যদি সুরক্ষা সম্পর্কে চিন্তা করেন তবে এটি করবেন না। ব্যবহারকারীর ইনপুটটি যদি এটি হয়: '<scr <script> ipt> সতর্কতা (42); </ scr </script> ipt>' তবে স্ট্রাইপ করা সংস্করণটি হ'ল: '<script> সতর্কতা (42); </ স্ক্রিপ্ট > '। সুতরাং এটি একটি এক্সএসএস দুর্বলতা।
molnarg

আপনার [^<>]সাথে এটি পরিবর্তন করা উচিত [^>]কারণ একটি বৈধ ট্যাগটিতে একটি <অক্ষর অন্তর্ভুক্ত করা যায় না , তবে এক্সএসএস দুর্বলতা অদৃশ্য হয়ে যায়।
অ্যালেক্সিস উইল্কে

3

আমি আসল জাইবারবয় ২000 স্ক্রিপ্টে কিছু পরিবর্তন করেছি আশা করি এটি কারও পক্ষে কার্যকর হবে

str = '**ANY HTML CONTENT HERE**';

str=str.replace(/<\s*br\/*>/gi, "\n");
str=str.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<\s*\/*.+?>/ig, "\n");
str=str.replace(/ {2,}/gi, " ");
str=str.replace(/\n+\s*/gi, "\n\n");

3

@ মাইকসামুয়েল এর সুরক্ষার উদ্বেগের বিষয়ে বাছাই করা একটি সংস্করণ এখানে রয়েছে:

function strip(html)
{
   try {
       var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
       doc.documentElement.innerHTML = html;
       return doc.documentElement.textContent||doc.documentElement.innerText;
   } catch(e) {
       return "";
   }
}

দ্রষ্টব্য, এইচটিএমএল মার্কআপটি বৈধ এক্সএমএল না হলে এটি একটি খালি স্ট্রিং ফিরিয়ে দেবে (ওরফে, ট্যাগগুলি অবশ্যই বন্ধ করতে হবে এবং বৈশিষ্ট্যগুলি উদ্ধৃত করতে হবে)। এটি আদর্শ নয়, তবে সুরক্ষার সম্ভাবনা কাজে লাগানোর বিষয়টি এড়ানো যায় না।

যদি আপনার জন্য বৈধ এক্সএমএল মার্কআপ না রাখা প্রয়োজন হয় তবে আপনি এটি ব্যবহার করে দেখতে পারেন:

var doc = document.implementation.createHTMLDocument("");

তবে এটি অন্য কারণেও একটি নিখুঁত সমাধান নয়।


এটি পাঠ্যটি যদি ব্যবহারকারী ইনপুট থেকে আসে তবে এটি অনেক ক্ষেত্রে ব্যর্থ হবে (টেক্সারিয়া বা বিতর্কিত উইজেট ...)
আলেকিস উইলকে

3

আপনি iframe স্যান্ডবক্স অ্যাট্রিবিউট ব্যবহার করে নিরাপদে html ট্যাগগুলি স্ট্রিপ করতে পারেন ।

এখানে ধারণাটি হ'ল আমাদের স্ট্রিংটিকে পুনরায় প্রয়োগ করার চেষ্টা করার পরিবর্তে, আমরা একটি ডিওএম উপাদানটিতে পাঠ্যটি ইনজেকশন দিয়ে এবং তারপরে সেই উপাদানটির textContent/ innerTextসম্পত্তি অনুসন্ধান করে ব্রাউজারের নেটিভ পার্সারটির সুবিধা গ্রহণ করি ।

আমাদের পাঠ্যটিকে ইনজেক্ট করার জন্য সবচেয়ে উপযুক্ত উপাদানটি হ'ল একটি স্যান্ডবক্সযুক্ত আইফ্রেমে, এইভাবে আমরা যেকোন স্বেচ্ছাসেবক কোড কার্যকর করতে বাধা দিতে পারি (এটি এক্সএসএস নামে পরিচিত )।

এই পদ্ধতির খারাপ দিকটি এটি কেবল ব্রাউজারগুলিতে কাজ করে।

আমি যা নিয়ে এসেছি তা এখানে (যুদ্ধ-পরীক্ষিত নয়):

const stripHtmlTags = (() => {
  const sandbox = document.createElement("iframe");
  sandbox.sandbox = "allow-same-origin"; // <--- This is the key
  sandbox.style.setProperty("display", "none", "important");

  // Inject the sanbox in the current document
  document.body.appendChild(sandbox);

  // Get the sandbox's context
  const sanboxContext = sandbox.contentWindow.document;

  return (untrustedString) => {
    if (typeof untrustedString !== "string") return ""; 

    // Write the untrusted string in the iframe's body
    sanboxContext.open();
    sanboxContext.write(untrustedString);
    sanboxContext.close();

    // Get the string without html
    return sanboxContext.body.textContent || sanboxContext.body.innerText || "";
  };
})();

ব্যবহার ( ডেমো ):

console.log(stripHtmlTags(`<img onerror='alert("could run arbitrary JS here")' src='bogus'>XSS injection :)`));
console.log(stripHtmlTags(`<script>alert("awdawd");</` + `script>Script tag injection :)`));
console.log(stripHtmlTags(`<strong>I am bold text</strong>`));
console.log(stripHtmlTags(`<html>I'm a HTML tag</html>`));
console.log(stripHtmlTags(`<body>I'm a body tag</body>`));
console.log(stripHtmlTags(`<head>I'm a head tag</head>`));
console.log(stripHtmlTags(null));

ওয়েব ভিত্তিক পরিবেশের জন্য দুর্দান্ত সমাধান! আপনি একটি IIFE ব্যবহার সম্ভবত করা উচিত নয় হিসাবে এর নাম ECMAScript 2015 সাল থেকে, ব্লক-scoped ভেরিয়েবল ইতিমধ্যে ব্লক সঠিকভাবে সঙ্গে scoped হয় letএবং constঅপারেটর। এছাড়াও, আপনার সমাধানটি ব্যবহার করে, আমি iframesদস্তাবেজের অভ্যন্তরে ব্যবহার না করার প্রচুর উল্লেখ পেয়েছি । document.body.removeChild(sandbox)ভবিষ্যতের অনুলিপি-পাস্তা ভিত্তিক পাঠকদের জন্য কোডে একটি যুক্ত করার কথা বিবেচনা করুন ।
আমিন নায়েরি

2

JQuery এর সাহায্যে আপনি কেবল এটি ব্যবহার করে পুনরুদ্ধার করতে পারেন

$('#elementID').text()

2

কোডের নীচে আপনাকে অন্য সকলকে সরিয়ে দেওয়ার সময় কিছু এইচটিএমএল ট্যাগ ধরে রাখতে দেয়

function strip_tags(input, allowed) {

  allowed = (((allowed || '') + '')
    .toLowerCase()
    .match(/<[a-z][a-z0-9]*>/g) || [])
    .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)

  var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
      commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;

  return input.replace(commentsAndPhpTags, '')
      .replace(tags, function($0, $1) {
          return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
      });
}

1
আপনার উত্সটি উদ্ধৃত করা উচিত ( phpjs)। আপনি যদি allowedপ্যারাম ব্যবহার করেন তবে আপনি এক্সএসএসের ঝুঁকির মধ্যে আছেন: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')ফিরে আসে<p onclick="alert(1)">mytext</p>
ক্রিস সিনেল্লি

2

চমত্কার htmlparser2 খাঁটি জেএসএমএল এইচটিএমএল পার্সার ব্যবহার করাও সম্ভব । এখানে একটি কার্যকারী ডেমো রয়েছে:

var htmlparser = require('htmlparser2');

var body = '<p><div>This is </div>a <span>simple </span> <img src="test"></img>example.</p>';

var result = [];

var parser = new htmlparser.Parser({
    ontext: function(text){
        result.push(text);
    }
}, {decodeEntities: true});

parser.write(body);
parser.end();

result.join('');

আউটপুট হবে This is a simple example.

এটি এখানে কর্মে দেখুন: https://tonicdev.com/jfahrenkrug/extract-text-from-html

আপনি যদি ওয়েবপ্যাকের মতো সরঞ্জাম ব্যবহার করে ওয়েব অ্যাপ্লিকেশনটি প্যাক করেন তবে এটি নোড এবং ব্রাউজার উভয় ক্ষেত্রেই কাজ করে।


2

আমার কেবল <a>ট্যাগগুলি বের করে আনা এবং লিঙ্কটির পাঠ্য সহ এগুলি প্রতিস্থাপন করা দরকার।

এটি দুর্দান্ত কাজ করছে বলে মনে হচ্ছে।

htmlContent= htmlContent.replace(/<a.*href="(.*?)">/g, '');
htmlContent= htmlContent.replace(/<\/a>/g, '');

এটি কেবলমাত্র ট্যাগগুলির জন্য প্রযোজ্য এবং বিস্তৃত ফাংশন হওয়ার জন্য টুইটগুলি দরকার needs
m3nda 11

হ্যাঁ, আরও একটি অ্যাঙ্কার ট্যাগে আরও অনেকগুলি বৈশিষ্ট্য থাকতে পারে যেমন title="..."
অ্যালেক্সিস উইল্ক


1

আমি নিজে একটি কাজের নিয়মিত প্রকাশ তৈরি করেছি:

str=str.replace(/(<\?[a-z]*(\s[^>]*)?\?(>|$)|<!\[[a-z]*\[|\]\]>|<!DOCTYPE[^>]*?(>|$)|<!--[\s\S]*?(-->|$)|<[a-z?!\/]([a-z0-9_:.])*(\s[^>]*)?(>|$))/gi, ''); 

1

এইচটিএমএল ফালা সরল 2 লাইন jquery।

 var content = "<p>checking the html source&nbsp;</p><p>&nbsp;
  </p><p>with&nbsp;</p><p>all</p><p>the html&nbsp;</p><p>content</p>";

 var text = $(content).text();//It gets you the plain text
 console.log(text);//check the data in your console

 cj("#text_area_id").val(text);//set your content to text area using text_area_id

1

গৃহীত উত্তরটি বেশিরভাগ ক্ষেত্রে সূক্ষ্মভাবে কাজ করে, তবে htmlস্ট্রিংটি যদি nullআপনি "null"('' এর পরিবর্তে) পান তবে আই.ই. ফিক্সড:

function strip(html)
{
   if (html == null) return "";
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

1

জ্যাকুরি ব্যবহার:

function stripTags() {
    return $('<p></p>').html(textToEscape).text()
}

1

inputউপাদানটি কেবল একটি লাইনের পাঠ্যকে সমর্থন করে :

পাঠ্য স্থিতি উপাদানটির মানটির জন্য এক লাইনের সমতল পাঠ্য সম্পাদনা নিয়ন্ত্রণের প্রতিনিধিত্ব করে।

function stripHtml(str) {
  var tmp = document.createElement('input');
  tmp.value = str;
  return tmp.value;
}

আপডেট: এটি প্রত্যাশার মতো কাজ করে

function stripHtml(str) {
  // Remove some tags
  str = str.replace(/<[^>]+>/gim, '');

  // Remove BB code
  str = str.replace(/\[(\w+)[^\]]*](.*?)\[\/\1]/g, '$2 ');

  // Remove html and line breaks
  const div = document.createElement('div');
  div.innerHTML = str;

  const input = document.createElement('input');
  input.value = div.textContent || div.innerText || '';

  return input.value;
}

কাজ করে না, দয়া করে উত্তর পোস্ট করার সময় আপনি যে ব্রাউজারটি ব্যবহার করছেন তা সর্বদা উল্লেখ করুন। এটি সঠিক নয় এবং ক্রোম 61 এ কাজ করবে না Tags ট্যাগগুলি কেবল একটি স্ট্রিং হিসাবে রেন্ডার করা হয়।
ভিডিজেন 13

0
    (function($){
        $.html2text = function(html) {
            if($('#scratch_pad').length === 0) {
                $('<div id="lh_scratch"></div>').appendTo('body');  
            }
            return $('#scratch_pad').html(html).text();
        };

    })(jQuery);

এটি একটি jquery প্লাগইন হিসাবে সংজ্ঞায়িত করুন এবং নীচের মত এটি ব্যবহার করুন:

$.html2text(htmlContent);

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