জাভাস্ক্রিপ্টে এইচটিএমএল সত্তা এনকোড করুন


100

আমি এমন একটি সিএমএসে কাজ করছি যা ব্যবহারকারীদের সামগ্রী প্রবেশ করতে দেয় allows সমস্যাটি হ'ল যখন তারা প্রতীকগুলি যুক্ত করে ®, তখন এটি সমস্ত ব্রাউজারগুলিতে ভাল প্রদর্শিত হতে পারে না। আমি প্রতীকগুলির একটি তালিকা স্থাপন করতে চাই যা অবশ্যই অনুসন্ধান করা উচিত এবং তারপরে সংশ্লিষ্ট এইচটিএমএল সত্তায় রূপান্তরিত হবে। উদাহরণ স্বরূপ

® => ®
& => &
© => ©
™ =>™

রূপান্তরের পরে, এটি একটি <sup>ট্যাগে আবৃত করা দরকার , ফলস্বরূপ:

® => <sup>&reg;</sup>

কারণ একটি নির্দিষ্ট ফন্টের আকার এবং প্যাডিং শৈলী প্রয়োজনীয়:

sup { font-size: 0.6em; padding-top: 0.2em; }

জাভাস্ক্রিপ্ট কি এমন কিছু হবে?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

যেখানে "[?]" এর অর্থ এমন কিছু আছে যা সম্পর্কে আমি নিশ্চিত নই।

অতিরিক্ত তথ্য:

  • আমি খাঁটি জাভাস্ক্রিপ্ট দিয়ে এটি করতে চাই, এমন কিছু নয় যার জন্য jQuery এর মতো লাইব্রেরি দরকার, ধন্যবাদ।
  • ব্যাকএন্ড হ'ল রুবি
  • রিফাইনিসিএমএস ব্যবহার করে যা রেলগুলিতে রেল দিয়ে তৈরি

আপনার ব্যাকএন্ড কি? যদি এটি পিএইচপি হয় তবে আপনার যত্ন নেওয়ার জন্য এখানে বিভিন্ন কার্য রয়েছে এবং আমি নিশ্চিত যে অন্যান্য ভাষাগুলিরও সেগুলি রয়েছে। এছাড়াও, গুগল: developwithstyle.com/articles/2010/06/29/…
ক্রিস বেকার

4
ইউটিএফ-8-এনকোডযুক্ত পাঠ্য গ্রহণ করা এবং আউটপুট দেওয়া আরও ভাল সমাধান হতে পারে। আজ ব্যবহৃত প্রতিটি ব্রাউজার ইউটিএফ -8 সমর্থন করে। এইচটিএমএল দিকে আপনি নিজের ট্যাগটিতে যুক্ত accept-charset="UTF-8"করতে চান <form>। সার্ভারে, আপনি নিশ্চিত করতে চাইবেন যে আপনার আউটপুটটি ইউটিএফ -8 এনকোডড রয়েছে এবং আপনার ওয়েব সার্ভার ব্রাউজারকে এটি ( Content-Typeশিরোলেখের মাধ্যমে ) বলে। ভাড়া দেখুন szt.tumblr.com/post/9133498042/… আপনি যদি সমস্ত কিছু করেন এবং ব্রাউজারটি চরিত্রটি সঠিকভাবে প্রদর্শন না করে তবে চরিত্রটি কোনও সত্তার সাথে প্রতিস্থাপনের ফলে কোনও পার্থক্য হবে না।
পল ডি ওয়েট

@ ক্রিস রেলস-এ রবি নিয়ে নির্মিত একটি সিএমএসে কাজ করছেন।
জেগালার্ডো

ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্টে কোনও চরিত্রকে এইচটিএমএল সত্তা রেফারেন্সে পরিবর্তন করা ভুল, যেহেতু ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্টটি ডিওএম-তে পরিচালিত হয়, যেখানে সত্তা নেই। supউপাদানগুলিতে "®" মোড়ানোর ফলে এটি সম্ভবত সমাধান হতে পারে তার চেয়ে আরও বেশি সমস্যা সৃষ্টি করে, যেহেতু অনেক ফন্টে, "®" ছোট এবং সাবস্ক্রিপ্টের অবস্থানে থাকে, তাই আপনি এটি অবিশ্বাস্য করে তুলবেন।
Jukka K. Korpela

@ জুক্কা.কর্পেলা, তাই আমাকে এইচটিএমএল সত্ত্বাগুলি সঠিকভাবে প্রদর্শিত হবে না বলে সম্বোধন করা দরকার, আপনি কীভাবে এটিকে সম্বোধন করবেন? এবং মোড়ানোর <sup>বিষয়টি কোনও সমস্যা নয় যেহেতু আমি ব্লগ পোস্টগুলির জন্য ব্যবহৃত নির্দিষ্ট ফন্টগুলি পরীক্ষা করেছি তবে এটি বিবেচনার জন্য একটি ভাল বিষয়।
জেগালার্ডো

উত্তর:


176

আপনি প্রদত্ত ইউনিকোড পরিসরে যে কোনও অক্ষরকে তার এইচটিএমএল সত্তার সমতুল্য প্রতিস্থাপন করতে আপনি রেজেক্স ব্যবহার করতে পারেন। কোডটি এরকম কিছু দেখাচ্ছে:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

তাদের HTML সত্তা সমতুল সঙ্গে, যা কেবল হয় - এই কোড প্রদত্ত ব্যাপ্তির মধ্যে সব অক্ষর (9999, সেইসাথে এম্পারসেন্ড, বৃহত্তর & কম ইউনিকোড 00A0) প্রতিস্থাপন করবে &#nnn;যেখানে nnnইউনিকোড মান আমরা থেকে পেতে হয় charCodeAt

এটি এখানে কর্মে দেখুন: http://jsfiddle.net/E3EqX/13/ (উদাহরণটিতে ব্যবহৃত উপাদান নির্বাচকদের জন্য এই উদাহরণটি jQuery ব্যবহার করে above উপরে ভিত্তি করে বেস কোডটি jQuery ব্যবহার করে না)

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

ডকুমেন্টেশন


জিসফিলের জন্য আপনাকে অনেক ধন্যবাদ। সুতরাং এটি বাস্তবায়ন। আমি কেবল এটি আমার .jsফাইলে যুক্ত করতে এবং অন্যান্য জিনিসগুলিকে একটি দিয়ে মুড়িয়ে রাখতে <sup>পারি?
জেগালার্ডো

4
@ জেগালার্ডো আমি উদাহরণটি আবার লিখলাম যাতে এটি supট্যাগ (বা অন্য কোনও ট্যাগ) যুক্ত করে এবং এটি একটি ফাংশনটিতে অন্তর্ভুক্ত থাকে: jsfiddle.net/E3EqX/4 । এটি ব্যবহার করার জন্য, আপনাকে "এনকোডএন্ডআর্যাপ" ফাংশনটি আপনার প্রকল্পে অনুলিপি করতে হবে।
ক্রিস বেকার

4
@ ক্রিসটি ঝরঝরে কোড স্নিপেটের জন্য ধন্যবাদ, যদিও এতে একটি বাগ রয়েছে: "[\ u00A0- \ u99999]" আপনি যা আশা করেন তা করেন না, বরং সমান হয় "[\ u00A0- \ u9999] | 9 "- অর্থাৎ। "9" অক্ষরটি ভুলভাবে একটি HTML সত্তার সাথেও প্রতিস্থাপন করা হবে। আপনি চেষ্টা করতে পারেন এটিও চেষ্টা করতে পারেন। আমি উত্তরের জন্য একটি সমাধান প্রস্তাব করব।
এসবি

@ এসবি এই নোটের জন্য ধন্যবাদ, আমি চূড়ান্ত অনুমোদনের ভোটটিও দিতে পেরেছি :)
ক্রিস

4
যদিও আমি সম্মতি দিচ্ছি যে @ মাথিয়াস বাইন্স উত্তর আরও সম্পূর্ণ, তবে তার সমাধানটি ৮৪ কেবি, এবং এটি আমাকে বিকল্পের সন্ধান চালিয়ে যেতে বাধ্য করেছে। এটি ঠিক-ইশ বলে মনে হচ্ছে, তবে যে কোনওটিতে চারকোড <65, এবং> 90 && <97 এর মধ্যেও অন্তর্ভুক্ত থাকতে পারে?
ফ্লোরিয়ান মেরটেনস

62

বর্তমানে গৃহীত উত্তরের কয়েকটি বিষয় রয়েছে। এই পোস্টটি তাদের ব্যাখ্যা করে এবং আরও শক্তিশালী সমাধান সরবরাহ করে। এর উত্তরে আগে যে সমাধানটি দেওয়া হয়েছিল সেটির সমাধানটি ছিল:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

iপতাকা অপ্রয়োজনীয় যেহেতু U + এ 00A0 থেকে U + এ 9999 সীমার মধ্যে কোন ইউনিকোড প্রতীক হয়েছে একটি বড় হাতের / ছোট হাতের বৈকল্পিক যে একই সীমার বাইরে রয়েছে।

mকারণ পতাকা অপ্রয়োজনীয় ^বা $রেগুলার এক্সপ্রেশন ব্যবহার করা হয় না।

কেন U + 00A0 থেকে U + 9999 অবধি? মনে হয় নির্বিচারে।

যাই হোক, একটি সমাধান জন্য সঠিকভাবে এনকোড যে সব (! নাক্ষত্রিক চিহ্ন সহ) ইনপুটে নিরাপদ ও মুদ্রণযোগ্য হওয়া ASCII প্রতীক, এবং কার্যকরী সব নামে চরিত্র রেফারেন্স ছাড়া (শুধুমাত্র শুধুমাত্র HTML4 ঐ), ব্যবহার তিনি গ্রন্থাগার (দাবি পরিত্যাগ: এটি গ্রন্থাগার আমার )। এর পুনরায় পড়া থেকে:

তিনি ("এইচটিএমএল সত্তা" জন্য) জাভাস্ক্রিপ্টে লিখিত একটি শক্তিশালী এইচটিএমএল সত্তা এনকোডার / ডিকোডার। এটি এইচটিএমএল অনুসারে সমস্ত প্রমিত নামযুক্ত চরিত্রের রেফারেন্সকে সমর্থন করে , একটি ব্রাউজারের মতোই অস্পষ্ট এম্পারস্যান্ডগুলি এবং অন্যান্য প্রান্তের কেসগুলি পরিচালনা করে , এর একটি বিস্তৃত পরীক্ষার স্যুট থাকে এবং - অন্যান্য অনেক জাভাস্ক্রিপ্ট সমাধানের বিপরীতে - তিনি ঠিক সূক্ষ্মভাবে অ্যাস্ট্রাল ইউনিকোড প্রতীকগুলি পরিচালনা করেন। একটি অনলাইন ডেমো উপলব্ধ।

আরো দেখুন এই প্রাসঙ্গিক স্ট্যাক ওভারফ্লো উত্তর


12
এছাড়াও, তিনি লাইব্রেরি হ'ল ... ৮৪ কেবি! আছ ... কম সংযোগের জন্য মোবাইল ফোনে এটি ডাউনলোড করার চেষ্টা করুন। কোথাও একটি আপস করতে হবে ..
ফ্লোরিয়ান মেরটেনস

4
@ ফ্লোরিয়ানমার্টেনস + জিজিপ মিনিট করার পরে তিনি ২৪ কেবি। এটি এখনও বড় but আপনি যদি পারফরম্যান্সকে প্রভাবিত না করে লাইব্রেরিকে আরও ছোট করার কোনও উপায় খুঁজে পান তবে দয়া করে একটি টানার অনুরোধ জমা দিন।
ম্যাথিয়াস বাইনেস

4
@ ম্যাথিয়াসবাইনস, সন্দেহ নেই আপনার গ্রন্থাগারটি ভাল তবে আপনি গৃহীত উত্তরগুলিতে সমস্যাটি হাইলাইট করতে মন্তব্য বাক্সটি ব্যবহার করতে পারেন এবং দয়া করে কোড ব্লকে আপনার উন্নত উত্তর জমা দিন
ডাই ইকো

4
@ ড্রজাউস চিত্রগুলি বড় হওয়ার সাথে সাথে এড়াতে পারে কারণ তারা প্রচুর ডেটা সঞ্চয় করে এবং কম সংকুচিত ডেটাগুলি ডিকোড করাতে দ্রুত is তবে প্রোগ্রামের কোডটি আলাদা, খুব প্রায়শই একটি সম্পূর্ণ লাইব্রেরি যুক্ত হয় এবং এর ব্যবহার খুব কম হয়। লাইব্রেরির কোডগুলিতে কখনও কখনও আপনার নিজের কোডের চেয়ে বেশি লাইন থাকে! আরও কয়েকটি লিব সমস্যাগুলি অনুসন্ধান করতে / ডিবাগ করতে এবং বাগ রিপোর্টগুলি প্রেরণ করতে (বা এমনকি হালনাগাদ আপডেট করে) বিরক্ত করবে, যাতে মেমরি ফাঁস বা অন্যান্য সমস্যাগুলি চেক করা কোডবিহীন অনেকগুলি লাইবযুক্ত সফ্টওয়্যারটিতে স্থির থাকতে পারে। যদি কেউ এইচটিএমএল-অনিরাপদ চরগুলি কেবল এনকোড / পালাতে চায় তবে 80kb নয়, কেবল কয়েকটি লাইন প্রয়োজন।
ব্রাইক

4
@ মারকো ক্লেইন হ্যাঁ, আমি এটি আমার পোস্টে ব্যাখ্যা করছি। এটি আসলে একটি সমস্যা যা বগী কোড স্নিপেট ভোগ করে। আমি যে সমাধানটির দিকে ইঙ্গিত করছি তাতে সমস্যা নেই। (দেখুন "
জ্যোতিষী

29

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

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        // return "&#" + s.charCodeAt(0) + ";";
        return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
    });
};

/**
 * Create string from HTML entities
 */
String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#\d+;/gm,function(s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
    })
};

তারপরে আপনি এটি নিম্নলিখিত হিসাবে ব্যবহার করতে পারেন:

var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æøπ£¨ ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

কনসোল আউটপুট:

Entities: &#68;&#105;&#116;&#32;&#105;&#115;&#32;&#101;&#180;&#8224;&#174;&#165;&#168;&#169;&#729;&#8747;&#248;&#8230;&#710;&#402;&#8710;&#247;&#8721;&#8482;&#402;&#8710;&#230;&#248;&#960;&#163;&#168;&#160;&#402;&#8482;&#101;&#110;&#32;&#116;&#163;&#101;&#233;&#115;&#116;
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æøπ£¨ ƒ™en t£eést 

এই সমাধানটি টিভিএস-তেও কাজ করে, তাই এটি সব ক্ষেত্রেই ভাল এনকোডিংয়ের সমস্যাগুলি সমাধান করতে পারে।
loretoparisi

4
কিছুটা চরম না? আপনি সমস্ত কিছু এইচটিএমএল সত্তায় রূপান্তর করছেন , এমনকি "নিরাপদ" অক্ষর যেমন "এবিসি", "123" ... এমনকি
শ্বেত স্পেসগুলি

4
এটি একটি খারাপ উত্তর। ওয়েবে 50% + নথিতে বেশিরভাগ ইউটিএফ -8 সহ বেশিরভাগ ল্যাটিন 1 থাকে। নিরাপদ অক্ষরের আপনার এনকোডিংটি কোনও লাভ ছাড়াই এর আকার 500% থেকে 600% বাড়িয়ে তুলবে।
হোল্ডঅফহাঙ্গার

mকোনও অ্যাঙ্কর নেই এমন প্যাটার্নে প্যাটার্ন সংশোধকটির উদ্দেশ্য ব্যাখ্যা করুন । সুতরাং আপনি বিন্দুযুক্ত sপ্যাটার্নটির জন্য ব্যবহার করতে চান ?
মিকম্যাকুসা

19

কোনও লাইব্রেরি ছাড়া আপনার যদি আই <9 সমর্থন করার প্রয়োজন না হয় তবে আপনি একটি এইচটিএমএল উপাদান তৈরি করতে এবং নোড.টেক্সট কনটেন্টের সাথে এর সামগ্রী সেট করতে পারেন :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

এখানে একটি উদাহরণ: https://jsfiddle.net/1erdhehv/


4
টেক্সট কনটেন্টের পরিবর্তে ইনারটেক্সট ব্যবহার করবেন না কেন?
রিক

@ রিক, উত্তরের সাথে সংযুক্ত টেক্সট কনটেন্টের জন্য MDN নথি দিন। এটিকে উদ্ধৃত করে "টেক্সট কনটেন্ট এবং এইচটিএমইলেমেন্ট.ইনটেক্সট সহজেই বিভ্রান্ত হয় তবে দুটি বৈশিষ্ট্যই গুরুত্বপূর্ণ উপায়ে আলাদা " "
আদর্শ

17

আপনি এটি ব্যবহার করতে পারেন।

var escapeChars = {
  '¢' : 'cent',
  '£' : 'pound',
  '¥' : 'yen',
  '€': 'euro',
  '©' :'copy',
  '®' : 'reg',
  '<' : 'lt',
  '>' : 'gt',
  '"' : 'quot',
  '&' : 'amp',
  '\'' : '#39'
};

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

var htmlEntities = {
    nbsp: ' ',
    cent: '¢',
    pound: '£',
    yen: '¥',
    euro: '€',
    copy: '©',
    reg: '®',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '\''
};

function unescapeHTML(str) {
    return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
        var match;

        if (entityCode in htmlEntities) {
            return htmlEntities[entityCode];
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
            return String.fromCharCode(parseInt(match[1], 16));
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#(\d+)$/)) {
            return String.fromCharCode(~~match[1]);
        } else {
            return entity;
        }
    });
};

4
এনকোডেবল অক্ষরগুলির একটি এলোমেলো উপসেটটি ম্যানুয়ালি যোগ করা সম্ভবত নিজের এবং আপনার সহকর্মীদের জন্য লাইনের নীচে ঝামেলা সঞ্চয় করছে। অক্ষরগুলি এনকোড করা উচিত, এমন একটি একক কর্তৃপক্ষ থাকতে হবে, সম্ভবত ব্রাউজার বা ব্যর্থ যে একটি নির্দিষ্ট গ্রন্থাগারটি সম্ভবত বিস্তৃত এবং রক্ষণাবেক্ষণের সম্ভাবনা রয়েছে।
ব্যবহারকারী 234461

দুর্দান্ত পয়েন্ট, @ ব্যবহারকারী 234461 61 যদি কেউ সেই একক কর্তৃত্বের সন্ধান করে, তদন্তকারী মনকে (আমার মতো) জানতে আগ্রহী!
idungotnosn

7

আপনি যদি এনকোড এইচটিএমএল সত্তাকে একাধিকবার এড়াতে চান

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';

        return '&#' + char.charCodeAt(0) + ';' + next;
      }

      return full;
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# উদাহরণ

var text = "<a>Content &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

এটি কেবল তখনই কার্যকর যখন আপনার সাথে মিশ্রিতভাবে আংশিকভাবে পালিয়ে যাওয়া পাঠ্য শুরু হয় এবং এটি বাগগুলি প্রবর্তন করে কারণ এটি সমস্ত স্ট্রিং সঠিকভাবে এনকোড করতে পারে না: প্রকাশিত <#>হবে<#&#62;
রিক

@ রিক ধন্যবাদ আমাকে সে সম্পর্কে লক্ষ্য করার জন্য, আমি আমার উত্তরটি আরও ভাল করে তুলতে আপডেট করেছি।
স্টিফানসআর্যা

4

এইচটিএমএল বিশেষ অক্ষর এবং এটি ESCAPE CODES

সংরক্ষিত অক্ষরগুলি অবশ্যই এইচটিএমএল দ্বারা অব্যাহতি পেতে হবে: আমরা কেবলমাত্র এসসিআইআই অক্ষর ব্যবহার করে এইচটিএমএল, এক্সএইচটিএমএল বা এক্সএমএলে যে কোনও ইউনিকোড অক্ষর [প্রাক্তন: & - U + 00026] উপস্থাপন করতে একটি অক্ষর পলায়ন ব্যবহার করতে পারি। সংখ্যার চরিত্রের রেফারেন্স [ প্রাক্তন: অ্যাম্পারস্যান্ড (&) - &#38;] এবং নামযুক্ত অক্ষর রেফারেন্স [প্রাক্তন: &amp;] হ'ল প্রকার character escape used in markup


পূর্বনির্ধারিত সত্তা

    Original Character     XML entity replacement    XML numeric replacement  
                  <                                    &lt;                                           &#60;                    
                  >                                     &gt;                                         &#62;                    
                  "                                     &quot;                                      &#34;                    
                  &                                   &amp;                                       &#38;                    
                   '                                    &apos;                                      &#39;                    

ওয়েব পৃষ্ঠাগুলিতে একটি সাধারণ ফর্ম হিসাবে এইচটিএমএল ট্যাগগুলি প্রদর্শন করতে <pre>, <code>ট্যাগগুলি বা আমরা এড়াতে পারি। কোন সংঘটন সঙ্গে প্রতিস্থাপন দ্বারা স্ট্রিং পলায়নপরকিন্তু "&"স্ট্রিং-এর দ্বারা চরিত্র "&amp;"এবং কোন ঘটনার ">"স্ট্রিং-এর দ্বারা চরিত্র "&gt;"। প্রাক্তন:stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

এটি iframe srcdoc স্ট্রিংয়ে জসন ফর্ম্যাটে এইচটিএমএল উত্স কোড যুক্ত করার জন্য দুর্দান্ত।
নাইম মেঘ

এটিতে include অন্তর্ভুক্ত নয়, সুতরাং এটি অপকে সাহায্য করবে না। অতিরিক্তভাবে, এই জেএস অন্যান্য সমাধানগুলির অনেকের চেয়ে অনেক জটিল, এমনকি কেবল এটির মতো একটি সংক্ষিপ্ত ম্যাপিং ব্যবহার করে। swapJsonKeyValues ​​এর খারাপ পার্শ্ব প্রতিক্রিয়া (ম্যাপকি এবং মানচিত্রের সংজ্ঞা দেওয়া) হিসাবে প্রয়োজনীয় নামকরণ করা হয়েছে
রিক

@ মিকম্যাকুসা আমি ডিবাগ মান সহ পোস্টটি আপডেট করেছি। mস্ট্রিংয়ের একটি ইনপুট বিশেষ অক্ষর ধারণ করে।
ইয়াশ

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

3
var htmlEntities = [
            {regex:/&/g,entity:'&amp;'},
            {regex:/>/g,entity:'&gt;'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

একটি অ্যারের সমাধান


4
উপরের তুলনায় এটি কীভাবে সমস্যাটিকে অনন্যতর উপায়ে সমাধান করে তা ব্যাখ্যা করুন। এক নজরে, এটি প্রদর্শিত হবে যে এই সমাধানটি ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে বেড়ে যায়, কারণ এটি একের পরিবর্তে একাধিক পাসে স্ট্রিংটি পরিবর্তন করে। তবে আমি ভুল হতে পারি। যেভাবেই হোক, আপনাকে অবশ্যই একটি ব্যাখ্যা সহ পোস্টটি ব্যাক আপ করতে হবে।
জ্যাক গিফিন

এটির বিকল্প, আপনি অ্যারে থেকে সরাসরি রেজিक्स ব্যবহার করতে পারেন ...: ডি
সিজার দে লা ক্রুজ

এটি প্রতিটি চরিত্রের জন্য একটি রেজেক্স (ভি ইন ....)। আপনি যদি ইউটিএফ -8 এর সমস্তটি কভার করতে চান তবে এটি 65,000 রিজেক্স এবং সম্পাদনের 65,000 লাইন।
হোল্ডঅফহাঙ্গার

4
আমি কেবলমাত্র তিনটি চরিত্রকে সত্তায় রূপান্তর করতে আগ্রহী তাই আমার উত্তরটির ক্ষেত্রে এই উত্তরটি আরও ভাল এবং আমি এখানে এসে আনন্দিত
ড্রয়

2

আপনি যদি ইতিমধ্যে jQuery ব্যবহার করেন তবে চেষ্টা করুন html()

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

একটি ইন-মেমরি টেক্সট নোড তাত্ক্ষণিক হয় এবং html()এটিতে ডাকা হয়।

এটি কুরুচিপূর্ণ, এটি কিছুটা স্মৃতি নষ্ট করে এবং heলাইব্রেরির মতো কোনও কিছুর মতো পুঙ্খানুপুঙ্খভাবে করা যদি আমার কোনও ধারণা নেই তবে আপনি যদি ইতিমধ্যে jQuery ব্যবহার করছেন তবে সম্ভবত এটি আপনার জন্য একটি বিকল্প।

ফেলিক্স জিসেন্ডেরফার দ্বারা jQuery সহ ব্লগ পোস্ট এনকোড এইচটিএমএল সত্তা থেকে নেওয়া ।


4
প্রতিবার কোনও নোড তাত্ক্ষণিকভাবে এড়াতে, আপনি নোডটি সংরক্ষণ করতে পারেন: var converter=$("<div>");এবং পরে এটি পুনরায় ব্যবহার করুন: html1=converter.text(text1).html(); html2=converter.text(text2).html();...
ফ্রান্সেসকোএমএম

1

কখনও কখনও আপনি কেবল প্রতিটি চরিত্রকে এনকোড করতে চান ... এই ফাংশনটি রেজিপেক্সে "সবকিছু ছাড়া কিছুই নয়" প্রতিস্থাপন করে।

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}


4
প্রতিস্থাপন ^একটি দ্বারা .সাশ্রয় ইমোজির করুন: function encode(e){return e.replace(/[.]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
সুইস মিস্টার 14

1

আওয়ারকোডওয়ার্ল্ড আওয়ারকোডওয়ার্ল্ড থেকে টিউটোরিয়ালটি দেখুন - জাভাস্ক্রিপ্ট সহ এইচটিএমএল সত্তা এনকোড এবং ডিকোড করুন

সবচেয়ে গুরুত্বপূর্ণ, তিনি উদাহরণস্বরূপ গ্রন্থাগার

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// → 'foo © bar ≠ baz ???? qux'

এই গ্রন্থাগারটি সম্ভবত আপনার কোডিং সহজ এবং আরও ভালভাবে পরিচালনা করবে। এটি জনপ্রিয়, নিয়মিত আপডেট হয় এবং এইচটিএমএল অনুমান অনুসরণ করে। এটির নিজস্ব কোনও নির্ভরতা নেই, যেমন প্যাকেজ.জসনে দেখা যায়


ওপি ভ্যানিলা জেএসের জন্য জিজ্ঞাসা করেছিল এবং ভ্যানিলা জেএস এলিমেন্ট.innerText সরবরাহ করে। লাইব্রেরিতে কোনও সুবিধা থাকলে দয়া করে আপনার উত্তরে এটি যুক্ত করুন।
রিক

0

এখানে আমি কীভাবে এনকোডিংটি প্রয়োগ করেছি। আমি উপরোক্ত উত্তরগুলি থেকে অনুপ্রেরণা নিয়েছি।

function encodeHTML(str) {
  const code = {
      ' ' : '&nbsp;',
      '¢' : '&cent;',
      '£' : '&pound;',
      '¥' : '&yen;',
      '€' : '&euro;', 
      '©' : '&copy;',
      '®' : '&reg;',
      '<' : '&lt;', 
      '>' : '&gt;',  
      '"' : '&quot;', 
      '&' : '&amp;',
      '\'' : '&apos;'
  };
  return str.replace(/[\u00A0-\u9999<>\&''""]/gm, (i)=>code[i]);
}

// TEST
console.log(encodeHTML("Dolce & Gabbana"));
console.log(encodeHTML("Hamburgers < Pizza < Tacos"));
console.log(encodeHTML("Sixty > twelve"));
console.log(encodeHTML('Stuff in "quotation marks"'));
console.log(encodeHTML("Schindler's List"));
console.log(encodeHTML("<>"));


আপনার তালিকায় নেই এমন কোনও ইনপুটের জন্য বিরতি - u00A0- 99 u9999
রিক্স

mকোনও অ্যাঙ্কর নেই এমন প্যাটার্নে প্যাটার্ন সংশোধকটির উদ্দেশ্য ব্যাখ্যা করুন ।
মিকম্যাকুসা

-1

charCodeAt()নির্দিষ্ট অক্ষরটির 127 এর চেয়ে বেশি মান আছে কিনা তা পরীক্ষা করে আপনি পদ্ধতিটি ব্যবহার করতে পারেন এবং এটি ব্যবহার করে এটি একটি সংখ্যার অক্ষর রেফারেন্সে রূপান্তর করতে পারেন toString(16)


4
আপনি যদি যাদু নম্বর 127এবং কীভাবে / কেন এই কাজটি সম্পর্কে কিছুটা যোগ করতে পারেন তবে খুব ভাল
লাগবে

-1
replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  var newtext = text;
  for (var tag in tagsToReplace) {
    if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
      var regex = new RegExp(tag, 'g');
      newtext = newtext.replace(regex, tagsToReplace[tag]);
    }
  }
  return newtext;
}

-1

<!DOCTYPE html>
<html>
<style>
button {
backround: #ccc;
padding: 14px;
width: 400px;
font-size: 32px;
}
#demo {
font-size: 20px;
font-family: Arial;
font-weight: bold;
}
</style>
<body>

<p>Click the button to decode.</p>

<button onclick="entitycode()">Html Code</button>

<p id="demo"></p>


<script>
function entitycode() {
  var uri = "quotation  = ark __ &apos; = apostrophe  __ &amp; = ampersand __ &lt; = less-than __ &gt; = greater-than __ 	non- = reaking space __ &iexcl; = inverted exclamation mark __ &cent; = cent __ &pound; = pound __ &curren; = currency __ &yen; = yen __ &brvbar; = broken vertical bar __ &sect; = section __ &uml; = spacing diaeresis __ &copy; = copyright __ &ordf; = feminine ordinal indicator __ &laquo; = angle quotation mark (left) __ &not; = negation __ &shy; = soft hyphen __ &reg; = registered trademark __ &macr; = spacing macron __ &deg; = degree __ &plusmn; = plus-or-minus  __ &sup2; = superscript 2 __ &sup3; = superscript 3 __ &acute; = spacing acute __ &micro; = micro __ &para; = paragraph __ &middot; = middle dot __ &cedil; = spacing cedilla __ &sup1; = superscript 1 __ &ordm; = masculine ordinal indicator __ &raquo; = angle quotation mark (right) __ &frac14; = fraction 1/4 __ &frac12; = fraction 1/2 __ &frac34; = fraction 3/4 __ &iquest; = inverted question mark __ &times; = multiplication __ &divide; = division __ &Agrave; = capital a, grave accent __ &Aacute; = capital a, acute accent __ &Acirc; = capital a, circumflex accent __ &Atilde; = capital a, tilde __ &Auml; = capital a, umlaut mark __ &Aring; = capital a, ring __ &AElig; = capital ae __ &Ccedil; = capital c, cedilla __ &Egrave; = capital e, grave accent __ &Eacute; = capital e, acute accent __ &Ecirc; = capital e, circumflex accent __ &Euml; = capital e, umlaut mark __ &Igrave; = capital i, grave accent __ &Iacute; = capital i, acute accent __ &Icirc; = capital i, circumflex accent __ &Iuml; = capital i, umlaut mark __ &ETH; = capital eth, Icelandic __ &Ntilde; = capital n, tilde __ &Ograve; = capital o, grave accent __ &Oacute; = capital o, acute accent __ &Ocirc; = capital o, circumflex accent __ &Otilde; = capital o, tilde __ &Ouml; = capital o, umlaut mark __ &Oslash; = capital o, slash __ &Ugrave; = capital u, grave accent __ &Uacute; = capital u, acute accent __ &Ucirc; = capital u, circumflex accent __ &Uuml; = capital u, umlaut mark __ &Yacute; = capital y, acute accent __ &THORN; = capital THORN, Icelandic __ &szlig; = small sharp s, German __ &agrave; = small a, grave accent __ &aacute; = small a, acute accent __ &acirc; = small a, circumflex accent __ &atilde; = small a, tilde __ &auml; = small a, umlaut mark __ &aring; = small a, ring __ &aelig; = small ae __ &ccedil; = small c, cedilla __ &egrave; = small e, grave accent __ &eacute; = small e, acute accent __ &ecirc; = small e, circumflex accent __ &euml; = small e, umlaut mark __ &igrave; = small i, grave accent __ &iacute; = small i, acute accent __ &icirc; = small i, circumflex accent __ &iuml; = small i, umlaut mark __ &eth; = small eth, Icelandic __ &ntilde; = small n, tilde __ &ograve; = small o, grave accent __ &oacute; = small o, acute accent __ &ocirc; = small o, circumflex accent __ &otilde; = small o, tilde __ &ouml; = small o, umlaut mark __ &oslash; = small o, slash __ &ugrave; = small u, grave accent __ &uacute; = small u, acute accent __ &ucirc; = small u, circumflex accent __ &uuml; = small u, umlaut mark __ &yacute; = small y, acute accent __ &thorn; = small thorn, Icelandic __ &yuml; = small y, umlaut mark";
  var enc = encodeURI(uri);
  var dec = decodeURI(enc);
  var res = dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>


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