Hướng dẫn how to split html tags in javascript - cách tách các thẻ html trong javascript

Với HTML này dưới dạng chuỗi "HTML", làm thế nào tôi có thể chia nó thành một mảng trong đó mỗi tiêu đề

["
A
", "
B
Foobar
", "
C
"]

Bắt đầu với điều này:

A
B
Foobar
C

Kết quả::

["
A
", "
B
Foobar
", "
C
"]

Những gì tôi đã thử:

Tôi muốn sử dụng

["
A
", "
B
Foobar
", "
C
"]

["
A
", "
B
Foobar
", "
C
"]

["
A
", "
B
Foobar
", "
C
"]

var html = '
A
B
Foobar
C
';
var foo = html.split(/(

EDIT: Dù sao cũng không phải là một yêu cầu trong dù sao, đó chỉ là giải pháp duy nhất mà tôi nghĩ sẽ hoạt động để phân tách các chuỗi HTML theo cách này.: Regex is not a requirement in anyway, it's just the only solution that I thought would work for generally splitting HTML strings in this way.

Hỏi ngày 28 tháng 12 năm 2015 lúc 10:08Dec 28, 2015 at 10:08

Don Pdon pDon P

56.5K107 Huy hiệu vàng289 Huy hiệu bạc420 Huy hiệu đồng107 gold badges289 silver badges420 bronze badges

14

Trong ví dụ của bạn, bạn có thể sử dụng:

/
      // Match literal <
  .*?  // Match any character zero or more times, non greedy
  <\/h // Match literal     // Match literal >
/g

var str = '
A
B
Foobar
C
'
str.match(/.*?<\/h\1>/g); // ["
A
", "
B
", "
C
"]

Nhưng xin vui lòng không phân tích HTML với regexp, hãy đọc các thẻ mở regex match ngoại trừ xhtml thẻ độc lập

Đã trả lời ngày 28 tháng 12 năm 2015 lúc 10:39Dec 28, 2015 at 10:39

Andreas Louvandreas LouvAndreas Louv

45K13 Huy hiệu vàng96 Huy hiệu bạc118 Huy hiệu đồng13 gold badges96 silver badges118 bronze badges

13

Từ các ý kiến ​​đến câu hỏi, đây dường như là nhiệm vụ:

Tôi đang nhận được dấu ấn năng động rằng tôi đang xuất hiện từ GitHub. Sau đó, tôi muốn kết xuất nó thành HTML, nhưng bọc mọi yếu tố tiêu đề trong thành phần ReactJS

["
A
", "
B
Foobar
", "
C
"]

5.

Sau đây là một giải pháp dựa trên thư viện hoàn toàn, DOM-API.

function waypointify(html) {
    var div = document.createElement("div"), nodes;

    // parse HTML and convert into an array (instead of NodeList)
    div.innerHTML = html;
    nodes = [].slice.call(div.childNodes);

    // add  elements and distribute nodes by headings
    div.innerHTML = "";
    nodes.forEach(function (node) {
        if (!div.lastChild || /^h[1-6]$/i.test(node.nodeName)) {
            div.appendChild( document.createElement("waypoint") );
        }
        div.lastChild.appendChild(node);
    });

    return div.innerHTML;
}

Làm tương tự trong một thư viện hiện đại với ít dòng mã là hoàn toàn có thể, xem nó là một thách thức.

Đây là những gì nó tạo ra với đầu vào mẫu của bạn:

A
B
Foobar
C

Đã trả lời ngày 28 tháng 12 năm 2015 lúc 10:47Dec 28, 2015 at 10:47

TomalaktomalakTomalak

326K66 Huy hiệu vàng515 Huy hiệu bạc618 Huy hiệu Đồng66 gold badges515 silver badges618 bronze badges

Tôi chắc chắn rằng ai đó có thể giảm vòng lặp để đặt giá đỡ góc trở lại nhưng đây là cách tôi làm điều đó.

var html = '
A
B
Foobar
C
';

//split on ><
var arr = html.split(/>< so we need to determine where to put them back in.
for(var i = 0; i < arr.length; i++){
  if(arr[i].substring(0, 1) != '<'){
    arr[i] = '<' + arr[i];
  }

  if(arr[i].slice(-1) != '>'){
    arr[i] = arr[i] + '>';
  }
}

Ngoài ra, chúng tôi thực sự có thể loại bỏ khung đầu tiên và cuối cùng, thực hiện phân chia và sau đó thay thế các khung góc thành toàn bộ.

var html = '
A
B
Foobar
C
';

//remove first and last characters
html = html.substring(1, html.length-1);

//do the split on ><
var arr = html.split(/>';
}

Ồ, tất nhiên điều này sẽ thất bại với các yếu tố không có nội dung.

Đã trả lời ngày 28 tháng 12 năm 2015 lúc 10:23Dec 28, 2015 at 10:23

Donnie d'Amatodonnie d'AmatoDonnie D'Amato

3.7721 Huy hiệu vàng14 Huy hiệu bạc39 Huy hiệu đồng1 gold badge14 silver badges39 bronze badges

1

Xin chào, tôi đã sử dụng chức năng này để chuyển đổi chuỗi HTML DOM trong mảng

  static getArrayTagsHtmlString(str){
    let htmlSplit = str.split(">")
    let arrayElements = []
    let nodeElement =""
    htmlSplit.forEach((element)=>{  
      if (element.includes("<")) {
        nodeElement = element+">"   
       }else{
         nodeElement = element
        }
        arrayElements.push(nodeElement)
    })
    return arrayElements
  }

Mã hạnh phúc

Đã trả lời ngày 4 tháng 2 năm 2020 lúc 14:39Feb 4, 2020 at 14:39

HalleyrioshalleyriosHalleyRios

5541 Huy hiệu vàng3 Huy hiệu bạc17 Huy hiệu đồng1 gold badge3 silver badges17 bronze badges

Làm thế nào chia thẻ HTML trong JavaScript?

Phương thức Split () chia một chuỗi thành một mảng các chuỗi con. Phương thức chia () trả về mảng mới. Phương thức chia () không thay đổi chuỗi gốc. Nếu ("") được sử dụng làm dấu phân cách, chuỗi được phân chia giữa các từ.. The split() method returns the new array. The split() method does not change the original string. If (" ") is used as separator, the string is split between words.

Làm thế nào để bạn chia văn bản trong HTML?

Phương thức SplitText () chia nút văn bản thành hai nút tại chỉ mục bù được chỉ định, giữ cả hai nút trong cây làm anh chị em. Sau khi chia văn bản, nút chính chứa tất cả nội dung lên đến điểm chỉ mục bù được chỉ định và một nút mới được tạo cùng loại chứa văn bản còn lại.. After Splitting the text, the main node contains all the content up to the specified offset index point, and a newly created node of the same type contains the remaining text.

Làm thế nào để bạn chia một biểu tượng trong JavaScript?

Demo JavaScript: Symbol.Split..

lớp Split1 {.

constructor (value) {.

đây.giá trị = giá trị ;.

[Biểu tượng.tách] (chuỗi) {.

const index = chuỗi.indexof (giá trị này) ;.

Trả về `$ {this.Giá trị} $ {chuỗi.chuỗi con (0, index)}/$ {chuỗi.Subrtr (index + this. Giá trị. Độ dài)} `;.

Làm thế nào để bạn chia và tham gia JavaScript?

Cách hoạt động: Đầu tiên, chia chuỗi tiêu đề cho không gian thành một mảng bằng cách sử dụng phương thức chuỗi chia ().Thứ ba, chuyển đổi chuỗi kết quả thành chữ thường bằng cách sử dụng phương thức tolowerCase ().split the title string by the space into an array by using the split() string method. Second, concatenate all elements in the result array into a string by using the join() method. Third, convert the result string to lower case by using the toLowerCase() method.

Làm thế nào để bạn chia các yếu tố?

Các yếu tố phân chia..

Nhấp vào sửa đổi bảng điều chỉnh tab (phần tử chia) ..

Nếu muốn, trên thanh Tùy chọn, chọn Xóa phân đoạn bên trong.Khi bạn chọn tùy chọn này, Revit sẽ xóa phân đoạn của bức tường hoặc đường giữa các điểm đã chọn ..

Nhấp vào phần tử tại điểm bạn muốn chia ..