Cách chia thẻ html trong javascript?

Đưa ra một chuỗi chứa một đoạn HTML, hãy chia chuỗi đó thành hai hoặc nhiều đoạn HTML được cân bằng chính xác ở bất kỳ nơi nào tìm thấy bộ chọn đã chỉ định. Trả về cả các đoạn mới và các phần tử khớp với bộ chọn, luân phiên. Hoạt động trên máy chủ và trong trình duyệt. Được cung cấp bởi Cheerio ở phía máy chủ, jQuery trong trình duyệt

var splitHtml = require['split-html'];
var html = '
' +
  '
First component.
' +
  '' +
  '
Second component.
' +
  '
';
var fragments = splitHtml[html, 'img'];
console.log[fragments];

kết quả này

[
  '
First component.
',
  '',
  '
Second component.
'
]

Lưu ý rằng bản thân

[
  '
First component.
',
  '',
  '
Second component.
'
]

0 được trả lại. Phần tử đầu tiên trong mảng luôn là một đoạn HTML, phần tử thứ hai luôn là phần tử khớp với bộ chọn, v.v.

Bất kỳ thẻ vùng chứa nào đã mở khi gặp thẻ

[
  '
First component.
',
  '',
  '
Second component.
'
]

0 sẽ tự động đóng ở cuối đoạn đầu tiên và được mở lại ở đầu đoạn tiếp theo có cùng thuộc tính

Chức năng kiểm tra tùy chọn

Nếu bộ chọn kiểu jQuery/CSS không đủ cụ thể, bạn có thể chuyển một hàm làm đối số thứ ba. Hàm này được gọi với một đối tượng Cheerio hoặc jQuery đại diện cho phần tử phù hợp. Nếu bạn muốn phân tách xung quanh phần tử này, hãy trả về

[
  '
First component.
',
  '',
  '
Second component.
'
]

2. Nếu không, hãy trả lại

[
  '
First component.
',
  '',
  '
Second component.
'
]

3

Điều này hữu ích vì Cheerio hiện không hỗ trợ

[
  '
First component.
',
  '',
  '
Second component.
'
]

4 và cũng vì trong một số trường hợp, ngay cả

[
  '
First component.
',
  '',
  '
Second component.
'
]

4 cũng có thể không đủ cụ thể

// Split on 'a', but only if it contains 'img'
var result = splitHtml[html, 'a', function[$el] {
  if [$el.find['img'].length] {
    return true;
  } else {
    return false;
  }
}];

Tùy chọn bổ sung

Các tùy chọn sau sẽ được chuyển thành đối số thứ tư cho

[
  '
First component.
',
  '',
  '
Second component.
'
]

6 trong một đối tượng

[
  '
First component.
',
  '',
  '
Second component.
'
]

0

Một đối tượng của Cheerio v0. x

[
  '
First component.
',
  '',
  '
Second component.
'
]

1 tùy chọn, như được ghi lại tại đây. Điều này được sử dụng khi sử dụng split-html trên máy chủ khi chuẩn bị đoạn HTML để phân tích cú pháp

Tại sao?

Chúng tôi muốn nhập các bài đăng trên blog Wordpress vào ApostropheCMS CMS. Wordpress sử dụng HTML để nhúng hình ảnh và video, trong khi Dấu nháy đơn đại diện cho các khối văn bản và các tiện ích như trình chiếu dưới dạng các đối tượng riêng biệt trong một mảng.

[
  '
First component.
',
  '',
  '
Second component.
'
]

2 cho phép chúng tôi cắt và sắp xếp HTML hiện có một cách gọn gàng để chúng tôi có thể dễ dàng chuyển đổi nó thành các tiện ích dấu nháy đơn

Còn lỗi thì sao?

Nếu

[
  '
First component.
',
  '',
  '
Second component.
'
]

2 gặp điều gì đó mà nó không thể tìm ra, chẳng hạn như đánh dấu khủng khiếp, nó sẽ trả về chuỗi ban đầu là phần tử duy nhất trong mảng

Sử dụng split-html trong trình duyệt

[
  '
First component.
',
  '',
  '
Second component.
'
]

2 đã được mã hóa để hoạt động với Cheerio hoặc jQuery thực tế. Nó sẽ tự động chỉ sử dụng jQuery nếu có trong trình duyệt. Chúng tôi sử dụng tính năng này trong quá trình sản xuất trong trình soạn thảo văn bản đa dạng thức của ApostropheCMS

Giới thiệu về P'unk Avenue và ApostropheCMS

[
  '
First component.
',
  '',
  '
Second component.
'
]

2 đã được tạo tại P'unk Avenue để sử dụng trong nhiều dự án được xây dựng bằng Apostrophe, một hệ thống quản lý nội dung nguồn mở được xây dựng trên nút. js. Nếu bạn thích

[
  '
First component.
',
  '',
  '
Second component.
'
]

2, bạn chắc chắn nên xem dấu nháy đơn. com

Có chức năng phân chia trong JavaScript không?

Chúng tôi có thể sử dụng phân tách trong HTML không?

Tại sao phân tách không hoạt động trong JavaScript?