Hướng dẫn convert html string to array javascript - chuyển đổi chuỗi html thành mảng javascript

Tôi có một chuỗi HTML chứa nhiều thẻ

. Trong mỗi thẻ

có một từ và định nghĩa của nó.

let data = "
Word 1: Definition of word 1
Word 2: Definition of word 2
"

Mục tiêu của tôi là chuyển đổi chuỗi HTML này thành một mảng các đối tượng trông giống như bên dưới:

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

Tôi đang làm như sau:

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

Như bạn có thể thấy nhận xét trong mã trên, đó là nơi tôi bị mắc kẹt. Bất kỳ sự giúp đỡ được đánh giá cao.

Dưới đây là 4 cách để chia một từ thành một mảng các ký tự. "Chia" là cách phổ biến nhất và mạnh mẽ hơn. Nhưng với việc bổ sung ES6, có nhiều công cụ hơn trong Arsenal JS để chơi với 🧰

Tôi luôn muốn xem tất cả các cách có thể để giải quyết một cái gì đó bởi vì sau đó bạn có thể chọn cách tốt nhất cho trường hợp sử dụng của bạn. Ngoài ra, khi bạn thấy nó bật lên trong cơ sở mã của ai đó, bạn sẽ hiểu nó một cách dễ dàng

# Kịch bản

Thay vì trải qua những ưu và nhược điểm của từng cách khác nhau. Hãy để tôi chỉ cho bạn các kịch bản khác nhau, nơi một người được ưa thích hơn cái kia.

# Mảng ký tự

Nếu tất cả những gì bạn đang làm là muốn tách chuỗi theo từng ký tự chuỗi, tất cả các cách đều tốt và sẽ cho bạn cùng một kết quả

# Phân tách cụ thể

Nếu bạn muốn chia chuỗi của mình bằng một ký tự cụ thể, thì split là cách để đi.

Các cách khác chỉ bị giới hạn bởi từng ký tự chuỗi

# Chuỗi chứa biểu tượng cảm xúc

Nếu chuỗi của bạn chứa biểu tượng cảm xúc, thì split hoặc Object.assign có thể không phải là lựa chọn tốt nhất. Hãy xem những gì xảy ra:

Tuy nhiên, nếu chúng ta sử dụng các cách khác, nó hoạt động:

Điều này là do split phân tách các ký tự bằng các đơn vị mã UTF-16 có vấn đề vì các ký tự Emoji là UTF-8. Nếu chúng ta nhìn vào biểu tượng cảm xúc yum của chúng ta '😋', nó thực sự được tạo thành từ 2 ký tự không phải là 1 như chúng ta nhận thức.

Đây là cái được gọi là cụm grapheme - nơi người dùng coi đó là 1 đơn vị, nhưng dưới mui xe, thực tế nó được tạo thành từ nhiều đơn vị. Các phương thức mới hơn ____10 và

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

1 được trang bị tốt hơn để xử lý chúng và sẽ phân chia chuỗi của bạn bằng các cụm đồ họa 👍grapheme clusters 👍

# Một cảnh báo về Object.assign

Một điều cần lưu ý Object.assign là nó không thực sự tạo ra một mảng thuần túy. Hãy bắt đầu với định nghĩa của nó

Phương thức Object.Assign () sao chép tất cả các thuộc tính riêng biệt từ một hoặc nhiều đối tượng nguồn sang đối tượng đích

Chìa khóa có "bản sao tất cả các thuộc tính riêng biệt". Vì vậy, những gì chúng tôi đang làm ở đây

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

4 Nó sao chép tất cả các thuộc tính chuỗi của chúng tôi vào mảng mới của chúng tôi. Có nghĩa là chúng tôi có một mảng cộng với một số phương thức chuỗi.

# TypeScript Kiểm tra: mảng kết quả không phải là loại

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

5 😱

Điều này là rõ ràng hơn nếu chúng ta sử dụng Sân chơi TypeScript. Vui lòng sao chép mã và dán vào sân chơi, nơi bạn có thể di chuột vào biến để xem các loại. Vì đây chỉ là một bài viết, tôi sẽ dán kết quả ở đây để bạn có thể làm theo.

Tuy nhiên, nếu chúng ta nhìn vào loại kết quả của Object.assign. Nó không cho chúng ta một loạt các chuỗi.

# TypeScript Kiểm tra: Mảng kết quả có thể truy cập các thuộc tính chuỗi 😱

Chúng tôi có thể kiểm tra thêm điều này bằng cách truy cập một thuộc tính chỉ có sẵn cho

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

7.

Vì vậy, điều đó có nghĩa là nếu tôi gọi

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

8 trên mảng của chúng tôi, nó sẽ cho chúng tôi biết tài sản này không tồn tại. Đây là những gì chúng ta mong đợi để thấy:

Nhưng, nếu chúng tôi gọi

[
 {"word": "Word 1", "definition": "Definition of word 1"},
 {"word": "Word 2", "definition": "Definition of word 2"}
]

8 trên mảng được cho là của chúng tôi được tạo bởi Object.assign, nó hoạt động 😱

Và điều này là do Object.assign bản sao trên tất cả các thuộc tính từ chuỗi gốc. Đây là cách tôi giải thích nó bằng các điều khoản không phải là DEV. Bạn đến một cửa hàng để mua một con chó. Nhưng sau đó lưu trữ Object.assign bán cho bạn một con chó có cánh rồng. Điều này nghe có vẻ siêu tuyệt vời, nhưng đây không thực sự là một con vật cưng thân thiện cho thuê. Hmm ... Tôi không nghĩ đây là ví dụ tốt nhất của tôi. Nhưng tôi nghĩ bạn nhận được quan điểm của tôi 😂

# Chuyển đổi có vẻ ổn trong trình duyệt 🙂

Bây giờ tôi không nghĩ rằng đây là một công cụ phá vỡ giao dịch lớn, vì:

Có vẻ như các trình duyệt có một số loại cơ chế để "an toàn" do object.assign ([], "chuỗi") và tránh thêm các phương thức của chuỗi đó vào mảng.

Cảm ơn bạn @lukeshiru: vì đã chia sẻ kiến ​​thức này cho tôi 👏 Anh ấy cũng đã tạo mã sân chơi TypeScript để bạn có thể xem> Liên kết

@CaptainArion_: Biến chuỗi thành mảng char nhưng sử dụng hàm bản đồ 🤣

@Hiumesh2:

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

3 wil cũng thực hiện thủ thuật

@Inside.Code: Thông tin bổ sung: an toàn hơn khi sử dụng toán tử lan rộng (phương pháp thứ hai) thay vì

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

4 (phương pháp thứ nhất), vì

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

5 không hoạt động với một số ký tự không phổ biến.

@faerberrr: Tôi có một chuỗi chứa các ký tự đặc biệt như

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

6, v.v. Khi tôi chia chúng bằng phương pháp

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

7 và chạy

var parser = new DOMParser();
  var parsedHtml    = parser.parseFromString(data, "text/html");
  let pTags = parsedHtml.getElementsByTagName("p");
  let vocab = []
  pTags.forEach(function(item){
    // This is where I need help to split and convert item into object
    vocab.push(item.innerHTML)
  });

8, nó đã trả lại hai lần giá trị dự kiến! Chuyển sang toán tử lây lan đã khắc phục sự cố.

# Tài nguyên

• MDN Web Docs: Split
• MDN Web Docs: Truyền bá
• MDN Web Docs: Array.from
• MDN Web Docs: Object.Assign
• Stack Overflow: Làm cách nào để phân chia một chuỗi, phá vỡ một ký tự cụ thể?
• Stack Overflow: Làm thế nào để bạn có được một chuỗi vào một mảng ký tự trong JavaScript?
• Stack Overflow: Làm cách nào để chia một chuỗi thành một mảng các ký tự?
• Stack Overflow: Chuyển đổi UTF-8 thành Unicode để tìm Emoji trong chuỗi trong Java

Làm cách nào để chuyển đổi một chuỗi thành một mảng trong JavaScript?

Làm cách nào để chuyển đổi một chuỗi thành một mảng?

Làm thế nào để bạn phân tích một mảng trong HTML?

Các mảng chuỗi có trong JavaScript không?