Menggunakan .text () untuk mengambil hanya teks yang tidak bersarang di tag anak

Jika saya punya html seperti ini:

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

Saya mencoba menggunakan .text()untuk mengambil hanya string "Ini adalah beberapa teks", tetapi jika saya mengatakan $('#list-item').text(), saya mendapatkan "Ini adalah beberapa textFirst span textSecond span text".

Apakah ada cara untuk mendapatkan (dan mungkin menghapus, melalui sesuatu seperti .text("")) hanya teks gratis di dalam tag, dan bukan teks di dalam tag turunannya?

HTML tidak ditulis oleh saya, jadi ini yang harus saya kerjakan. Saya tahu itu akan mudah untuk hanya membungkus teks dalam tag saat menulis html, tetapi sekali lagi, html adalah pra-ditulis.

Saya menyukai implementasi yang dapat digunakan kembali ini berdasarkan clone()metode yang ditemukan di sini untuk mendapatkan hanya teks di dalam elemen induk.

Kode disediakan untuk referensi mudah:

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

Jawaban sederhana:

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

Ini sepertinya kasus jquery yang terlalu sering saya gunakan. Berikut ini akan mengambil teks mengabaikan node lain:

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

Anda harus memotongnya tetapi itu memberi Anda apa yang Anda inginkan dalam satu garis yang mudah.

EDIT

Di atas akan mendapatkan simpul teks . Untuk mendapatkan teks yang sebenarnya, gunakan ini:

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

Lebih mudah dan lebih cepat:

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

Mirip dengan jawaban yang diterima, tetapi tanpa kloning:

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

Dan ini adalah plugin jQuery untuk tujuan ini:

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

Berikut ini cara menggunakan plugin ini:

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

bukan kode:

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

hanya menjadi jQuery demi jQuery? Ketika operasi sederhana melibatkan banyak perintah dirantai & pemrosesan sebanyak itu (yang tidak perlu), mungkin sekarang saatnya untuk menulis ekstensi 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));

memanggil:

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

argumen dalam kasus skenario yang berbeda ditemui, seperti

<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>");

teks akan memiliki nilai:

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

Coba ini:

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

Ini harus berupa sesuatu yang disesuaikan dengan kebutuhan, yang tergantung pada struktur yang Anda sajikan. Untuk contoh yang Anda berikan, ini berfungsi:

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

Demo: http://jquery.nodnod.net/cases/2385/run

Tapi itu cukup tergantung pada markup yang mirip dengan apa yang Anda posting.

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

Varian pendek dari jawaban Stuart.

atau dengan get()

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

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

Ini adalah pertanyaan lama tetapi jawaban teratas sangat tidak efisien. Inilah solusi yang lebih baik:

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

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

    return str;
};

Dan lakukan ini:

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

Saya kira ini akan menjadi solusi yang bagus juga - jika Anda ingin mendapatkan konten dari semua node teks yang merupakan anak-anak langsung dari elemen yang dipilih.

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

Catatan: Dokumentasi jQuery menggunakan kode serupa untuk menjelaskan fungsi konten: https://api.jquery.com/contents/

PS Ada juga cara yang sedikit lebih buruk untuk melakukan itu, tetapi ini menunjukkan lebih mendalam bagaimana hal-hal bekerja, dan memungkinkan untuk pemisah kustom antara node teks (mungkin Anda ingin jeda baris di sana)

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

Saya mengusulkan untuk menggunakan createTreeWalker untuk menemukan semua elemen teks yang tidak dilampirkan ke elemen html (fungsi ini dapat digunakan untuk memperluas 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>

Jika posisi indexnode teks diperbaiki di antara saudara kandungnya, Anda dapat menggunakan

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

Tidak yakin seberapa fleksibel atau berapa banyak kasus yang Anda butuhkan untuk dicakup, tetapi sebagai contoh, jika teks selalu muncul sebelum tag HTML pertama - mengapa tidak hanya membagi html bagian dalam pada tag pertama dan mengambil yang pertama:

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

dan jika Anda membutuhkannya lebih luas mungkin saja

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

dan jika Anda memerlukan teks di antara dua penanda, seperti setelah satu hal tetapi sebelum yang lain, Anda dapat melakukan sesuatu seperti (belum diuji) dan menggunakan pernyataan jika membuatnya cukup fleksibel untuk memiliki penanda awal atau akhir atau keduanya, sambil menghindari kesalahan ref nol :

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...

Saya biasanya membuat fungsi utilitas untuk hal-hal berguna seperti ini, menjadikannya bebas kesalahan, dan kemudian mengandalkannya sesekali solid, daripada selalu menulis ulang jenis manipulasi string dan mempertaruhkan referensi nol dll. Dengan begitu, Anda dapat menggunakan kembali fungsi tersebut dalam banyak proyek dan tidak perlu membuang waktu lagi untuk debugging mengapa referensi string memiliki kesalahan referensi yang tidak ditentukan. Mungkin bukan kode baris 1 terpendek, tetapi setelah Anda memiliki fungsi utilitas, itu adalah satu baris sejak saat itu. Perhatikan sebagian besar kode hanya menangani parameter yang ada atau tidak untuk menghindari kesalahan :)

Sebagai contoh:

/**
* 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)

Ini cara yang baik untuk saya

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

Saya datang dengan solusi spesifik yang harus jauh lebih efisien daripada kloning dan memodifikasi klon. Solusi ini hanya berfungsi dengan dua reservasi berikut, tetapi harus lebih efisien daripada solusi yang saat ini diterima:

1. Anda hanya mendapatkan teks
2. Teks yang ingin Anda ekstrak adalah sebelum elemen anak

Dengan itu, inilah kodenya:

// '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);
}

Sama seperti pertanyaan, saya mencoba untuk ekstrak teks untuk melakukan beberapa regex substitusi teks tetapi mendapatkan masalah di mana unsur-unsur batin saya (yaitu: <i>, <div>, <span>, dll) yang mendapatkan juga dihapus.

Kode berikut tampaknya berfungsi dengan baik dan menyelesaikan semua masalah saya.

Ini menggunakan beberapa jawaban yang disediakan di sini tetapi khususnya, hanya akan menggantikan teks ketika elemen dari 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;
  }
});

Apa yang dilakukan di atas adalah loop melalui semua elemen yang diberikan el(yang hanya diperoleh dengan $("div.my-class[name='some-name']");. Untuk setiap elemen dalam, itu pada dasarnya mengabaikan mereka. Untuk setiap bagian teks (sebagaimana ditentukan oleh if (this.nodeType === 3)) itu akan menerapkan penggantian regex hanya untuk elemen-elemen tersebut. .

The this.textContent = textporsi hanya menggantikan teks tersubstitusi, yang dalam kasus saya, saya sedang mencari token seperti [[min.val]], [[max.val]], dll

Kutipan kode pendek ini akan membantu siapa saja yang mencoba melakukan apa yang ditanyakan oleh pertanyaan ... dan sedikit lagi.

cukup letakkan di <p>atau <font>dan ambil $ ('# font fontItem'). teks ()

Hal pertama yang terlintas di benak saya

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

Anda bisa mencoba ini

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

Gunakan kondisi ekstra untuk memeriksa apakah innerHTML dan innerText sama. Hanya dalam kasus tersebut, ganti teks.

$(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/

Agar dapat memangkas hasilnya, gunakan DotNetWala seperti:

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

Saya menemukan bahwa menggunakan versi yang lebih pendek seperti document.getElementById("listItem").childNodes[0]tidak akan berfungsi dengan trim jQuery ().

Saya bukan ahli jquery, tapi bagaimana,

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

Ini belum teruji, tetapi saya pikir Anda mungkin dapat mencoba sesuatu seperti ini:

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

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