ใช้. text () เพื่อดึงข้อมูลเฉพาะข้อความที่ไม่ซ้อนในแท็กย่อย

หากฉันมี html เช่นนี้:

<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()ฉันจะได้รับ

มีวิธีรับ (และอาจลบผ่านสิ่งที่ชอบ.text("")) เพียงแค่ข้อความว่างภายในแท็กไม่ใช่ข้อความภายในแท็กลูก?

ฉันไม่ได้เขียน HTML ดังนั้นนี่คือสิ่งที่ฉันต้องทำงานด้วย ฉันรู้ว่ามันจะง่ายเพียงแค่ตัดข้อความในแท็กเมื่อเขียน html แต่อีกครั้ง html นั้นถูกเขียนไว้ล่วงหน้า

ฉันชอบการใช้งานซ้ำนี้ตามclone()วิธีการที่พบที่นี่เพื่อรับข้อความภายในองค์ประกอบหลัก

รหัสที่ให้ไว้สำหรับการอ้างอิงง่าย:

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

คำตอบง่ายๆ:

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

ดูเหมือนว่าเป็นกรณีของ jQuery ที่มากเกินไปสำหรับฉัน ต่อไปนี้จะคว้าข้อความโดยไม่สนใจโหนดอื่น ๆ :

document.getElementById("listItem").childNodes[0];

คุณจะต้องตัดแต่ง แต่มันทำให้คุณได้สิ่งที่คุณต้องการในบรรทัดเดียวที่ง่าย

แก้ไข

ดังกล่าวข้างต้นจะได้รับโหนดข้อความ ในการรับข้อความจริงให้ใช้สิ่งนี้:

document.getElementById("listItem").childNodes[0].nodeValue;

ง่ายและเร็วกว่า:

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

คล้ายกับคำตอบที่ยอมรับ แต่ไม่มีการโคลน:

$("#foo").contents().not($("#foo").children()).text();

และนี่คือปลั๊กอิน jQuery สำหรับจุดประสงค์นี้:

$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};

นี่คือวิธีการใช้ปลั๊กอินนี้:

$("#foo").immediateText(); // get the text without children

ไม่ใช่รหัส:

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

เพิ่งกลายเป็น jQuery เพื่อประโยชน์ของ jQuery? เมื่อการดำเนินการอย่างง่ายเกี่ยวข้องกับคำสั่งที่ถูกผูกมัด & การประมวลผลที่ไม่จำเป็นจำนวนมากอาจถึงเวลาที่จะเขียนส่วนขยาย jQuery:

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) { 
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

โทร:

var text = $('#listItem').textNotChild();

ข้อโต้แย้งในกรณีที่พบสถานการณ์ที่แตกต่างเช่น

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

ข้อความจะมีค่า:

some text<break>again more.....second text<break>again more

ลองสิ่งนี้:

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

มันจะต้องเป็นสิ่งที่ปรับให้เหมาะกับความต้องการซึ่งขึ้นอยู่กับโครงสร้างที่คุณนำเสนอด้วย สำหรับตัวอย่างที่คุณให้มาการทำงานนี้:

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

ตัวอย่าง: http://jquery.nodnod.net/cases/2385/run

แต่มันค่อนข้างขึ้นอยู่กับมาร์กอัปที่คล้ายกับสิ่งที่คุณโพสต์

$($('#listItem').contents()[0]).text()

ตัวแปรสั้น ๆ ของStuart ตอบ

หรือกับ get()

$($('#listItem').contents().get(0)).text()

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

นี่เป็นคำถามเก่า แต่คำตอบยอดนิยมไม่มีประสิทธิภาพมาก นี่คือทางออกที่ดีกว่า:

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

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

    return str;
};

และทำสิ่งนี้:

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

ฉันคิดว่านี่จะเป็นโซลูชันที่ดีเช่นกัน - ถ้าคุณต้องการรับเนื้อหาของโหนดข้อความทั้งหมดที่เป็นลูกโดยตรงขององค์ประกอบที่เลือก

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

หมายเหตุ: เอกสาร jQuery ใช้รหัสที่คล้ายกันเพื่ออธิบายฟังก์ชั่นเนื้อหา: https://api.jquery.com/contents/

ป.ล. ยังมีวิธีที่น่าเกลียดเล็กน้อยในการทำเช่นนี้ แต่สิ่งนี้แสดงให้เห็นในเชิงลึกเกี่ยวกับการทำงานของสิ่งต่าง ๆ และอนุญาตให้ใช้ตัวคั่นแบบกำหนดเองระหว่างโหนดข้อความ (บางทีคุณอาจต้องการให้ตัวแบ่งบรรทัดมี)

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

ฉันเสนอให้ใช้createTreeWalkerเพื่อค้นหาองค์ประกอบข้อความทั้งหมดที่ไม่ได้แนบกับองค์ประกอบ html (ฟังก์ชั่นนี้สามารถใช้เพื่อขยาย jQuery):

function textNodesOnlyUnder(el) {
  var resultSet = [];
  var n = null;
  var treeWalker  = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, function (node) {
    if (node.parentNode.id == el.id && node.textContent.trim().length != 0) {
      return NodeFilter.FILTER_ACCEPT;
    }
    return NodeFilter.FILTER_SKIP;
  }, false);
  while (n = treeWalker.nextNode()) {
    resultSet.push(n);
  }
  return resultSet;
}



window.onload = function() {
  var ele = document.getElementById('listItem');
  var textNodesOnly = textNodesOnlyUnder(ele);
  var resultingText = textNodesOnly.map(function(val, index, arr) {
    return 'Text element N. ' + index + ' --> ' + val.textContent.trim();
  }).join('\n');
  document.getElementById('txtArea').value = resultingText;
}

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>
<textarea id="txtArea" style="width: 400px;height: 200px;"></textarea>

หากตำแหน่งindexของโหนดข้อความได้รับการแก้ไขในหมู่พี่น้องของมันคุณสามารถใช้

$('parentselector').contents().eq(index).text()

ไม่แน่ใจว่ามีความยืดหยุ่นหรือจำนวนกรณีที่คุณต้องการให้ครอบคลุม แต่สำหรับตัวอย่างของคุณหากข้อความมาก่อนแท็ก HTML แรก - ทำไมไม่แยก HTML ด้านในออกจากแท็กแรก

$('#listItem').html().split('<span')[0]; 

และถ้าคุณต้องการมันอาจจะกว้างขึ้น

$('#listItem').html().split('<')[0]; 

และถ้าคุณต้องการข้อความระหว่างสองเครื่องหมายเช่นหลังจากสิ่งหนึ่ง แต่ก่อนอื่นคุณสามารถทำสิ่งที่ต้องการ (ยังไม่ทดลอง) และใช้ถ้าคำสั่งเพื่อให้มีความยืดหยุ่นเพียงพอที่จะมีเครื่องหมายเริ่มต้นหรือจุดสิ้นสุดหรือทั้งสองอย่าง :

var startMarker = '';// put any starting marker here
var endMarker = '<';// put the end marker here
var myText = String( $('#listItem').html() );
// if the start marker is found, take the string after it
myText = myText.split(startMarker)[1];        
// if the end marker is found, take the string before it
myText = myText.split(endMarker)[0];
console.log(myText); // output text between the first occurrence of the markers, assuming both markers exist.  If they don't this will throw an error, so some if statements to check params is probably in order...

ฉันมักจะทำฟังก์ชั่นยูทิลิตี้สำหรับสิ่งที่มีประโยชน์เช่นนี้ทำให้ปราศจากข้อผิดพลาดจากนั้นพึ่งพาพวกเขาบ่อยครั้งหนึ่งที่เป็นของแข็งแทนที่จะเขียนใหม่ของการจัดการสตริงประเภทนี้และเสี่ยงต่อการอ้างอิงเป็นโมฆะเป็นต้นด้วยวิธีนี้ ในโครงการจำนวนมากและไม่ต้องเสียเวลาในการดีบักอีกครั้งเพราะเหตุใดการอ้างอิงสตริงจึงมีข้อผิดพลาดอ้างอิงที่ไม่ได้กำหนด อาจไม่ได้เป็นรหัส 1 บรรทัดที่สั้นที่สุด แต่หลังจากคุณมีฟังก์ชั่นยูทิลิตี้มันเป็นหนึ่งบรรทัดจากนั้น หมายเหตุรหัสส่วนใหญ่เป็นเพียงการจัดการพารามิเตอร์ที่อยู่ที่นั่นหรือไม่เพื่อหลีกเลี่ยงข้อผิดพลาด :)

ตัวอย่างเช่น:

/**
* Get the text between two string markers.
**/
function textBetween(__string,__startMark,__endMark){
    var hasText = typeof __string !== 'undefined' && __string.length > 0;
    if(!hasText) return __string;
    var myText = String( __string );
    var hasStartMarker = typeof __startMark !== 'undefined' && __startMark.length > 0 && __string.indexOf(__startMark)>=0;
    var hasEndMarker =  typeof __endMark !== 'undefined' && __endMark.length > 0 && __string.indexOf(__endMark) > 0;
    if( hasStartMarker )  myText = myText.split(__startMark)[1];
    if( hasEndMarker )    myText = myText.split(__endMark)[0];
    return myText;
}

// now with 1 line from now on, and no jquery needed really, but to use your example:
var textWithNoHTML = textBetween( $('#listItem').html(), '', '<'); // should return text before first child HTML tag if the text is on page (use document ready etc)

นี่เป็นวิธีที่ดีสำหรับฉัน

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

ฉันมากับโซลูชันเฉพาะที่ควรมีประสิทธิภาพมากกว่าการโคลนและการดัดแปลงโคลน โซลูชันนี้ใช้ได้กับการจองสองรายการต่อไปนี้เท่านั้น แต่ควรมีประสิทธิภาพมากกว่าโซลูชันที่ยอมรับในปัจจุบัน:

1. คุณได้รับข้อความเท่านั้น
2. ข้อความที่คุณต้องการแยกคือก่อนองค์ประกอบย่อย

ด้วยที่กล่าวว่านี่คือรหัส:

// 'element' is a jQuery element
function getText(element) {
  var text = element.text();
  var childLength = element.children().text().length;
  return text.slice(0, text.length - childLength);
}

เช่นเดียวกับคำถามที่ผมพยายามที่จะสกัดจากข้อความในการสั่งซื้อที่จะทำบางเปลี่ยนตัว regex ของข้อความ แต่ได้รับปัญหาที่องค์ประกอบภายในของฉัน (เช่น: <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]]ฯลฯ

ข้อความที่ตัดตอนมาสั้น ๆ นี้จะช่วยให้ทุกคนพยายามทำสิ่งที่คำถามกำลังถาม ... และอีกมาก

เพียงแค่ใส่มันลงในและ<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>

คุณสามารถลองสิ่งนี้

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

ใช้เงื่อนไขเพิ่มเติมเพื่อตรวจสอบว่า 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/

หากต้องการตัดผลลัพธ์ให้ใช้ 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]นั้นจะไม่ทำงานกับการตัดของ jQuery ()

ฉันไม่ใช่ผู้เชี่ยวชาญ jquery แต่เกี่ยวกับ

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

นี่ยังไม่ทดลอง แต่ฉันคิดว่าคุณอาจลองแบบนี้ได้:

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

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