HTML hiển thị cây XML

Kích thước tập tin. 6. 07 KBViews Tổng cộng. 10292Cập nhật lần cuối. 19/02/2019 00. 22. 00 UTC Ngày Xuất bản. 18/02/2019 01. 35. 51 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#XML

Plugin SimpleXML jQuery tự động định dạng và hiển thị dữ liệu XML của bạn ở định dạng dạng xem dạng cây có thể thu gọn để dễ đọc hơn

Người dùng của bạn có thể thu gọn và mở rộng các nút bằng cách nhấp/nhấn vào các mũi tên. Đánh dấu cú pháp cũng được hỗ trợ

Làm thế nào để sử dụng nó

1. Chèn các tệp JavaScript và CSS của plugin jQuery SimpleXML vào trang

2. Tạo phần tử vùng chứa để đặt dữ liệu XML được định dạng

3. Gọi hàm trên phần tử vùng chứa và chỉ định đối tượng XML để định dạng

var xml = "Hello fd";

$("#simpleUseCase").simpleXML({ 
  xmlString: xml 
});

4. Chỉ định ký tự sẽ được hiển thị khi nút bị thu gọn. Mặc định là '. '

$("#simpleUseCase").simpleXML({ 
  xmlString: xml,
  collapsedText: "..."
});

Nhật ký thay đổi

2019-02-19

• Bổ sung hỗ trợ cho các thuộc tính

---

Plugin jQuery tuyệt vời này được phát triển bởi borsuksoftware. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

CoronaVirus Hàng triệu người chết trên thế giới Bởi Editor, Example Press Ấn Độ Thứ ba ngày 2 tháng 6 năm 2020 8. 28 IST

Đây là bài viết thứ hai trong loạt bài tôi đã viết để thảo luận về những vấn đề thú vị mà tôi gặp phải trong thời gian thực tập.

Bài đăng này bao gồm

• Hiển thị dữ liệu XML được thụt lề trong HTML divkhông có bất kỳ thư viện nào
• Thêm chức năng 'Tìm' và đánh dấu văn bản đã tìm kiếm

Và nếu bạn đang cố gắng đạt được điều gì đó tương tự và đang vật lộn với nó, thì bạn đang ở đúng nơi. Hãy nhảy ngay vào VUI VẺ

Vấn đề

Yêu cầu 1.
Giả sử chúng ta muốn hiển thị nguyên trạng XML bên dưới, trong một số thành phần giao diện người dùng (phương thức, lưới, div, v.v. ) và bạn đang nhận XML này từ một dịch vụ back-end REST (của tôi là trong Java). Yêu cầu này khá phổ biến ở các công ty làm việc với dữ liệu XML khổng lồ và của tôi là một. Chúng tôi sẽ làm điều này mà không cần sử dụng bất kỳ thư viện in đẹp nào ở mặt trước.

Bạn có thể thấy điều này quá dễ dàng và đúng như vậy — có rất nhiều bài đăng trên stackoverflow. Nhưng có một bước ngoặt. Tôi có một yêu cầu bổ sung không chỉ đơn giản là phù hợp với điều này (Tôi sẽ thảo luận về nó sau).
Vì tôi đã sử dụng Java nên tôi sẽ thảo luận về back-end trong Java nhưng bạn cũng có thể dễ dàng tìm thấy các lớp tương tự trong ngôn ngữ phía máy chủ của mình.

Giải pháp

Để đơn giản hiển thị XML này trong giao diện người dùng của chúng tôi, chúng tôi có thể

• Gửi dữ liệu XML được định dạng dưới dạng chuỗi từ dịch vụ Java. Tôi đã in chuỗi XML đẹp bằng cách sử dụng lớp XMLOutputter trong Java
• Giả sử bạn có dữ liệu XML được lưu trữ trong một đối tượng Document. Nếu bạn là một String, hãy tạo một Document trước tiên bằng cách sử dụng
  0. Dưới đây là đoạn mã nơi chúng tôi tạo chuỗi XML được định dạng để gửi dưới dạng JSON tới giao diện người dùng, từ chuỗi XML thô bằng cách xây dựng một đối tượng Document trước tiên

Tạo tài liệu từ chuỗi XML và sau đó định dạng nó

• Trong mã Angular của chúng tôi, chúng tôi tạo một dịch vụ đưa ra các yêu cầu trực tiếp đến máy chủ bằng cách sử dụng mô-đun
  2 của Angular. Trong dịch vụ này, chúng tôi viết một hàm
  3 thực hiện cuộc gọi là
  4 và sẽ trả về một XMLOutputter0 bao bọc chuỗi XML của chúng tôi

ứng dụng. dịch vụ. ts

• Tiếp theo, trong thành phần Angular tương ứng, chúng ta cần gọi XMLOutputter1 trên observable được trả về bởi phương thức XMLOutputter2. Chúng tôi đưa một phiên bản XMLOutputter3 vào thành phần này.
  (Tôi biết đây là tất cả những điều cơ bản, nhưng sẽ không hại gì khi thảo luận về các bước chi tiết) 🙈

ứng dụng. thành phần. ts

• Trong tệp HTML tương ứng, tôi đã tạo một XMLOutputter4 (bạn có thể có nó theo trường hợp sử dụng của mình) và trong các kiểu CSS- thêm XMLOutputter5 vào XMLOutputter4 cùng với các kiểu khác. Đây là phải. Xem bên dưới

Mẫu HTML và kiểu CSS

Và Voila. Chúng tôi có nó làm việc

Hiển thị dữ liệu XML thụt lề trong ứng dụng web

Càng xa càng tốt. Nhưng ở đây có sự thay đổi

vấn đề mở rộng

Yêu cầu 2.
Ngoài việc hiển thị XML theo phương thức, yêu cầu của tôi là cung cấp chức năng 'Tìm' nơi người dùng tìm kiếm bất kỳ chuỗi nào và chuỗi đó sẽ được đánh dấu trên màn hình (một trường hợp sử dụng rất phổ biến nữa .
Điều này có thể được thực hiện bằng cách sử dụng ống góc.

Các đường ống góc lấy dữ liệu làm đầu vào, chuyển đổi nó thành đầu ra mong muốn và hiển thị cho người dùng. Chúng có thể được sử dụng trong bất kỳ mẫu nào (HTML)

Như trước đây, có rất nhiều bài đăng trực tuyến nhưng tôi phải kết hợp hai yêu cầu này vào dự án của mình — hiển thị XML được làm đẹp và cho phép tìm kiếm mẫu cho cùng một.
Trước khi thảo luận về giải pháp, một điều quan trọng- Làm nổi bật văn bản được tìm kiếm có nghĩa là tìm kiếm chuỗi đầu vào trong chuỗi XML và thay đổi nền của nó thành màu vàng (hoặc bất kỳ thứ gì khác) trong HTML tương ứng. Chúng tôi dự định sửa đổi HTML của divchứa XML và do đó, chỉ thực hiện XMLOutputter8 sẽ không hiệu quả. Bởi vì ngay cả khi chúng ta bao quanh chuỗi đã tìm kiếm trong XMLOutputter9 với các thẻ Document0, thì chuỗi đã sửa đổi sẽ được hiển thị nguyên trạng với các thẻ HTML trong đó. Và do đó, chúng tôi yêu cầu tài sản Document1 của div.

Hãy thử. Chúng tôi thêm tính năng 'tìm' như sau

• Tạo một Document3pipe nơi chúng tôi thực hiện tìm kiếm Regex và thay thế các chuỗi phù hợp bằng các thẻ Document4 xung quanh chúng. Đây là Document5pipe

Document6

• Áp dụng đường ống này cho Document7 trong mẫu của thành phần. Chúng tôi lấy chuỗi Document8 làm đầu vào từ người dùng và liên kết hai chiều bằng cách sử dụng Document9. Đừng quên khởi tạo Document8 thành một chuỗi rỗng

ứng dụng. thành phần. ts

Hãy xem đầu ra

Demo tính năng tìm kiếm và đánh dấu

Lạ nhỉ? .
Where are the XML tags? All we see are the values inside them.
Và khi chúng tôi nhập truy vấn tìm kiếm, một số XML gốc có thể có mẫu này được đánh dấu (một lần nữa, lạ. )

Tại sao chuyện này đang xảy ra?

Lưu ý đầu ra Bảng điều khiển trong Công cụ dành cho nhà phát triển

Cách ngăn chặn cross-site scripting (XSS) của Angular

Chúng tôi không thể xem dữ liệu XML vì Angular nhận ra đó là mã độc được đưa vào DOM. Đọc thêm về các biện pháp bảo vệ tích hợp sẵn của Angular chống lại cross-site scripting (XSS).
Nếu bạn tìm kiếm về cảnh báo này, sẽ có nhiều bài đăng đề xuất sử dụng String1 để vượt qua bảo mật. Và tôi cũng đã thử điều đó.

Sử dụng DomSanitizer trong tìm kiếm nổi bật. ts

Đây là kết quả

Không hoạt động. 😞
Dữ liệu XML được hiển thị chính xác khi tải, nhưng khi tìm kiếm, nó lại hiển thị hành vi lạ. Tin tôi đi, tôi đã chơi rất nhiều và thử mọi thứ có thể nhưng dường như không có gì hiệu quả.
Sau rất nhiều nỗ lực, tôi đã tìm ra một cách thỏa mãn cả hai yêu cầu của mình (hiển thị đúng XML & sử dụng String2).

Tốt nhất của cả hai thế giới

Bây giờ, không có cách nào Angular cho phép chúng tôi bỏ qua bảo mật và hiển thị đúng XML khi được chuyển vào thuộc tính String2. Và nếu không có String2, chúng tôi không thể sửa đổi HTML của XMLOutputter4(như đã giải thích ở trên) dựa trên kết quả tìm kiếm.
Nếu bằng cách nào đó chúng ta có thể chuyển chuỗi chứa XML ẩn tới thuộc tính Document1 sao cho Angular không biết nó có đánh dấu, thì chúng ta đã hoàn thành.

Điều này có thể đạt được bằng cách thoát các ký tự XML trong Chuỗi. Vì vậy, chúng tôi chuyển Document7 đã thoát cho trình duyệt String8 nhận ra nó dưới dạng các ký tự XML và hiển thị chính xác. Điều này có thể được thực hiện ở mặt trước hoặc mặt sau và có thể được thực hiện theo nhiều cách khác nhau. Dưới đây là một số cách nó được thực hiện ở phía máy chủ

Làm cách nào để hiển thị dữ liệu XML trong HTML?

Làm cách nào để hiển thị dữ liệu XML trong trang HTML bằng C#?

Làm cách nào để nhúng XML vào HTML?

Làm cách nào để hiển thị dữ liệu XML ở định dạng bảng bằng CSS?