मैं जावास्क्रिप्ट में स्पैन एलिमेंट का टेक्स्ट कैसे बदल सकता हूँ

Question

अगर मेरे पास एक अवधि है, तो कहो:

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

मैं "hereismytext" को "newtext" में बदलने के लिए जावास्क्रिप्ट का उपयोग कैसे करूं?

Answer 1

आधुनिक ब्राउज़रों के लिए आपको उपयोग करना चाहिए:

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

जबकि पुराने ब्राउज़रों को पता नहीं है textContent, यह उपयोग करने के लिए अनुशंसित नहीं है innerHTMLक्योंकि यह एक XSS भेद्यता का परिचय देता है जब नया पाठ उपयोगकर्ता इनपुट होता है (अधिक विस्तृत चर्चा के लिए नीचे अन्य उत्तर देखें):

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

Comments

@bouncingHippo document.getElementById ("myspan")। setAttribute ("स्टाइल", "cssvalues");

— ग्रीगोइरे

उन दो उत्तरों को एक में विलय करने का कोई तरीका होना चाहिए। इसका ठीक वैसा ही जवाब।

— हरमन इंग्लैड्सन

यह पाठ सेट नहीं करता है , यह HTML सेट करता है जो मौलिक रूप से अलग है।

— ब्रैड

@gregoire - जैसा कि अन्य लोगों ने बताया है कि आपका उत्तर पहले से ही XSS के लिए असुरक्षित है। यह प्रश्न लगभग 80k बार पहले ही देखा जा चुका है, जिसका अर्थ है कि बहुत सारे लोगों ने शायद इस समाधान को ले लिया है और अनावश्यक xssks शुरू किए होंगे। क्या आप textContentइसके बजाय उपयोग करने के लिए अपने उत्तर को अपडेट करने पर विचार कर सकते हैं , जैसे कि नए लोगों को उचित और सुरक्षित तरीकों का उपयोग करने के लिए प्रोत्साहित किया जाएगा?

— टिडो

@Tiddo textContent IE8 और उसके बाद के संस्करण में समर्थित नहीं है और मैं आपसे आशा करता हूं कि आप अपनी स्क्रिप्ट में कभी भी सीधे गैर-स्वीकृत उपयोगकर्ता इनपुट का उपयोग नहीं करेंगे।

— ग्रेगोइरे

Answer 2

आंतरिक HTML का उपयोग करना आवश्यक नहीं है । इसके बजाय, आपको एक टेक्स्टकोड बनाना चाहिए। इस तरह, आप अपने पाठ को "बाइंडिंग" कर रहे हैं और आप कम से कम इस मामले में, एक्सएसएस हमले के प्रति संवेदनशील नहीं हैं।

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

सही तरीका:

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

इस भेद्यता के बारे में अधिक जानकारी के लिए: क्रॉस साइट स्क्रिप्टिंग (XSS) - OWASP

4 अप्रैल 2017 को संपादित nov:

@Mumush सुझाव के अनुसार कोड की संशोधित तीसरी पंक्ति : " परिशिष्ट का उपयोग करें (); बजाय"।
Btw, @Jimbo जॉनी के अनुसार मुझे लगता है कि सबकुछ को लेयर सिद्धांत द्वारा सुरक्षा लागू करके उपयोगकर्ता इनपुट के रूप में माना जाना चाहिए। इस तरह आप किसी भी आश्चर्य का सामना नहीं करेंगे।

Comments

जब आप innerHTMLसावधानी बरतने के बारे में बिल्कुल सही हैं , तो ध्यान दें कि आपका समाधान innerTextफ़ायरफ़ॉक्स में समर्थित नहीं है। quirksmode.org/dom/html यह भी उपयोग करता है textContentजो IE8 में समर्थित नहीं है। आप इन मुद्दों के आसपास पाने के लिए कोड संरचना कर सकते हैं।

— ट्रोट

span.appendChild(txt);इसके बजाय का उपयोग करें !

— मुमुश

सवाल उपयोगकर्ता इनपुट के बारे में कुछ नहीं कहता है, इसलिए एक कंबल बयान जो innerHTMLअनुशंसित नहीं है, हास्यास्पद है। यह उल्लेख करने के लिए नहीं कि यह अभी भी ठीक है एक बार स्वच्छता हो गई है। उपयोगकर्ता इनपुट को साफ करना चाहिए यह विचार इस विशिष्ट प्रश्न से संबंधित नहीं है । अधिकांश में यह अंत में एक छोटा नोट कहता है कि "btw: यदि यह उपयोगकर्ता इनपुट है तो पहले सेनिटाइज़ करना सुनिश्चित करें या X विधि का उपयोग करें जिसकी आवश्यकता नहीं है" ।

— जिम्बो जॉनी

इसके अलावा, तत्वों का निर्माण भीतर से HTML का उपयोग करने की तुलना में तेज है।

— शमूएल रोंडेउ-मिलियरे

AppendChild का उपयोग वास्तव में पाठ को नहीं बदलता है, यह केवल इसमें जोड़ता है। यहां अपने कोड का उपयोग करते हुए, मूल प्रश्न से अवधि "hereismytextyour शांत पाठ" पढ़ना समाप्त हो जाएगा। शायद span.innerHTML = "";तो appendChild?

— शेनएज़्यूस

Answer 3

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

Answer 4

संपादित करें: यह 2014 में लिखा गया था। आप शायद IE8 के बारे में परवाह नहीं करते हैं और उपयोग करने के बारे में भूल सकते हैं 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';

हालाँकि, जैसा कि अन्य ध्यान दें, यदि आप पाठ स्ट्रिंग के किसी भी भाग के लिए स्रोत नहीं हैं, तो आप innerHTMLXSS जैसे सामग्री इंजेक्शन हमलों के अधीन हो सकते हैं यदि आप पाठ को पहले ठीक से साफ करने के लिए सावधान नहीं हैं।

यदि आप उपयोगकर्ता से इनपुट का उपयोग कर रहे हैं, तो यहां क्रॉस-ब्राउज़र संगतता बनाए रखते हुए सुरक्षित तरीके से करने का एक तरीका है:

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

फ़ायरफ़ॉक्स समर्थन नहीं करता है innerTextऔर IE8 समर्थन नहीं करता है, 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";   
}

इनरटेक्स्ट प्रॉपर्टी का पता सफारी, गूगल क्रोम और एमएसआईई द्वारा लगाया जाएगा। फ़ायरफ़ॉक्स के लिए, चीजों को करने का मानक तरीका टेक्स्टकॉन्टेंट का उपयोग करना था लेकिन संस्करण 45 के बाद से इसमें एक इनरटेक्स्ट गुण भी है, जैसा कि किसी ने मुझे हाल ही में बताया है। यह समाधान यह देखने के लिए परीक्षण करता है कि क्या ब्राउज़र इन गुणों में से किसी का समर्थन करता है और यदि ऐसा है, तो "newtext" असाइन करता है।

लाइव डेमो: यहां

Comments

फ़ायरफ़ॉक्स ने रिलीज 45 में इनर टेक्स्ट सपोर्ट लागू किया ।

— user3351605

Answer 7

ऊपर दिए गए शुद्ध जावास्क्रिप्ट उत्तर के अलावा, आप निम्न के रूप में jQuery पाठ विधि का उपयोग कर सकते हैं :

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

यदि आपको किसी स्पैन या डिव तत्वों की HTML सामग्री प्राप्त / बदलने के लिए उत्तर देने की आवश्यकता है , तो आप यह कर सकते हैं:

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

संदर्भ:

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

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

Answer 8

आप क्वेरीसेप्टर () विधि का भी उपयोग कर सकते हैं, यह मानकर कि 'myspan' आईडी अद्वितीय है क्योंकि विधि निर्दिष्ट चयनकर्ता के साथ पहला तत्व लौटाता है:

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

developer.mozilla

Answer 9

जैसे अन्य जवाब में, innerHTML और innerText सिफारिश नहीं की जाती है, यह बेहतर फायदा नहीं है textContent । यह विशेषता अच्छी तरह से समर्थित है, आप इसे देख सकते हैं: http://caniuse.com/#search=textContent

Answer 10

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

यह आईडी के साथ डोम-नोड का चयन करेगा myspanऔर इसे पाठ सामग्री को बदल देगाnew text

Answer 11

तुम कर सकते हो

 document.querySelector ("[Span]")। textContent = "content_to_display"; 

Comments

मेरे द्वारा दिए गए उत्तर के साथ क्या अंतर है?

— अदीस

Answer 12

इस स्पान के लिए

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

आप इस तरह से जा सकते हैं: -

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