jquery - now - text plus




باستخدام.text() لاسترداد النص فقط غير متداخل في العلامات التابعة (15)

إذا كان لدي أتش تي أم أل مثل هذا:

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

أحاول استخدام .text() لاسترداد السلسلة فقط "هذا هو بعض النص" ، ولكن إذا كان لي أن أقول $('#list-item').text() ، أحصل على "This is some textFirst span textSecond span text ".

هل هناك طريقة للحصول على (وربما إزالة ، عبر شيء مثل .text("") ) فقط النص الحر داخل علامة ، وليس النص داخل علامات الطفل؟

لم يتم كتابة HTML من قبل لي ، لذلك هذا هو ما يجب أن أعمل معه. وأنا أعلم أنه سيكون من السهل مجرد التفاف النص في العلامات عند كتابة أتش تي أم أل ، ولكن مرة أخرى ، يتم كتابة أتش تي أم أل مسبقا.


أعجبني هذا التنفيذ القابل لإعادة الاستخدام استنادًا إلى طريقة clone() الموجودة here للحصول على النص داخل العنصر الرئيسي فقط.

رمز المقدمة لسهولة الرجوع إليها:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

أفترض أن هذا سيكون حلاً جيدًا أيضًا - إذا كنت تريد الحصول على محتويات جميع العقد النصية التي تمثل أطفالًا مباشرين للعنصر المحدد.

$(selector).contents().filter(function(){ return this.nodeType == 3; }).text();

ملاحظة: يستخدم توثيق jQuery تعليمات برمجية مشابهة لشرح وظيفة المحتويات: https://api.jquery.com/contents/

PS هناك أيضا طريقة أكثر قبيحة للقيام بذلك ، ولكن هذا يظهر بشكل أكثر عمقا كيف تعمل الأشياء ، ويسمح للفاصل بين العقد المخصصة (ربما تريد كسر خط هناك)

$(selector).contents().filter(function(){ return this.nodeType == 3; }).map(function() { return this.nodeValue; }).toArray().join("");

أكثر سهولة وسرعة:

$("#listItem").contents().get(0).nodeValue

أنا لست خبيرة مسجِّلة ، لكن ماذا عن

$('#listItem').children().first().text()

استخدم شرطًا إضافيًا للتحقق مما إذا كان innerHTML و innerText هما نفس الشيء. فقط في تلك الحالات ، استبدل النص.

$(function() {
$('body *').each(function () {
    console.log($(this).html());
    console.log($(this).text());
    if($(this).text() === "Search" && $(this).html()===$(this).text())  {
        $(this).html("Find");
    }
})
})

http://jsfiddle.net/7RSGh/


تمامًا مثل السؤال ، كنت أحاول استخلاص النص من أجل إجراء بعض التعديلات على النص ، لكنني كنت أتلقى بعض المشاكل حيث كانت عناصر داخليتي (أي: <i> ، <div> ، <span> ، إلخ) إزالة.

يبدو أن التعليمة البرمجية التالية تعمل بشكل جيد وتحل جميع مشاكلي.

ويستخدم بعض الإجابات المقدمة هنا ولكن على وجه الخصوص ، لن يؤدي إلا إلى استبدال النص عندما يكون العنصر هو nodeType === 3 .

$(el).contents().each(function() { 
  console.log(" > Content: %s [%s]", this, (this.nodeType === 3));

  if (this.nodeType === 3) {
    var text = this.textContent;
    console.log(" > Old   : '%s'", text);

    regex = new RegExp("\\[\\[" + rule + "\\.val\\]\\]", "g");
    text = text.replace(regex, value);

    regex = new RegExp("\\[\\[" + rule + "\\.act\\]\\]", "g");
    text = text.replace(regex, actual);

    console.log(" > New   : '%s'", text);
    this.textContent = text;
  }
});

ما يحدث أعلاه هو حلقة عبر جميع عناصر el المعطى (الذي تم الحصول عليه ببساطة بـ $("div.my-class[name='some-name']"); عنصر داخلي ، فإنه يتجاهلها بشكل أساسي لكل جزء من النص (كما هو محدد في if (this.nodeType === 3) ) فإنه سيتم تطبيق استبدال regex فقط على هذه العناصر.

إن this.textContent = text ببساطة يحل محل النص المستبدل ، والذي في حالتي ، كنت أبحث عن رموز مثل [[min.val]] ، [[max.val]] ، إلخ.

سيساعد مقتطف الرمز القصير هذا أي شخص يحاول القيام بما يطرحه السؤال ... وأكثر قليلاً.


جرب هذا:

$('#listItem').not($('#listItem').children()).text()

ستحتاج إلى أن تكون شيئًا مخصَّصًا للاحتياجات ، والتي تعتمد على البنية التي قدمتها. على سبيل المثال الذي قدمته ، يعمل هذا:

$(document).ready(function(){
     var $tmp = $('#listItem').children().remove();
     $('#listItem').text('').append($tmp);
});

العرض التوضيحي: http://jquery.nodnod.net/cases/2385/run

ولكنه يعتمد إلى حد ما على العلامة التي تشبه ما نشرته.


فقط ضعه في <p> أو <font> واستخرج هذا $ ('# listItem font'). text ()

أول شيء خطر في بالي

<li id="listItem">
    <font>This is some text</font>
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

لتتمكن من تقليم النتيجة ، استخدم DotNetWala مثل:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text()
    .trim();

اكتشفت أن استخدام الإصدار الأقصر مثل document.getElementById("listItem").childNodes[0] لن يعمل document.getElementById("listItem").childNodes[0] مع تقليم jQuery ().


هذا سؤال قديم لكن الإجابة العليا غير فعالة. وإليك حلًا أفضل:

$.fn.myText = function() {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType == 3) {
            str += this.textContent || this.innerText || '';
        }
    });

    return str;
};

وفعل هذا:

$("#foo").myText();

هذا لم يتم اختباره ، ولكن أعتقد أنك قد تتمكن من تجربة شيء مثل هذا:

 $('#listItem').not('span').text();

http://api.jquery.com/not/


هذه طريقة جيدة بالنسبة لي

   var text  =  $('#listItem').clone().children().remove().end().text();

يمكنك أن تجرب هذا

alert(document.getElementById('listItem').firstChild.data)

jQuery.fn.ownText = function () {
    return $(this).contents().filter(function () {
        return this.nodeType === Node.TEXT_NODE;
    }).text();
};




tags