HTML sang JSON Java

Chuyển đổi HTML sang JSON trực tuyến giúp chuyển đổi Bảng HTML sang json giúp tiết kiệm rất nhiều thời gian. Sao chép, Dán và Chuyển đổi sang JSON. Nó đi qua DOM và tìm kiếm các bảng từ dữ liệu HTML

Bạn có thể làm gì với HTML sang JSON?

• Công cụ này giúp bạn lấy json đơn giản từ bảng html rất nhanh chóng mà không cần viết một dòng mã nào
• Từ HTML sang JSON cho phép tải URL trang web có bảng chuyển đổi sang JSON. Nhấp vào nút URL, Nhập URL và Gửi
• Phân tích cú pháp HTML thành JSON hỗ trợ tải Tệp HTML để chuyển đổi thành JSON. Nhấp vào nút Tải lên và chọn Tệp
• HTML to Plain JSON Converter Online hoạt động tốt trên Windows, MAC, Linux, Chrome, Firefox, Edge và Safari

Ví dụ về HTML

HTML với bảng Hãy dùng thử

	
		
			firstName
			lastName
		
	
	
		
			Tom
			Cruise
		
		
			Maria
			Sharapova
		
		
			James
			Bond
		
	

Đã chuyển đổi HTML 2 JSON

[
  {
    "firstname": "Tom",
    "lastname": "Cruise"
  },
  {
    "firstname": "Maria",
    "lastname": "Sharapova"
  },
  {
    "firstname": "James",
    "lastname": "Bond"
  }
]

Dành cho người dùng nâng cao

HTML với URL bên ngoài của bảng

Tải URL bên ngoài HTML trong URL trình duyệt như thế này https. // làm đẹp mã. org/html-to-json-converter?url=external-url

* Cú pháp JSON bắt nguồn từ cú pháp ký hiệu đối tượng JavaScript, nhưng định dạng JSON chỉ là văn bản. Mã để đọc và tạo dữ liệu JSON có thể được viết bằng bất kỳ ngôn ngữ lập trình nào

Ví dụ JSON

Cú pháp JSON này định nghĩa một đối tượng nhân viên. một mảng gồm 3 bản ghi nhân viên (đối tượng)

Ví dụ JSON

{
"nhân viên". [
  {"firstName". "John", "Họ". "Doe"},
  {"firstName". "Anna", "Họ". "Smith"},
  {"firstName". "Peter", "Họ". "Jones"}
]
}

Định dạng JSON đánh giá các đối tượng JavaScript

Định dạng JSON giống hệt về mặt cú pháp với mã để tạo các đối tượng JavaScript

Do sự giống nhau này, một chương trình JavaScript có thể dễ dàng chuyển đổi dữ liệu JSON thành các đối tượng JavaScript gốc

Quy tắc cú pháp JSON

• Dữ liệu ở dạng cặp tên/giá trị
• Dữ liệu được phân tách bằng dấu phẩy
• Niềng răng xoăn giữ đối tượng
• Dấu ngoặc vuông giữ mảng

Dữ liệu JSON - Tên và Giá trị

Dữ liệu JSON được viết dưới dạng cặp tên/giá trị, giống như thuộc tính đối tượng JavaScript

Cặp tên/giá trị bao gồm tên trường (trong dấu ngoặc kép), theo sau là dấu hai chấm, theo sau là giá trị

JSON có thể rất dễ dàng được dịch sang JavaScript

JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn

Bảng HTML

Tạo một bảng HTML với dữ liệu nhận được dưới dạng JSON

Ví dụ

const dbParam = JSON. xâu chuỗi ({bảng. "khách hàng", giới hạn. 20});
const xmlhttp = new XMLHttpRequest();
xmlhttp. onload = function() {
  myObj = JSON. phân tích cú pháp (cái này. responseText);
  let text = ""
  for (let x in myObj) {
    text += "";<
  }
  text += "

Bảng HTML động

Tạo bảng HTML dựa trên giá trị của menu thả xuống

Ví dụ

Danh sách thả xuống HTML

Tạo danh sách thả xuống HTML với dữ liệu nhận được dưới dạng JSON

Ví dụ

const dbParam = JSON. xâu chuỗi ({bảng. "khách hàng", giới hạn. 20});
const xmlhttp = new XMLHttpRequest();
xmlhttp. onload = function() {
  const myObj = JSON. phân tích cú pháp (cái này. responseText);
  let text = ""   for (let x in myObj) {     text += ""; . getElementById("bản trình diễn"). innerHTML = text;
  document.getElementById("demo").innerHTML = text;
  }
}
xmlhttp. open("POST", "json_demo_html_table. php", true);
xmlhttp. setRequestHeader("Kiểu nội dung", "application/x-www-form-urlencoding");
xmlhttp. gửi("x=" + dbParam);

Cam kết này không thuộc về bất kỳ nhánh nào trên kho lưu trữ này và có thể thuộc về một nhánh bên ngoài kho lưu trữ

Bạn không thể thực hiện hành động đó vào lúc này

Bạn đã đăng nhập bằng tab hoặc cửa sổ khác. Tải lại để làm mới phiên của bạn. Bạn đã đăng xuất trong một tab hoặc cửa sổ khác. Tải lại để làm mới phiên của bạn

Jsoup là một thư viện Java mã nguồn mở được sử dụng chủ yếu để trích xuất dữ liệu từ HTML. Nó cũng cho phép bạn thao tác và xuất HTML. Nó có một dòng phát triển ổn định, tài liệu tuyệt vời và API thông thạo và linh hoạt. Jsoup cũng có thể được sử dụng để phân tích cú pháp và xây dựng XML

Trong hướng dẫn này, chúng ta sẽ sử dụng Blog mùa xuân để minh họa một bài tập cạo thể hiện một số tính năng của jsoup

• Đang tải. tìm nạp và phân tích cú pháp HTML thành Tài liệu
• lọc. chọn dữ liệu mong muốn vào Phần tử và duyệt qua nó
• giải nén. lấy các thuộc tính, văn bản và HTML của các nút
• sửa đổi. thêm/chỉnh sửa/xóa các nút và chỉnh sửa các thuộc tính của chúng

2. Phụ thuộc Maven

Để sử dụng thư viện jsoup trong dự án của bạn, hãy thêm phần phụ thuộc vào tệp pom của bạn. xml

    org.jsoup
    jsoup
    1.10.2

Bạn có thể tìm thấy phiên bản mới nhất của jsoup trong kho lưu trữ Maven Central

3. Sơ lược về Jsoup

Jsoup tải trang HTML và xây dựng cây DOM tương ứng. Cây này hoạt động giống như DOM trong trình duyệt, cung cấp các phương thức tương tự như jQuery và vanilla JavaScript để chọn, duyệt, thao tác văn bản/HTML/thuộc tính và thêm/xóa các phần tử

Nếu bạn cảm thấy thoải mái với bộ chọn phía máy khách và duyệt/thao tác DOM, bạn sẽ thấy jsoup rất quen thuộc. Kiểm tra việc in các đoạn của một trang dễ dàng như thế nào

Document doc = Jsoup.connect("http://example.com").get();
doc.select("p").forEach(System.out::println);

Hãy nhớ rằng jsoup chỉ diễn giải HTML — nó không diễn giải JavaScript. Do đó, những thay đổi đối với DOM thường diễn ra sau khi tải trang trong trình duyệt hỗ trợ JavaScript sẽ không được nhìn thấy trong jsoup

4. Đang tải

Giai đoạn tải bao gồm tìm nạp và phân tích cú pháp HTML thành Tài liệu. Jsoup đảm bảo phân tích cú pháp của bất kỳ HTML nào, từ những trang không hợp lệ nhất đến những trang được xác thực hoàn toàn, như một trình duyệt hiện đại sẽ làm. Nó có thể đạt được bằng cách tải Chuỗi, InputStream, Tệp hoặc URL

Hãy tải một Tài liệu từ URL Blog Mùa xuân

String blogUrl = "https://spring.io/blog";
Document doc = Jsoup.connect(blogUrl).get();

Lưu ý phương thức get, nó đại diện cho một lệnh gọi HTTP GET. Bạn cũng có thể thực hiện POST HTTP bằng phương thức post (hoặc bạn có thể sử dụng phương thức nhận loại phương thức HTTP làm tham số)

Nếu bạn cần phát hiện các mã trạng thái bất thường (e. g. 404), bạn nên nắm bắt ngoại lệ HttpStatusException

try {
   Document doc404 = Jsoup.connect("https://spring.io/will-not-be-found").get();
} catch (HttpStatusException ex) {
   //...
}

Đôi khi, kết nối cần được tùy chỉnh hơn một chút. Jsoup. connect(…) trả về một Kết nối cho phép bạn đặt, trong số những thứ khác, tác nhân người dùng, liên kết giới thiệu, thời gian chờ kết nối, cookie, dữ liệu bài đăng và tiêu đề

Connection connection = Jsoup.connect(blogUrl);
connection.userAgent("Mozilla");
connection.timeout(5000);
connection.cookie("cookiename", "val234");
connection.cookie("cookiename", "val234");
connection.referrer("http://google.com");
connection.header("headersecurity", "xyz123");
Document docCustomConn = connection.get();

Vì kết nối tuân theo giao diện trôi chảy, bạn có thể xâu chuỗi các phương thức này trước khi gọi phương thức HTTP mong muốn

Document docCustomConn = Jsoup.connect(blogUrl)
  .userAgent("Mozilla")
  .timeout(5000)
  .cookie("cookiename", "val234")
  .cookie("anothercookie", "ilovejsoup")
  .referrer("http://google.com")
  .header("headersecurity", "xyz123")
  .get();

Bạn có thể tìm hiểu thêm về cài đặt Kết nối bằng cách duyệt Javadoc tương ứng

5. lọc

Bây giờ chúng tôi đã chuyển đổi HTML thành Tài liệu, đã đến lúc điều hướng nó và tìm thấy những gì chúng tôi đang tìm kiếm. Đây là nơi mà sự tương đồng với jQuery/JavaScript rõ ràng hơn, vì các bộ chọn và phương thức duyệt của nó là tương tự nhau

5. 1. lựa chọn

Phương thức chọn Tài liệu nhận một Chuỗi đại diện cho bộ chọn, sử dụng cú pháp bộ chọn giống như trong CSS hoặc JavaScript và truy xuất danh sách Thành phần phù hợp. Danh sách này có thể rỗng nhưng không rỗng

Chúng ta hãy xem xét một số lựa chọn bằng cách sử dụng phương pháp select

Bạn cũng có thể sử dụng các phương thức rõ ràng hơn lấy cảm hứng từ DOM của trình duyệt thay vì phương thức chọn chung chung

Element pag = doc.getElementById("pagination_control");
Elements desktopOnly = doc.getElementsByClass("desktopOnly");

Vì Phần tử là lớp cha của Tài liệu, bạn có thể tìm hiểu thêm về cách làm việc với các phương thức lựa chọn trong Javadocs Tài liệu và Phần tử

5. 2. đi ngang qua

Đi ngang có nghĩa là điều hướng trên cây DOM. Jsoup cung cấp các phương thức hoạt động trên Tài liệu, trên một tập hợp Phần tử hoặc trên một Phần tử cụ thể, cho phép bạn điều hướng đến nút cha, anh chị em hoặc con của nút

Ngoài ra, bạn có thể chuyển đến Phần tử đầu tiên, cuối cùng và thứ n (sử dụng chỉ mục dựa trên 0) trong một tập hợp các Phần tử

[
  {
    "firstname": "Tom",
    "lastname": "Cruise"
  },
  {
    "firstname": "Maria",
    "lastname": "Sharapova"
  },
  {
    "firstname": "James",
    "lastname": "Bond"
  }
]

Bạn cũng có thể lặp qua các lựa chọn. Trên thực tế, mọi thứ thuộc loại Phần tử đều có thể được lặp lại

[
  {
    "firstname": "Tom",
    "lastname": "Cruise"
  },
  {
    "firstname": "Maria",
    "lastname": "Sharapova"
  },
  {
    "firstname": "James",
    "lastname": "Bond"
  }
]

Bạn có thể thực hiện lựa chọn giới hạn đối với lựa chọn trước đó (lựa chọn phụ)

Document doc = Jsoup.connect("http://example.com").get();
doc.select("p").forEach(System.out::println);

6. giải nén

Bây giờ chúng ta đã biết cách tiếp cận các phần tử cụ thể, vì vậy đã đến lúc lấy nội dung của chúng — cụ thể là thuộc tính, HTML hoặc văn bản con của chúng

Hãy xem ví dụ này chọn bài viết đầu tiên từ blog và nhận ngày của nó, văn bản phần đầu tiên của nó và cuối cùng là HTML bên trong và bên ngoài của nó

Document doc = Jsoup.connect("http://example.com").get();
doc.select("p").forEach(System.out::println);

Dưới đây là một số mẹo cần ghi nhớ khi chọn và sử dụng bộ chọn

• Dựa vào tính năng “Xem nguồn” của trình duyệt của bạn và không chỉ trên trang DOM vì nó có thể đã thay đổi (chọn trong bảng điều khiển trình duyệt có thể mang lại kết quả khác với jsoup)
• Biết các bộ chọn của bạn vì có rất nhiều trong số chúng và thật tốt nếu ít nhất bạn đã nhìn thấy chúng trước đó;
• Sử dụng sân chơi cho bộ chọn để thử nghiệm với chúng (dán HTML mẫu vào đó)
• Ít phụ thuộc vào thay đổi trang. nhắm đến các bộ chọn nhỏ nhất và ít ảnh hưởng nhất (e. g. id thích hơn. dựa trên)

7. sửa đổi

Việc sửa đổi bao gồm việc thiết lập các thuộc tính, văn bản và HTML của các phần tử, cũng như thêm và xóa các phần tử. Nó được thực hiện với cây DOM được tạo trước đó bởi jsoup – Tài liệu

7. 1. Đặt thuộc tính và Văn bản bên trong/HTML

Như trong jQuery, các phương thức đặt thuộc tính, văn bản và HTML có cùng tên nhưng cũng nhận giá trị được đặt

• attr() – đặt giá trị của thuộc tính (nó tạo thuộc tính nếu nó không tồn tại)
• text() – đặt văn bản bên trong phần tử, thay thế nội dung
• html() – thiết lập HTML bên trong phần tử, thay thế nội dung

Hãy xem một ví dụ nhanh về các phương pháp này

Document doc = Jsoup.connect("http://example.com").get();
doc.select("p").forEach(System.out::println);

7. 2. Tạo và thêm các phần tử

Để thêm một phần tử mới, trước tiên bạn cần xây dựng phần tử đó bằng cách khởi tạo Phần tử. Khi Phần tử đã được tạo, bạn có thể nối nó vào Phần tử khác bằng phương thức appendChild. Phần tử mới được tạo và nối thêm sẽ được chèn vào cuối phần tử nơi appendChild được gọi

Document doc = Jsoup.connect("http://example.com").get();
doc.select("p").forEach(System.out::println);

7. 3. Loại bỏ các yếu tố

Để xóa các phần tử, trước tiên bạn cần chọn chúng và chạy phương thức xóa

For example, let's remove all

Document doc = Jsoup.connect("http://example.com").get();
doc.select("p").forEach(System.out::println);

Document doc = Jsoup.connect("http://example.com").get();
doc.select("p").forEach(System.out::println);