276

JQuery এ টেক্সট () এবং এইচটিএমএল () ফাংশনগুলির মধ্যে পার্থক্য কী?

$("#div").html('<a href="example.html">Link</a><b>hello</b>');

বনাম

$("#div").text('<a href="example.html">Link</a><b>hello</b>');

jquery dom

— Brettk
সূত্র

2

একটি প্রশ্ন যা স্ব-ব্যাখ্যামূলক নয়: যখন আমাদের কেবল পাঠ্যের প্রয়োজন হয় (এইচটিএমএল ট্যাগ নেই), text()পদ্ধতিটি দ্রুততর হয় ?? কত?

— পিটার ক্রাউস

347

আমি মনে করি পার্থক্যটি প্রায় স্ব-বর্ণনামূলক। এবং এটি পরীক্ষা করা অত্যন্ত তুচ্ছ।

jQuery.html()স্ট্রিংটিকে এইচটিএমএল হিসাবে jQuery.text()গণ্য করে, সামগ্রীটিকে পাঠ্য হিসাবে বিবেচনা করে

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>

<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

একটি পার্থক্য যা এতটা সুস্পষ্ট নাও হতে পারে jQuery API ডকুমেন্টেশনে বর্ণিত

.Html () এর জন্য ডকুমেন্টেশনে :

.html()পদ্ধতি XML দস্তাবেজগুলিতে উপলব্ধ নেই।

এবং টেক্সট () এর জন্য ডকুমেন্টেশনে :

.html()পদ্ধতির বিপরীতে , .text()এক্সএমএল এবং এইচটিএমএল উভয় দস্তাবেজগুলিতে ব্যবহার করা যেতে পারে।

$(function() {
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>

স্নিপেট প্রসারিত করুন

Http://jsfiddle.net/h حسين/sUTVg/ এ লাইভ ডেমো

— পিটার বেইলি
সূত্র

এটিও লক্ষ করা উচিত, দৈর্ঘ্য পাশাপাশি দু'জনের মধ্যে পৃথক। jsfiddle.net/sUTVg/458

— গ্রীক্যাট্রিনা 20'15

5

@aaqualsb আমি স্বীকার করি যে এটি এখন একটি পুরানো প্রশ্ন, তবে আমার মন্তব্য করতে হবে যে default এইচটিএমএল () using ব্যবহার করা ডিফল্টটি বিপজ্জনক কারণ পাঠ্যটি এইচটিএমএল হিসাবে বিবেচিত হয়। যদি আপনি সেই পাঠ্যটি কোনও ক্যোরিস্ট্রিং প্যারামিটার, ফর্ম, শিরোনাম, URL বা অন্য যে কোনও জায়গা থেকে পান যা আপনার পাঠ্য সরবরাহ বা সম্পাদনা করতে পারে তবে আপনি এক্সএসএসের জন্য প্রশস্ত।

— ক্যানিস

105

((দয়া করে আপডেট হলে আপডেট করুন, এই উত্তরটি উইকি))

উপ-প্রশ্ন: যখন কেবল পাঠ্য হয়, তত দ্রুত, `.text()`বা `.html()`?

উত্তর: .html() দ্রুত! দেখুন এখানে সব প্রশ্নের জন্য একটি "আচরণ পরীক্ষা কিট" ।

সুতরাং, উপসংহারে, আপনার যদি "কেবল একটি পাঠ্য" থাকে তবে html()পদ্ধতিটি ব্যবহার করুন ।

দ্রষ্টব্য: কোন মানে নেই? মনে রাখবেন যে .html()ফাংশনটি কেবল একটি মোড়কের জন্য .innerHTMLরয়েছে তবে .text()ফাংশনে jQuery একটি "সত্তা ফিল্টার" যুক্ত করে এবং এই ফিল্টারটি স্বাভাবিকভাবেই সময় নেয়।

ঠিক আছে, আপনি যদি সত্যিই পারফরম্যান্স চান ... সম্পত্তি দ্বারা সরাসরি পাঠ্য-প্রতিস্থাপন অ্যাক্সেস করতে খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করুনnodeValue । বেঞ্চমার্ক উপসংহার:

jQuery এর .html()তুলনায় 2x ডলার দ্রুত .text()।
খাঁটি জেএস 'এর .innerHTMLতুলনায় ~ 3x দ্রুত .html()।
খাঁটি জেএস ' .nodeValueতুলনায় ~ 50x দ্রুত, এর চেয়ে .html()~ 100x .text()এবং 20x ডলার .innerHTML।

PS: .textContentসম্পত্তিটি ডিওএম-লেভেল -3 এর সাথে প্রবর্তিত হয়েছিল, .nodeValueএটি ডিওএম-স্তর -২ এবং দ্রুত (!) Is

দেখুন এটি সম্পূর্ণ বেঞ্চমার্ক :

// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());

// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
    document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());

— পিটার ক্রাউস
সূত্র

7

তবে যদি অবিশ্বস্ত ইনপুট নিয়ে কাজ করা হয় তবে আপনার যখনই সম্ভব পাঠ্য () ব্যবহার করা উচিত।

— স্কট সিমন্টিস

@ স্কটসিমন্টিস যখন আপনি nodeValueসম্পত্তি সেট করেন , এটি ">" কে "& lt;" ইত্যাদিতে রূপান্তরিত করে

— পিটার ক্রাউস

আমি যখন ক্রোম ডেভটুলগুলি ( বিকাশকারী। ক্রোম / দেবতুলস / ডকস / টাইমলাইন ) দিয়ে "বেঞ্চমার্ক" করি , ফলাফল বিপরীত হয় ( .text()~ 7x এর চেয়ে দ্রুত বলে মনে হয় .html())। উত্স কোড: codepen.io/damhonglinh/pen/vGpQEO । আমি 1500 উপাদান দিয়ে পরীক্ষা করেছি; .html()20 220ms .text()নিয়েছে এবং 30 ডলার নিয়েছে।

— লিনহ ড্যাম

হাই @ লিংহাম হুম ... সম্পূর্ণ মানদণ্ড ব্যবহার করে , আমার ফায়ারফক্স "জেকিউ টাইমস (3000x): html = 82 পাঠ্য = 254", "জেএস টিমস (3000x): এইচটিএমএল = 15 পাঠ্য = 4" ... এবং আমার ক্রোম "জিকিউ" বলে টিএমইএস (3000x): এইচটিএমএল = 82 পাঠ্য = 202 "," জেএস টিমস (3000x): এইচটিএমএল = 16 পাঠ্য = 0 ".... সুতরাং উভয় (ফায়ারফক্স এবং ক্রোম) একই সময়ের অনুপাত রয়েছে ।

— পিটার ক্রাউস

পাঠ্য () এবং এইচটিএমএল () এর মধ্যে একটি সত্যিকারের মানদণ্ড হতে নির্বাচকটি করা উচিত বা সব ক্ষেত্রেই এলিমেন্টবাইআইডি বা $ ("# কাজ") পাওয়া উচিত বা আপনি

— E

66

প্রথম উদাহরণটি এইচটিএমএলকে প্রকৃতপক্ষে এম্বেড করবে divযেখানে দ্বিতীয় উদাহরণটি উপাদান সম্পর্কিত অক্ষরগুলিকে তাদের সংশ্লিষ্ট চরিত্র সত্তার সাথে প্রতিস্থাপনের মাধ্যমে পাঠ্যটি থেকে পালিয়ে যাবে যাতে এটি অক্ষরে অক্ষরে প্রদর্শিত হয় (অর্থাত্ এইচটিএমএল প্রদর্শিত হবে না)।

— অ্যান্ড্রু হরে
সূত্র

1

দুঃখিত, আমি বেশ বুঝতে পারি না। আপনি আরও ব্যাখ্যা করতে পারে। ধন্যবাদ

— ব্রেটক

আপনি কী বোঝাতে চান ২ য় উদাহরণ "এনকোড" করবে? এটি ইতিমধ্যে এনকোডিং, না?

— ব্রেটক 22

@ ব্রেটটক - আমি বলেছিলাম "এনকোড" তবে এটি আঙ্গুলের চেয়ে বেশি ছিল। আমি যা বলতে চাইছি তার প্রতিফলনের জন্য আমি আমার উত্তরটি পরিবর্তন করেছি।

— অ্যান্ড্রু হরে

6

তার অর্থ হল যে .text()ফাংশনে, <সমস্তটি প্রতিস্থাপন করা হবে <। সুতরাং .html()ব্রাউজারটি একটি লিঙ্ক এবং কিছু সাহসী পাঠ্য .text()দেখতে পাবে, ব্রাউজারের সাথে সমস্ত কিছু পাঠ্য হিসাবে দেখবে এবং কোনও লিঙ্ক বা সাহসী পাঠ্য তৈরি করবে না।

— মটিটি

59

text()পদ্ধতি কোনো HTML এটি মধ্যে পাস করা হয়েছে সত্তা-পালাতে। text()আপনি যখন এইচটিএমএল কোড সন্নিবেশ করতে চান তখন পৃষ্ঠাটি যে সমস্ত লোকের কাছে দৃশ্যমান হবে তা ব্যবহার করুন ।

প্রযুক্তিগতভাবে, আপনার দ্বিতীয় উদাহরণ উত্পাদন করে:

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

যা ব্রাউজারে রেন্ডার হবে:

<a href="example.html">Link</a><b>hello</b>

আপনার প্রথম উদাহরণটি একটি আসল লিঙ্ক এবং কিছু সাহসী পাঠ্য হিসাবে রেন্ডার হবে।

— davidcl
সূত্র

4

এটি আসলে কী চলছে তা ব্যাখ্যা করার জন্য এটি নির্বাচিত উত্তরে অন্তর্ভুক্ত করা উচিত ছিল।

— d512

27

আসলে উভয়ই কিছুটা দেখতে দেখতে কিছুটা একই তবে এটি আপনার ব্যবহার বা উদ্দেশ্য আপনি কী অর্জন করতে চান তার উপর নির্ভর করে,

কোথায় ব্যবহার করবেন:

ব্যবহার .html()HTML উপাদানগুলি থাকার পাত্রে উপর কার্যকরী হিসেবে।
.text()সাধারণত পৃথক ওপেন এবং ক্লোজিং ট্যাগ থাকা উপাদানগুলির পাঠ্যকে সংশোধন করতে ব্যবহার করুন

কোথায় ব্যবহার করবেন না:

.text() ফর্ম ইনপুট বা স্ক্রিপ্টগুলিতে পদ্ধতি ব্যবহার করা যায় না।
- .val() ইনপুট বা টেক্সারি উপাদানগুলির জন্য।
- .html() একটি স্ক্রিপ্ট উপাদান মান জন্য।
এইচটিএমএল সামগ্রীগুলি বাছাই করা এইচটিএমএল .text()ট্যাগগুলিকে এইচটিএমএল সত্তায় রূপান্তরিত করবে।

পার্থক্য:

.text() এক্সএমএল এবং এইচটিএমএল উভয় দস্তাবেজগুলিতে ব্যবহার করা যেতে পারে।
.html() শুধুমাত্র এইচটিএমএল নথির জন্য।

কর্মের পার্থক্যগুলি দেখতে jsfiddle এ এই উদাহরণটি দেখুন

উদাহরণ

— ওয়েস কুরেশি
সূত্র

1

এই উত্তরটি বোঝার জন্য সবচেয়ে সহজ এবং সর্বোত্তম বিন্যাসিত ছিল +1

— কেটি

বিফ ডব্লিউ :: এইচটিএমএল (ডেটা) কী; & ভাল (ডেটা); @ ওবাইস কুরেশি

— রত্ন

9

স্ট্রেঞ্জ কেউ ক্রস সাইট স্ক্রিপ্টিং প্রতিরোধ সুবিধা উল্লেখ করেন যে, .text()ওভার .html()(যদিও শুধু অন্যদের উল্লেখ করেছি যে .text()তথ্য পালাতে)।

এটা সবসময় ব্যবহারের সুপারিশ করা হচ্ছে .text()যখন আপনি DOM মধ্যে হালনাগাদ তথ্য যা শুধু ডেটা / ব্যবহারকারী দেখার জন্য লেখা চাই।

.html() বেশিরভাগ ক্ষেত্রে একটি ডিভির মধ্যে এইচটিএমএল সামগ্রী পেতে ব্যবহার করা উচিত।

— দেব
সূত্র

5

যখন আপনি একটি সাধারণ পাঠ্য হিসাবে মানটি প্রদর্শন করতে চান তখন টেক্সট (…) ব্যবহার করুন।

আপনি যখন এইচটিএমএল ফর্ম্যাট পাঠ্য (বা এইচটিএমএল সামগ্রী) হিসাবে মানটি প্রদর্শন করতে চান তখন .html (…) ব্যবহার করুন।

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

— অ্যাডোরজান প্রিনজ
সূত্র

2

মূলত, $ ("# ডিভ") h এইচটিএমএল বিষয়বস্তু সেট করার জন্য এলিমেন্ট.ইনার এইচটিএমএল এবং $ ("# ডিভি") ব্যবহার করে text

http://docs.jquery.com/Attributes/html :

Set the html contents of every matched element

http://docs.jquery.com/Atributes/text :

Similar to html(), but escapes HTML (replace "<" and ">" with their HTML 
entities).

— শেঠ
সূত্র

2

'('। div ')। এইচটিএমএল (ভাল) সমস্ত নির্বাচিত উপাদানগুলির HTML মান নির্ধারণ করবে, $ ('। div ')। পাঠ্য (ভাল) সমস্ত নির্বাচিত উপাদানগুলির পাঠ্য মান সেট করবে।

JQuery.text () এর জন্য এপিআই ডক্স

JQuery.html () এর জন্য এপিআই ডক্স

আমি অনুমান করব যে তারা যথাক্রমে নোড # টেক্সট কনটেন্ট এবং এলিমেন্ট # অভ্যন্তরীণ এইচটিএমএল এর সাথে মিলে যায়। (গেকো ডোম রেফারেন্স)।

— মিচিয়েল কালকম্যান
সূত্র

2

সহজ শব্দে।

এইচটিএমএল () - অভ্যন্তরীণ এইচটিএমএল (এইচটিএমএল ট্যাগ এবং পাঠ্য) পেতে।

পাঠ্য () - ভিতরে উপস্থিত থাকলে কেবল পাঠ্য পেতে (কেবল পাঠ্য)

— মোস্তকিম কে
সূত্র

1

ভিন্ন .html()হিসাবে এইচটিএমএল হিসাবে মূল্যায়ন করা হয়, .text()একটি পাঠ্য হিসাবে মূল্যবান।
এইচটিএমএল এইচটিএমএল একটি ব্লক বিবেচনা করুন

<div id="mydiv">
<div class="mydiv">
    This is a div container
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
    a text after ul
</div>
</div>

জাতীয়

var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'

চিত্রটি এই লিঙ্কটি থেকে http://api.jquery.com/text/

— পাস্কাল টোভোহেরি
সূত্র

1

.text()এইচটিএমএল ট্যাগের মধ্যে আপনাকে প্রকৃত পাঠ্য দেবে। উদাহরণস্বরূপ, pট্যাগগুলির মধ্যে অনুচ্ছেদে পাঠ্য । মজার আকর্ষণীয় বিষয়টি হ'ল এটি আপনাকে $নির্বাচিত উপাদানটির বাছাই করা উপাদানটির বাচ্চাদের উপাদানগুলির সাথে সমস্ত মৌলিক উপাদান যা আপনার নির্বাচক দ্বারা লক্ষ্যবস্তু করে তা আপনাকে দেবে । তাই আপনি যদি একাধিক থাকে তাহলে pশরীর উপাদান ভিতরে পাঠ্য সহ ট্যাগ এবং আপনি একটি না $(body).text(), আপনি পাবেন সব সব অনুচ্ছেদ থেকে পাঠ্য। (কেবল পাঠ্য, pনিজেরাই ট্যাগ নয়))

.html()আপনাকে পাঠ্য এবং ট্যাগ দেবে। সুতরাং $(body).html()মূলত আপনাকে আপনার পুরো পৃষ্ঠাটি এইচটিএমএল পৃষ্ঠা দেবে

.val()valueযেমন একটি বৈশিষ্ট্য আছে এমন উপাদানগুলির জন্য কাজ করে input। একটি inputঅন্তর্ভুক্ত টেক্সট বা HTML আছে না এবং এইভাবে .text()এবং .html()উভয় হতে হবে nullজন্য inputউপাদান।

— ফ্যাবিয়ান মাদুরাই
সূত্র

0

আমি মনে করি যে পার্থক্যটি এইচটিএমএল ট্যাগ in text()োকানো আপনার এইচটিএমএল ট্যাগের কাজ করে না

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

আউটপুট:

You are registered <br> Mister name sourname

text()সঙ্গে প্রতিস্থাপনhtml()

আউটপুট

You are registered
Mister name sourname

তারপরে ট্যাগটি <br>কাজ করেhtml()

— ডেভিড
সূত্র

1

আপনার উত্তরটি সংশোধন করুন, প্রথম স্নিপেট ব্যবহার করা উচিত text()।

— এমকাআমা

0

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

এটি ছয় বছর পর আমার কাছে একটি জঘন্য উত্তর, কিছু মনে করবেন না।

— মিনহাজ
সূত্র

JQuery: পাঠ্য () এবং এইচটিএমএল () এর মধ্যে পার্থক্য কী?

উপ-প্রশ্ন: যখন কেবল পাঠ্য হয়, তত দ্রুত, .text()বা .html()?

কোথায় ব্যবহার করবেন:

কোথায় ব্যবহার করবেন না:

পার্থক্য:

উদাহরণ

উপ-প্রশ্ন: যখন কেবল পাঠ্য হয়, তত দ্রুত, `.text()`বা `.html()`?