Hướng dẫn how do i get just the text from html in jquery? - làm cách nào để chỉ lấy văn bản từ html trong jquery?

Tôi thích triển khai có thể tái sử dụng này dựa trên phương thức

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

0 được tìm thấy ở đây để chỉ nhận văn bản bên trong phần tử cha.

Mã được cung cấp để tham khảo dễ dàng:

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

Đã trả lời ngày 13 tháng 1 năm 2012 lúc 13:45Jan 13, 2012 at 13:45

DotnetwaladotnetwalaDotNetWala

6,5041 Huy hiệu vàng17 Huy hiệu bạc10 Huy hiệu đồng1 gold badge17 silver badges10 bronze badges

20

Câu trả lời đơn giản:

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

Mrchief

74K19 Huy hiệu vàng139 Huy hiệu bạc187 Huy hiệu đồng19 gold badges139 silver badges187 bronze badges

Đã trả lời ngày 7 tháng 2 năm 2013 lúc 15:53Feb 7, 2013 at 15:53

macio.Junmacio.Junmacio.Jun

9.4371 Huy hiệu vàng44 Huy hiệu bạc41 Huy hiệu đồng1 gold badge44 silver badges41 bronze badges

14

Đây có vẻ như là một trường hợp lạm dụng JQuery đối với tôi. Sau đây sẽ lấy văn bản bỏ qua các nút khác:

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

Bạn sẽ cần phải cắt điều đó nhưng nó có được những gì bạn muốn trong một dòng dễ dàng.

CHỈNH SỬA

Trên đây sẽ nhận được nút văn bản. Để có được văn bản thực tế, hãy sử dụng điều này:

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

TLS

3.0602 Huy hiệu vàng26 Huy hiệu bạc32 Huy hiệu Đồng2 gold badges26 silver badges32 bronze badges

Đã trả lời ngày 9 tháng 8 năm 2010 lúc 17:58Aug 9, 2010 at 17:58

rg88rg88rg88

20,5K18 Huy hiệu vàng74 Huy hiệu bạc109 Huy hiệu đồng18 gold badges74 silver badges109 bronze badges

15

Dễ dàng và nhanh chóng hơn:

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

Đã trả lời ngày 1 tháng 3 năm 2014 lúc 17:30Mar 1, 2014 at 17:30

5

Tương tự như câu trả lời được chấp nhận, nhưng không có nhân bản:

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

Và đây là một plugin jQuery cho mục đích này:

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

Đây là cách sử dụng plugin này:

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

Đã trả lời ngày 23 tháng 8 năm 2015 lúc 18:28Aug 23, 2015 at 18:28

DuzunduzunDUzun

1.64417 Huy hiệu bạc15 Huy hiệu đồng17 silver badges15 bronze badges

6

không phải là mã:

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

Chỉ trở thành JQuery cho JQuery's Sake? Khi các hoạt động đơn giản liên quan đến việc nhiều lệnh xích và xử lý nhiều (không cần thiết) đó, có lẽ đã đến lúc viết một phần mở rộng 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));

để gọi:

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

0

Các đối số trong trường hợp gặp phải một kịch bản khác, chẳng hạn như

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

1

Văn bản sẽ có giá trị:

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

2

Đã trả lời ngày 29 tháng 8 năm 2012 lúc 22:47Aug 29, 2012 at 22:47

BrentbrentBrent

4.3394 Huy hiệu vàng34 Huy hiệu bạc48 Huy hiệu đồng4 gold badges34 silver badges48 bronze badges

1

Thử cái này:

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

3

Đã trả lời ngày 5 tháng 1 năm 2015 lúc 13:02Jan 5, 2015 at 13:02

PBJKPBJKpbjk

Huy hiệu Bạc 9711 silver badge1 bronze badge

1

Nó sẽ cần phải là một thứ gì đó phù hợp với nhu cầu, phụ thuộc vào cấu trúc mà bạn đã trình bày. Đối với ví dụ bạn đã cung cấp, điều này hoạt động:

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

4

Bản demo: http://jquery.nodnod.net/case/2385/run

Nhưng nó khá phụ thuộc vào đánh dấu tương tự như những gì bạn đã đăng.

Đã trả lời ngày 9 tháng 8 năm 2010 lúc 17:18Aug 9, 2010 at 17:18

2

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

5

Biến thể ngắn của câu trả lời Stuart.

hoặc với

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

1

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

6

Đã trả lời ngày 31 tháng 8 năm 2015 lúc 22:02Aug 31, 2015 at 22:02

galeksandrpgaleksandrpgaleksandrp

6976 Huy hiệu bạc17 Huy hiệu đồng6 silver badges17 bronze badges

Tôi cho rằng đây cũng sẽ là một giải pháp tốt - nếu bạn muốn có được nội dung của tất cả các nút văn bản là trẻ em trực tiếp của yếu tố được chọn.

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

7

Lưu ý: Tài liệu JQuery sử dụng mã tương tự để giải thích hàm nội dung: https://api.jquery.com/contents/

P.S. Cũng có một cách xấu hơn một chút để làm điều đó, nhưng điều này cho thấy sâu hơn về cách mọi thứ hoạt động và cho phép phân tách tùy chỉnh giữa các nút văn bản (có thể bạn muốn một dòng phá vỡ ở đó)

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

8

Đã trả lời ngày 2 tháng 8 năm 2016 lúc 16:29Aug 2, 2016 at 16:29

mvmnmvmnmvmn

3.25324 Huy hiệu bạc29 Huy hiệu đồng24 silver badges29 bronze badges

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

9

Đã trả lời ngày 16 tháng 8 năm 2017 lúc 8:12Aug 16, 2017 at 8:12

1

Nếu vị trí

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

2 của nút văn bản được cố định giữa anh chị em của nó, bạn có thể sử dụng

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

0

Đã trả lời ngày 17 tháng 1 năm 2019 lúc 2:56Jan 17, 2019 at 2:56

Inariloinariloinarilo

7841 Huy hiệu vàng8 Huy hiệu bạc14 Huy hiệu đồng1 gold badge8 silver badges14 bronze badges

Đây là một câu hỏi cũ nhưng câu trả lời hàng đầu là rất không hiệu quả. Đây là một giải pháp tốt hơn:

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

1

Và chỉ làm điều này:

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

2

Đã trả lời ngày 22 tháng 7 năm 2015 lúc 21:07Jul 22, 2015 at 21:07

HowardHowardHoward

3.55913 Huy hiệu vàng54 Huy hiệu bạc84 Huy hiệu đồng13 gold badges54 silver badges84 bronze badges

0

Tôi đề xuất sử dụng createdetreewalker để tìm tất cả các thành phần văn bản không được gắn vào các phần tử HTML (chức năng này có thể được sử dụng để mở rộng jQuery):

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

3

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

4

Đã trả lời ngày 17 tháng 3 năm 2016 lúc 13:34Mar 17, 2016 at 13:34

GaetanomgaetanomgaetanoM

41.1k6 Huy hiệu vàng39 Huy hiệu bạc56 Huy hiệu Đồng6 gold badges39 silver badges56 bronze badges

Sử dụng JavaScript đơn giản trong cú pháp tương thích IE 9+ chỉ trong một vài dòng:

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

5

Đã trả lời ngày 17 tháng 9 năm 2020 lúc 12:42Sep 17, 2020 at 12:42

3

Đây là một cách tốt cho tôi

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

6

Đã trả lời ngày 10 tháng 2 năm 2012 lúc 7:03Feb 10, 2012 at 7:03

1

Tôi đã đưa ra một giải pháp cụ thể nên hiệu quả hơn nhiều so với việc nhân bản và sửa đổi bản sao. Giải pháp này chỉ hoạt động với hai đặt phòng sau đây, nhưng sẽ hiệu quả hơn so với giải pháp hiện được chấp nhận hiện đang được chấp nhận:

1. Bạn chỉ nhận được văn bản
2. Văn bản bạn muốn trích xuất là trước các yếu tố trẻ em

Như đã nói, đây là mã:

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

7

Đã trả lời ngày 16 tháng 7 năm 2014 lúc 0:19Jul 16, 2014 at 0:19

Giống như câu hỏi, tôi đã cố gắng trích xuất văn bản để thực hiện một số thay thế regex của văn bản nhưng gặp vấn đề trong đó các yếu tố bên trong của tôi (tức là:

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

3,

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

4,

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

5, v.v.) cũng bị xóa.

Mã sau đây dường như hoạt động tốt và giải quyết tất cả các vấn đề của tôi.

Nó sử dụng một số câu trả lời được cung cấp ở đây nhưng đặc biệt, sẽ chỉ thay thế văn bản khi phần tử là

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

6.

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

8

Những điều trên làm là lặp qua tất cả các yếu tố của

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

7 đã cho (chỉ đơn giản là thu được với

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

8. Đối với mỗi phần tử bên trong, về cơ bản nó bỏ qua chúng. Đối với mỗi phần của văn bản (như được xác định bởi

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

9) cho những yếu tố đó.

Phần

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

0 chỉ đơn giản thay thế văn bản thay thế, trong trường hợp của tôi, tôi đang tìm kiếm các mã thông báo như

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

1,

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

2, v.v.

Đoạn trích mã ngắn này sẽ giúp bất cứ ai cố gắng làm những gì câu hỏi đã hỏi ... và hơn một chút.

Đã trả lời ngày 27 tháng 3 năm 2018 lúc 4:33Mar 27, 2018 at 4:33

JeachjeachJeach

8.3187 Huy hiệu vàng46 Huy hiệu bạc58 Huy hiệu Đồng7 gold badges46 silver badges58 bronze badges

Không chắc chắn mức độ linh hoạt hoặc có bao nhiêu trường hợp bạn cần bao gồm, nhưng ví dụ của bạn, nếu văn bản luôn xuất hiện trước các thẻ HTML đầu tiên - tại sao không chia HTML bên trong ở thẻ đầu tiên và lấy cái trước:

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

9

Và nếu bạn cần nó rộng hơn có lẽ chỉ

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

0

Và nếu bạn cần văn bản giữa hai điểm đánh dấu, như sau một điều nhưng trước một điều khác, bạn có thể làm một cái gì đó như (chưa được kiểm tra) và sử dụng nếu các câu lệnh để làm cho nó đủ linh hoạt để có điểm đánh dấu bắt đầu hoặc kết thúc :

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

1

Tôi thường tạo các chức năng tiện ích cho những thứ hữu ích như thế này, làm cho chúng không có lỗi, sau đó thường xuyên dựa vào chúng một lần một lần, thay vì luôn viết lại loại thao tác chuỗi này và có nguy cơ tham khảo null, v.v. Trong nhiều dự án và không bao giờ phải lãng phí thời gian vào việc gỡ lỗi một lần nữa tại sao tham chiếu chuỗi có lỗi tham chiếu không xác định. Có thể không phải là mã dòng ngắn nhất từ ​​trước đến nay, nhưng sau khi bạn có chức năng tiện ích, nó là một dòng từ đó trở đi. Lưu ý hầu hết các mã chỉ là xử lý các tham số ở đó hoặc không để tránh lỗi :)

Ví dụ:

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

2

Đã trả lời ngày 19 tháng 5 năm 2020 lúc 0:48May 19, 2020 at 0:48

OG Seanog SeanOG Sean

8257 Huy hiệu bạc18 Huy hiệu đồng7 silver badges18 bronze badges

1

Bản thử trực tiếp

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

3

Đã trả lời ngày 12 tháng 5 năm 2021 lúc 16:48May 12, 2021 at 16:48

Cho những người mới bắt đầu:

Tôi thích câu trả lời của @Duzun vì nó đơn giản để hiểu và hiệu quả hơn so với câu trả lời được chấp nhận. Nhưng nó chỉ làm việc một phần cho tôi vì bạn không thể trực tiếp vượt qua phần tử với bộ chọn lớp như thế này

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

4

hoặc cái này

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

5

Bởi vì một khi bạn trích xuất phần tử gốc bằng cách sử dụng [index] hoặc .get (index) ra khỏi hàm $ (), bạn mất chuỗi các phương thức đối tượng jQuery như đã đề cập ở đây. Và hầu hết các giải pháp chỉ trong ngữ cảnh đến ID, không quá thanh lịch để sử dụng nhiều lần cho các yếu tố với bộ chọn lớp.

Vì vậy, tôi đã viết plugin jQuery:

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

6

Điều này sẽ trả về văn bản của phần tử không phân biệt ID hoặc lớp được sử dụng làm bộ chọn loại trừ các phần tử con. Cũng sẽ loại bỏ bất kỳ

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

3 để có được một chuỗi sạch. Sử dụng nó như thế này:

Trường hợp 1

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

7

Trường hợp 2

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

8

Trường hợp 3

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

9

Đã trả lời ngày 7 tháng 2 lúc 9:57Feb 7 at 9:57

Tôi sẽ không bận tâm với JQuery cho việc này, đặc biệt là các giải pháp tạo ra các bản sao không cần thiết của các yếu tố. Một nút đơn giản lấy các nút văn bản là tất cả những gì bạn cần. Trong JavaScript hiện đại (như bài viết này & nbsp; - "hiện đại" là một mục tiêu di chuyển!) Và cắt tỉa khoảng trắng từ đầu và cuối của kết quả:

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

0

Ví dụ trực tiếp:

Một số người sẽ sử dụng

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

4 cho việc này. Tôi không phải là một người hâm mộ, tôi nghĩ rằng một vòng lặp đơn giản rõ ràng hơn, nhưng việc sử dụng này không cập nhật bộ tích lũy trên mỗi lần lặp, vì vậy nó không thực sự lạm dụng

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

4:

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

1

Hoặc không tạo ra một mảng tạm thời:

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

2

Đã trả lời ngày 18 tháng 2 lúc 8:02Feb 18 at 8:02

T.J. Crowdert.J. Đám đôngT.J. Crowder

987K181 Huy hiệu vàng1837 Huy hiệu bạc1812 Huy hiệu Đồng181 gold badges1837 silver badges1812 bronze badges

Phiên bản thay thế của câu trả lời mà không có jQuery

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

3

Đã trả lời ngày 20 tháng 9 lúc 10:27Sep 20 at 10:27

SimonsimonSimon

11 Huy hiệu Đồng1 bronze badge

Sử dụng một điều kiện bổ sung để kiểm tra xem bên trong và bên trong có giống nhau không. Chỉ trong những trường hợp đó, thay thế văn bản.

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

4

http://jsfiddle.net/7RSGh/

Đã trả lời ngày 11 tháng 4 năm 2013 lúc 13:10Apr 11, 2013 at 13:10

Paul Verschoorpaul VerschoorPaul Verschoor

1.4491 Huy hiệu vàng13 Huy hiệu bạc27 Huy hiệu đồng1 gold badge13 silver badges27 bronze badges

Để có thể cắt giảm kết quả, hãy sử dụng DotNetWala's như vậy:

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

5

Tôi phát hiện ra rằng sử dụng phiên bản ngắn hơn như

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

6 sẽ không hoạt động với trang trí của jQuery ().

Đã trả lời ngày 2 tháng 10 năm 2014 lúc 19:49Oct 2, 2014 at 19:49

3

Chỉ cần đặt nó vào

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

7 hoặc

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

8 và lấy $ ('#listitem font'). Text ()

Điều đầu tiên xuất hiện trong đầu

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

6

Đã trả lời ngày 9 tháng 8 năm 2010 lúc 17:12Aug 9, 2010 at 17:12

DorjandorjanDorjan

2.0073 huy hiệu vàng16 Huy hiệu bạc29 Huy hiệu đồng3 gold badges16 silver badges29 bronze badges

2

Bạn có thể thử cái này

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

7

Đã trả lời ngày 20 tháng 8 năm 2013 lúc 4:51Aug 20, 2013 at 4:51

0

Tôi không phải là một chuyên gia jQuery, nhưng làm thế nào, thì sao,

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

8

Đã trả lời ngày 17 tháng 3 năm 2016 lúc 8:54Mar 17, 2016 at 8:54

SudheerasudheeraSudheera

3553 Huy hiệu bạc8 Huy hiệu Đồng3 silver badges8 bronze badges

1

Điều này chưa được kiểm tra, nhưng tôi nghĩ rằng bạn có thể thử một cái gì đó như thế này:

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

9

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

Đã trả lời ngày 9 tháng 8 năm 2010 lúc 17:20Aug 9, 2010 at 17:20

El Guapoel GuapoEl Guapo

5.4517 Huy hiệu vàng53 Huy hiệu bạc81 Huy hiệu đồng7 gold badges53 silver badges81 bronze badges

1

Làm cách nào để nhận văn bản chỉ trong HTML?

Là văn bản () một phương thức jQuery?

Làm cách nào để nhận văn bản từ một yếu tố?

Làm cách nào để có được văn bản bên trong một div bằng cách sử dụng jQuery?