আমি কীভাবে জাভাস্ক্রিপ্টে একটি স্প্যান উপাদানটির পাঠ্য পরিবর্তন করব

Question

আমার যদি স্প্যান থাকে তবে বলুন:

<span id="myspan"> hereismytext </span>

আমি এখানে জাভাস্ক্রিপ্ট কীভাবে "হিজিস্টেক্সট" থেকে "নিউটেক্সট" এ পরিবর্তন করব?

Answer 1

আধুনিক ব্রাউজারগুলির জন্য আপনার ব্যবহার করা উচিত:

document.getElementById("myspan").textContent="newtext";

পুরানো ব্রাউজারগুলি হয়ত জানেন না textContent, এটি ব্যবহারের জন্য প্রস্তাবিত নয় innerHTMLকারণ এটি যখন নতুন পাঠ্যর ব্যবহারকারী ইনপুট হয় তখন এটি একটি এক্সএসএস দুর্বলতার পরিচয় দেয় (আরও বিস্তারিত আলোচনার জন্য নীচে অন্যান্য উত্তর দেখুন):

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

Comments

@ বাউন্সিং হিপ্পো ডকুমেন্ট.সেটমেন্টবিওয়াইআইডি ("মাইস্প্যান")। সেটঅ্যাট্রিবিউট ("স্টাইল", "সিএসভ্যালু");

— গ্রেগোয়ার

এই দুটি উত্তর এক সাথে মার্জ করার কিছু উপায় থাকতে হবে। এটি ঠিক একই উত্তর।

— হারমান ইনজালডসন

এটি পাঠ্য সেট করে না , এটি এইচটিএমএল সেট করে যা মূলত ভিন্ন।

— ব্র্যাড

@ গ্রেগোয়ার - অন্যরা ইতিমধ্যে চিহ্নিত করেছে যে আপনার উত্তর এক্সএসএসের পক্ষে ঝুঁকির মধ্যে রয়েছে। এই প্রশ্নটি ইতিমধ্যে প্রায় 80k বার দেখা হয়েছে, এর অর্থ হ'ল প্রচুর লোক সম্ভবত এই সমাধানটি গ্রহণ করেছেন এবং সম্ভবত অপ্রয়োজনীয় এক্সএসএস ফাঁস প্রবর্তন করেছেন। textContentপরিবর্তে আপনি নিজের উত্তরটি আপডেট করার বিষয়ে বিবেচনা করতে পারেন , যেমন নতুন লোকেরা সঠিক এবং সুরক্ষিত পদ্ধতি ব্যবহার করতে উত্সাহিত হবে?

— তিদ্দো

@ টিড্ডো টেক্সট কনটেন্টটি আইই 8 এবং এর নীচে সমর্থিত নয় এবং আমি আপনাকে প্রত্যাশা করছি যে আপনি কখনই আপনার স্ক্রিপ্টে সরাসরি অ-স্যানিটাইজড ব্যবহারকারী ইনপুট ব্যবহার করবেন না।

— গ্রেগোয়ার

Answer 2

অভ্যন্তরীণ এইচটিএমএল ব্যবহার করা তাই প্রস্তাবিত নয় । পরিবর্তে, আপনার একটি পাঠ্য নোড তৈরি করা উচিত। এইভাবে, আপনি আপনার পাঠ্যটিকে "বাধ্য" করছেন এবং আপনি অন্তত এই ক্ষেত্রে কোনও এক্সএসএস আক্রমণে ঝুঁকিপূর্ণ নন।

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

সঠিক উপায়:

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

এই দুর্বলতা সম্পর্কে আরও তথ্যের জন্য: ক্রস সাইট স্ক্রিপ্টিং (এক্সএসএস) - ওডাব্লুএএসপি

নবীন ৪ র্থ 2017 সম্পাদিত:

@ মুমুশ পরামর্শ অনুসারে কোডের তৃতীয় লাইনের পরিবর্তিত : "পরিবর্তে অ্যাপেনডিল্ড () ব্যবহার করুন"। বিটিডব্লিউ
, @ জিম্বো জনি অনুসারে আমি মনে করি স্তরগুলির নীতি অনুসারে সুরক্ষা প্রয়োগ করে সবকিছুকে ব্যবহারকারীর ইনপুট হিসাবে বিবেচনা করা উচিত। এইভাবে আপনি কোনও বিস্ময়ের মুখোমুখি হবেন না।

Comments

আপনি innerHTMLসাবধানতার প্রয়োজন সম্পর্কে একদম সঠিক হলেও নোট করুন যে আপনার সমাধানটি innerTextফায়ারফক্সে সমর্থিত নয় uses quirksmode.org/dom/html এটি textContentIE8 তে সমর্থন করে না এমনটিও ব্যবহার করে। আপনি এই সমস্যাগুলি পেতে কোড গঠন করতে পারেন।

— ট্রট

span.appendChild(txt);পরিবর্তে ব্যবহার করুন!

— মুমুশ

প্রশ্নটি ব্যবহারকারী ইনপুট সম্পর্কে কিছুই বলে না, তাই কম্বল স্টেটমেন্ট যা innerHTMLপ্রস্তাবিত নয় তা হাস্যকর। একবারে স্যানিটাইজ করা হলে এটি এখনও ঠিক আছে mention ধারণা যে একজন ব্যবহারকারী ইনপুট sanitize উচিত তাই সম্পর্কিত নয় এই নির্দিষ্ট প্রশ্নের। বেশিরভাগ ক্ষেত্রে এটি "বিটিডাব্লু:" বলে শেষে একটি ছোট নোটের যোগ্যতা অর্জন করে যদি এটির ব্যবহারকারী ইনপুটটি প্রথমে স্যানিটাইজ করা নিশ্চিত করে বা এক্স পদ্ধতিটি ব্যবহার করে না যা এটির প্রয়োজন হয় না ।

— জিম্বো জনি

এছাড়াও, উপাদান তৈরি করা অভ্যন্তরীণ এইচটিএমএল ব্যবহারের চেয়ে দ্রুত।

— স্যামুয়েল রোনডাউ-মিল্লায়ার

অ্যাপেন্ডচাইল্ড ব্যবহার করে পাঠ্যটি আসলে পরিবর্তিত হয় না , এটি কেবল এতে যুক্ত করে। আপনার কোডটি এখানে ব্যবহার করে, আসল প্রশ্নটি থেকে স্প্যানটি "এখানে স্বৈরশাস্ত্র আপনার দুর্দান্ত পাঠ্য" পড়া শেষ করবে। সম্ভবত span.innerHTML = "";তখন এপেন্ডচাইল্ড?

— শেনসুস

Answer 3

document.getElementById('myspan').innerHTML = 'newtext';

Answer 4

সম্পাদনা: এটি 2014 সালে লেখা হয়েছিল You আপনি সম্ভবত আই 88 সম্পর্কে আর চিন্তা করেন না এবং ব্যবহার সম্পর্কে ভুলে যেতে পারেন innerText। শুধু ব্যবহার করুন textContentএবং এটি দিয়ে সম্পন্ন করা, হুর।

আপনি যদি সেই পাঠ্য সরবরাহ করে থাকেন এবং পাঠকের কোনও অংশই ব্যবহারকারী দ্বারা সরবরাহ করা হয় না (বা অন্য কোনও উত্স যা আপনি নিয়ন্ত্রণ করেন না) তবে সেটিংটি innerHTMLগ্রহণযোগ্য হতে পারে:

// * Fine for hardcoded text strings like this one or strings you otherwise 
//   control.
// * Not OK for user-supplied input or strings you don't control unless
//   you know what you are doing and have sanitized the string first.
document.getElementById('myspan').innerHTML = 'newtext';

যাইহোক, অন্যরা লক্ষ্য করে যে, আপনি যদি পাঠ্যের স্ট্রিংয়ের কোনও অংশের উত্স না হন তবে innerHTMLএক্সএসএসের মতো সামগ্রী ইনজেকশন আক্রমণের শিকার হতে পারেন যদি আপনি প্রথমে পাঠ্যটি সঠিকভাবে স্যানিটাইজ করতে যত্নবান হন না।

আপনি যদি ব্যবহারকারী থেকে ইনপুট ব্যবহার করছেন তবে ক্রস ব্রাউজারের সামঞ্জস্যতা বজায় রেখে সুরক্ষিতভাবে এটি করার একটি উপায় এখানে রয়েছে:

var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';

ফায়ারফক্স সমর্থন করে না innerTextএবং আইই 8 সমর্থন করে না textContentতাই যদি আপনি ক্রস ব্রাউজারের সামঞ্জস্য বজায় রাখতে চান তবে উভয়ই আপনার ব্যবহার করা দরকার।

এবং আপনি যদি innerTextসম্ভব হয় যেখানে রেফ্লো (এ কারণে ) এড়াতে চান :

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent = 'newtext';
} else {
    span.innerText = 'newtext';
}

Answer 5

আমি ব্যবহার করি Jqueryএবং উপরেরগুলির কেউ সাহায্য করেনি, আমি জানি না কেন তবে এটি কাজ করেছিল:

 $("#span_id").text("new_value");

Answer 6

এখানে অন্য উপায়:

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

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

লাইভ ডেমো: এখানে

Comments

ফায়ারফক্স 45 রিলিজ ইনারটেক্সট সমর্থন প্রয়োগ করেছে ।

— ব্যবহারকারীর 35351605

Answer 7

উপরের খাঁটি জাভাস্ক্রিপ্টের উত্তরগুলি ছাড়াও, আপনি নীচে jQuery পাঠ্য পদ্ধতিটি ব্যবহার করতে পারেন :

$('#myspan').text('newtext');

যদি আপনার স্প্যান বা ডিভ উপাদানগুলির এইচটিএমএল সামগ্রী পেতে / পরিবর্তন করতে উত্তরটি প্রসারিত করতে হয় তবে আপনি এটি করতে পারেন:

$('#mydiv').html('<strong>new text</strong>');

তথ্যসূত্র:

.text (): http://api.jquery.com/text/

.html (): http://api.jquery.com/html/

Answer 8

পদ্ধতিটি নির্দিষ্ট নির্বাচকটির সাথে প্রথম উপাদানটি ফেরত দেওয়ার কারণে আপনি 'মাইএসপ্যান' আইডিটি অনন্য বলে ধরে রেখে আপনি ক্যোরিস্লেक्टर () পদ্ধতিটিও ব্যবহার করতে পারেন:

document.querySelector('#myspan').textContent = 'newtext';

developer.mozilla

Answer 9

অন্যান্য উত্তরের মতোই, অভ্যন্তরীণ এইচটিএমএল এবং ইনারটেক্সট বাঞ্ছনীয় নয়, এটি টেক্সট কনটেন্টকে আরও ভাল ব্যবহার করুন । এই বৈশিষ্ট্যটি ভালভাবে সমর্থিত, আপনি এটি এটি পরীক্ষা করতে পারেন: http://caniuse.com/#search=textContent

Answer 10

document.getElementById("myspan").textContent="newtext";

myspanএটি আইডি সহ ডোম-নোড নির্বাচন করবে এবং এতে পাঠ্য সামগ্রীকে পরিবর্তন করবেnew text

Answer 11

আপনি করতে পারেন

 document.querySelector ("[স্প্যান]") text 

Comments

আমি যে উত্তর দিয়েছি তার সাথে পার্থক্য কী?

— অ্যাডিস

Answer 12

এই সময়কাল জন্য

<span id="name">sdfsdf</span>

আপনি এভাবে যেতে পারেন: -

$("name").firstChild.nodeValue = "Hello" + "World";