मैं अपने बाल तत्वों को बदले बिना किसी तत्व के पाठ को कैसे बदल सकता हूं?

Question

मैं तत्व के पाठ को गतिशील रूप से अपडेट करना चाहता हूं:

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

मैं jQuery के लिए नया हूं, इसलिए यह कार्य मेरे लिए काफी चुनौतीपूर्ण है। क्या कोई मुझे किसी फ़ंक्शन / चयनकर्ता को उपयोग करने के लिए इंगित कर सकता है?

यदि यह संभव है, तो मैं इसे बदलने के लिए आवश्यक पाठ के लिए एक नया कंटेनर जोड़ने के बिना करना चाहूंगा।

Comments

"अगर यह संभव है, तो मैं इसे बदलने के लिए आवश्यक पाठ के लिए एक नया कंटेनर जोड़ने के बिना करना चाहता हूं।" - वास्तव में? क्योंकि यह वहाँ एक कंटेनर के साथ बहुत आसान होगा।

— पॉल डी। वेट

दोस्तों, मैंने मूल प्रश्न को देखा और मुझे नहीं लगता कि ओपी ने बाल तत्वों के बारे में कुछ भी कहा है ...

— as टाइम विद

W3 मानकों के अनुसार div में टेक्स्ट नोड्स नहीं हो सकते हैं (यदि मुझे सही याद है)। एक पाठ कंटेनर जैसे <p>, <h1>, आदि को जोड़ा जाना चाहिए।

— मार्क बैजेंस

@ मर्क: संभवतः (एक्स) एचटीएमएल स्ट्रिक्ट में, लेकिन कोई और नहीं। (एचटीएमएल 5 अब यहां है।)

— पॉल डी। वेट

@ मट बॉल: वास्तविक HTML में कुछ चाइल्ड के बजाय स्पैन टैग होते हैं।

— इका

Answer 1

JQuery का उपयोग करके मार्क को बेहतर समाधान मिला है , लेकिन आप नियमित जावास्क्रिप्ट में भी ऐसा करने में सक्षम हो सकते हैं।

जावास्क्रिप्ट में, childNodesसंपत्ति आपको एक तत्व के सभी बच्चे नोड्स देती है, जिसमें पाठ नोड्स शामिल हैं।

इसलिए, यदि आप जानते हैं कि जिस पाठ को आप बदलना चाहते हैं, वह हमेशा तत्व में पहली चीज होने जा रहा है, तो उदाहरण के लिए यह HTML:

<div id="your_div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

आप ऐसा कर सकते हैं:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

बेशक, आप अभी भी <div>पहली जगह (यानी var your_div = $('your_div').get(0);) का चयन करने के लिए jQuery का उपयोग कर सकते हैं ।

Comments

पाठ नोड को बदलने की आवश्यकता नहीं है। बस मौजूदा एक dataया nodeValueसंपत्ति को बदलें ।

— टिम डाउन

@ समय: आह, मैंने सोचा कि एक आसान तरीका होना चाहिए। JQuery के साथ आने से पहले कभी भी जावास्क्रिप्ट नहीं किया। चीयर्स, मैं तदनुसार जवाब संपादित करूंगा।

— पॉल डी। वेट

इसलिए इस उत्तर को लागू करने के लिए एक और तारीख होगी$('#yourDivId')[0].childNodes[0].nodeValue = 'New Text';

— डीन मार्टिन

अब तक का सबसे छोटा और सरल उपाय - stackoverflow.com/a/54365288/4769218

— सिल्वर रिंगवे

"आप इसे नियमित रूप से जावास्क्रिप्ट में भी करने में सक्षम हो सकते हैं"

— युगल

Answer 2

अपडेट 2018

चूँकि यह एक बहुत लोकप्रिय उत्तर है, मैंने एक प्लगइन के रूप में jQuery के टेक्स्टनोडेक्टर चयनकर्ता को जोड़कर इसे थोड़ा अद्यतन और सुशोभित करने का फैसला किया।

नीचे दिए गए स्निपेट में आप देख सकते हैं कि मैं एक नया jQuery फ़ंक्शन परिभाषित करता हूं जो सभी को प्राप्त करता है (और केवल) टेक्स्टनोड्स। आप इस फ़ंक्शन की श्रृंखला के साथ-साथ first()फ़ंक्शन के उदाहरण के लिए भी कर सकते हैं। मैं टेक्स्ट नोड पर एक ट्रिम करता हूं और यह जांचता हूं कि क्या यह ट्रिम के बाद खाली नहीं है क्योंकि रिक्त स्थान, टैब, नई लाइनें आदि को टेक्स्ट नोड के रूप में भी पहचाना जाता है। यदि आपको उन नोड्स की भी आवश्यकता है, तो jQuery फ़ंक्शन में दिए गए कथन से सरल निकालें।

मैंने एक उदाहरण जोड़ा कि पहले टेक्स्ट नोड को कैसे बदलना है और सभी टेक्स्ट नोड्स को कैसे बदलना है।

यह दृष्टिकोण कोड को पढ़ना और कई बार और विभिन्न उद्देश्यों के साथ उपयोग करना आसान बनाता है।

अद्यतन 2017 (adrach) अगर आपको लगता है कि पसंद करते हैं अभी भी रूप में अच्छी तरह काम करना चाहिए।

JQuery एक्सटेंशन के रूप में

//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

//Use the jQuery extension
$(document).ready(function(){
  $('#replaceAll').on('click', () => {
    $('#testSubject').textNodes().replaceWith('Replaced');
  });

  $('#replaceFirst').on('click', () => {
    $('#testSubject').textNodes().first().replaceWith('Replaced First');
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
   **text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **also text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

जावास्क्रिप्ट (ईएस) eqivilant

//Add a new function to the HTMLElement object so it cna be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
  return [...this.childNodes].filter((node) => {
    return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
  });
}

//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#replaceAll').addEventListener('click', () => {
    document.querySelector('#testSubject').textNodes().forEach((node) => {
      node.textContent = 'Replaced';
    });
  });

  document.querySelector('#replaceFirst').addEventListener('click', function() {
    document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
  **text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **also text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

---

अपडेट 2017 (पालन):

ऐसा लगता है कि यह पोस्ट किए जाने के बाद से कई चीजें बदल गई हैं। यहाँ एक अद्यतन संस्करण है

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");

---

मूल उत्तर (वर्तमान संस्करणों के लिए काम नहीं कर रहा है)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

स्रोत: http://api.jquery.com/contents/

Comments

अहा! मुझे पता था कि कहीं एक चतुर jQuery फ़ंक्शन होगा। केवल समाधान के साथ समस्या जैसा कि आपने लिखा है कि प्रत्येक पाठ नोड को अगला पाठ मिलता है (जैसे कि बाल तत्वों के भीतर वाले)। मुझे लगता है कि हालांकि इसे सीमित करना बहुत मुश्किल नहीं होगा?

— पॉल डी। वेट

मुझे इस्तेमाल करने में थोड़ी परेशानी हुई .filter(':first'), लेकिन .first()इसके बजाय मेरे लिए काम करना मुश्किल हो गया। धन्यवाद!

— hollaburoo

यह मेरे साथ काम नहीं करता है .text()( यह jsfiddle देखें ) लेकिन यहां.replaceWith() ( jsfiddle के साथ) करता है ।

— मैजिकेक्स

मेरे लिए यह काम करता है, बदसूरत के रूप में यह textObject = $ (myNode) .contents () (फ़िल्टर) (फ़ंक्शन ({{this.nodeType == 3;}) लौटें] [0] $ (textObject) .replaceWith ("मेरा पाठ") );

— Maragues

किसी को भी nodeType=3इसके बारे में उत्सुकता से मतलब है कि केवल फिल्टर प्रकार "TEXT", w3schools.com/jsref/prop_node_nodetype.asp अधिक जानकारी के लिए

— ktutnik

Answer 3

कार्रवाई में देखें

मार्कअप:

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Some text
  <div>Child1</div>
  <div>Child2</div>
  <div>Child3</div>
  <div>Child4</div>
</div>
<input type="button" value="alter text" />

Comments

अब तक सबसे अच्छा समाधान मैं भर में आया हूँ। सुरुचिपूर्ण और सरल।

— योव कदोष

हालाँकि, यह नोड्स के आदेश को संरक्षित नहीं करेगा। उदाहरण के लिए, यदि पाठ पहले तत्व के अंत में था, तो अब यह शुरुआत में होगा।

— मैट

यह आदेश को संरक्षित नहीं करेगा लेकिन ज्यादातर मामलों में आप पाठ को पहले या अंतिम नोड के रूप में चाहते हैं। इसलिए यदि एपेंड () वांछित परिणाम प्राप्त नहीं करता है, तो प्रीपेंड () का प्रयास करें यदि आप पाठ के मौजूदा बच्चों को संक्रमित करना चाहते हैं।

— Sensei

अब तक का सबसे छोटा और सरल उपाय - stackoverflow.com/a/54365288/4769218

— सिल्वर रिंगवे

Answer 4

<div id="divtochange">
    **text to change**
    <div>text that should not change</div>
    <div>text that should not change</div>
</div>

$(document).ready(function() {
    $("#divtochange").contents().filter(function() {
            return this.nodeType == 3;
        })
        .replaceWith("changed text");
});

यह केवल पहला टेक्स्टनोड बदलता है

Answer 5

बस उस पाठ को लपेटें जिसे आप एक वर्ग में चयन करने के लिए एक अवधि में बदलना चाहते हैं।

जरूरी नहीं कि मैं आपके प्रश्न का उत्तर दूं, लेकिन, शायद एक बेहतर कोडिंग अभ्यास है। चीजों को साफ और सरल रखें

<div id="header">
   <span class="my-text">**text to change**</span>
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

देखा!

$('#header .mytext').text('New text here')

Comments

यह सबसे अच्छा उपाय है!

— चिकना गीक

Answer 6

आपके द्वारा उल्लिखित विशिष्ट मामले के लिए:

<div id="foo">
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

... यह बहुत आसान है:

var div = document.getElementById("foo");
div.firstChild.data = "New text";

आप यह नहीं बताते कि आप इसे कैसे सामान्य बनाना चाहते हैं। यदि, आप कहते हैं, आप पहले पाठ नोड के पाठ को बदलना चाहते हैं, तो आप <div>कुछ ऐसा कर सकते हैं:

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}

Answer 7

$.fn.textPreserveChildren = function(text) {
  return this.each(function() {
    return $(this).contents().filter(function() {
      return this.nodeType == 3;
    }).first().replaceWith(text);
  })
}

setTimeout(function() {
  $('.target').textPreserveChildren('Modified');
}, 2000);

.blue {
  background: #77f;
}
.green {
  background: #7f7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="target blue">Outer text
  <div>Nested element</div>
</div>

<div class="target green">Another outer text
  <div>Another nested element</div>
</div>

Answer 8

यहाँ अभी तक एक अन्य विधि है: http://jsfiddle.net/qYUBp/7/

एचटीएमएल

<div id="header">
   **text to change**
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

jQuery

var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);

Answer 9

यहाँ बहुत सारे उत्तर हैं, लेकिन वे केवल बच्चों के साथ एक पाठ नोड को संभालते हैं। मेरे मामले में मुझे सभी पाठ नोड्स पर काम करने और HTML बच्चों को अनदेखा करने की आवश्यकता थी, लेकिन आदेशों को पूरा करें।

तो अगर हमारे पास ऐसा कोई मामला है:

<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

हम केवल पाठ को संशोधित करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं और आदेश को पूरा कर सकते हैं

    $('#parent').contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
    }).each(function() {
    		//You can ignore the span class info I added for my particular application.
        $(this).replaceWith(this.nodeValue.replace(/(\w+)/g,"<span class='IIIclassIII$1' onclick='_mc(this)' onmouseover='_mr(this);' onmouseout='_mt(this);'>$1X</span>"));
	});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

यहाँ यह काम की jsfiddle है

Answer 10

मुझे लगता है कि आप .prependTo () की तलाश कर रहे हैं।

http://api.jquery.com/prependTo/

हम पृष्ठ पर एक तत्व भी चुन सकते हैं और इसे दूसरे में डाल सकते हैं:

$ ( 'H2') prependTo ($ ( 'कंटेनर।'))।

यदि इस तरह से चयनित किसी तत्व को अन्यत्र डाला जाता है, तो उसे लक्ष्य में बदल दिया जाएगा (क्लोन नहीं किया गया):

<div class="container">  
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div> 
</div>

यदि एक से अधिक लक्ष्य तत्व हैं, तो, पहले के बाद प्रत्येक लक्ष्य के लिए सम्मिलित तत्व की क्लोन प्रतियां बनाई जाएंगी।

Comments

मुझे नहीं लगता। ऐसा लगता है कि ओपी पाठ को बदलने का एक तरीका ढूंढ रहा है, न कि नया पाठ जोड़ने का।

— मैट बॉल

Answer 11

सरल उत्तर:

$("div").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

Answer 12

मार्क के जवाब के साथ समस्या यह है कि आपको खाली टेक्स्टनोड भी मिलते हैं। JQuery प्लगइन के रूप में समाधान:

$.fn.textnodes = function () {
    return this.contents().filter(function (i,n) {
        return n.nodeType == 3 && n.textContent.trim() !== "";
    });
};

$("div").textnodes()[0] = "changed text";

Answer 13

यह एक पुराना प्रश्न है लेकिन आप अपने जीवन को आसान बनाने के लिए इस तरह से एक सरल कार्य कर सकते हैं:

$.fn.toText = function(str) {
    var cache = this.children();
    this.text(str).append(cache);
}

उदाहरण:

<div id="my-div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

उपयोग:

$("#my-div").toText("helloworld");

Answer 14

2019 vesrsion - लघु और सरल

document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

व्याख्या

document.querySelector('#your-div-id') माता-पिता को चुनने के लिए उपयोग किया जाता है (वह तत्व जो आप बदलने के बारे में पाठ)

.childNodes[0] पाठ नोड का चयन करता है

.nodeValue = 'new text' "नया पाठ" के लिए टेक्स्ट नोड मान सेट करता है

---

यह उत्तर संभवतः डीन मार्टिन की टिप्पणी से प्रेरित है। अब मैं वर्षों से इस समाधान का उपयोग कर रहा हूं, यह पक्का नहीं कह सकता। बस मैंने सोचा कि मुझे इस संभावना को यहां पोस्ट करना चाहिए क्योंकि कुछ लोग इस तथ्य से अधिक इसकी परवाह करते हैं कि यह सबसे अच्छा समाधान है।

Comments

आपने सिर्फ 2014 से डीन मार्टिन की टिप्पणी की नकल की और इसे 2019 के समाधान के रूप में दावा किया। इसके अलावा jQuery और सादे जावास्क्रिप्ट के अनावश्यक संयोजन का उपयोग करें जो मेरी राय में अच्छी पठनीयता के लिए बुरा अभ्यास है। अंत में आपने कोई विवरण नहीं दिया कि आपका समाधान कैसे काम करता है। यह सबसे जटिल नहीं है, लेकिन न ही यह मुद्दा है इसलिए यह शायद बहुत नए प्रोग्रामर हैं जो इसे पढ़ते हैं जो उदाहरण के लिए कुछ अतिरिक्त स्पष्टीकरण का उपयोग कर सकते हैं कि आप सरणी सूचकांक तक पहुंचकर jQuery ऑब्जेक्ट से मूल डोम नोड प्राप्त करते हैं।

— मार्क बैजेंस

@MarkBaijens मुझे लगता है कि आप सही हो सकते हैं, डीन मार्टिन की टिप्पणी हो सकती है जहां मुझे यह स्निपेट सालों पहले मिला था। वैसे भी, मैं इसे तब से इस्तेमाल कर रहा हूं और बस इसे अपने निजी कोड रेपो (जहां मैं उपयोगी स्क्रिप्ट सूचीबद्ध करता हूं) से जनवरी में कॉपी किया था। एक अधिक विस्तृत विवरण जोड़ा और अनावश्यक jQuery को हटा दिया।

— रजत रिंगवे

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

— मिक्की

@ Miqi180 - जैसा कि मैंने पहले ही ऊपर कहा है, यह संभव है, मुझे याद नहीं है कि मुझे पहली बार यह समाधान कहां मिला था। मैं इसे वर्षों से अपने काम में इस्तेमाल कर रहा हूं। जवाब में एक नोट जोड़ा। उम्मीद है, यह आप जैसे लोगों की मदद करता है जो एसओ पर सबसे अच्छे समाधान की परवाह नहीं करते हैं:

— सिल्वर रिंगवे