如何從 JavaScript 中的 HTML 字符串中提取 div 中的所有內容

Question

我有一個這樣的 HTML 字符串：-

var html = '<div id="parent_div">
            <div id="child_div">
            <ul>
             <li><img src="wow/img1.jpg" /><a href="http://wow.com">wow link</a></li>
             <li><img src="wow/img2.jpg" /><a href="http://wow.com">wow link</a></li>
            </ul>
            </div>
            </div>';

如何提取<div id="parent_div">中的所有內容？

Answer 1

在jQuery中，您可以只執行$($html).html();

在php中，您可以使用簡單HTML DOM之類的東西

Answer 2

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> var html = '<div id="parent_div">ABC</div>'; console.log($(html).filter('div').text()); </script>

試試這個！

Answer 3

看一下DOM或其​​他PHP XML庫。

http://se.php.net/manual/en/book.dom.php

Answer 4

字符串是一個字符串。 使用正則表達式進行解析。

在JS方面：
看一下替換或匹配
類似於（未經測試）的內容：

pattern = '/<div id="parent_div">(.*?)<\/div>/';
matches = html.match(pattern);
result= matches[1];

這可能不起作用，因為它將在第一個</div>停止，但是正則表達式是解決問題的方法，只需找到一個返回所需內容的表達式即可。

通常，我認為在PHP或JS變量中“硬編碼” HTML是一個壞主意。
恕我直言，最好使用模板引擎，該模板引擎可以像Mustache一樣在雙方（客戶端和服務器）上使用。 它提供了將HTML與任何類型的應用程序邏輯，客戶端（JS）或服務器（PHP）完全隔離的功能。

Answer 5

好吧，前段時間我也遇到了同樣的問題，這與刷新ajax結果中的div有關，后者會返回相同的頁面html，但現在我只想獲取所需的id並設置innerHTML。 所以我寫了一個javascript函數來做到這一點，

    //Extracts all the string or html content from a named div
    function ExtractFromDiv(str_html, str_div_id)
    {


    //The string we want to return at the end
    var str_return = "";  

    //We would copy all the string contents inside a div<div >
    var str_div_contents = "";

    //We need to know where to start the search
    var start_index = -1; 

    //We want to store the length of the string
    var int_str_len = 0; 

    //The array for the beginning of a div
    var arr_div_start = new Array('<', 'd', 'i', 'v', ' ');

    //The array that ends a div
    var arr_div_end =  new Array('<', '/', 'd', 'i', 'v', '>');

    //The ending character
    var char_end = '>';

    //We must put this in the notation ''
    str_div_id =    '\'' + str_div_id + '\'';


    //Lets iterate for all the characters but we start from the first div
    start_index = str_html.indexOf("<div");

    //If we did not find a div then its okay, we just have to return
    if (start_index == -1 ) { return str_return; }

    //We must get the length of the string
    int_str_len = str_html.length;


    // A boolean that we are begininng the search of a div
    var boo_div_start = false;

    //A boolean for the ending tag of a div
    var boo_div_end = false;

    //An integer that keeps count of all the opened divs
    var int_opened_div_count = 0;

    // A boolean that shows if we have found the div with the id
    var boo_div_with_id = false;

    //We are going to loop through and try to get the character
    for(var int_count = start_index; int_count<int_str_len;  int_count++ )
    {

    //This points to the current character we are dealing with
    var char_current = ' ';
    char_current = str_html.charAt(int_count);

    //Lets check the beginning of a div, then the div begins from here
    if ( int_count + 4  <  int_str_len )
    {
       if (   str_html.charAt(int_count)     ==  arr_div_start[0] )
       if (   str_html.charAt(int_count + 1) ==  arr_div_start[1] )
       if (   str_html.charAt(int_count + 2) ==  arr_div_start[2] )
       if (   str_html.charAt(int_count + 3) ==  arr_div_start[3] )
       if (   str_html.charAt(int_count + 4) ==  arr_div_start[4] )

       {
           boo_div_start = true;

          //If we had already discovered the div with the id, then we must count every other div opening and increment it by one 
            if( boo_div_with_id )
            {
              int_opened_div_count = int_opened_div_count + 1;
            }
       }

    }



    //Lets seek 6 characters forward to see if the next 6 characters close a div
    boo_div_end = false;
    if ( int_count + 6 < int_str_len )
    {

       if (   str_html.charAt(int_count + 1) ==  arr_div_end[0] )
       if (   str_html.charAt(int_count + 2) ==  arr_div_end[1] )
       if (   str_html.charAt(int_count + 3) ==  arr_div_end[2] )
       if (   str_html.charAt(int_count + 4) ==  arr_div_end[3] )
       if (   str_html.charAt(int_count + 5) ==  arr_div_end[4] )
       if (   str_html.charAt(int_count + 6) ==  arr_div_end[5] )

           {
                boo_div_end = true;
                //If we had already discovered the div with the id, then we must decrement this by 1
                if( boo_div_with_id )
                {
                  int_opened_div_count = int_opened_div_count - 1;
                } 
           }

    }




    //If we had already discovered the start of a div id we needed then we copy all the content from the start to the end
    //We must also take care of nested divs this means that everytime we reach the beginning of a div we count it as an extra div that must be                      closed.
    //And also when we know the next 6 characters are closing a div we must reduce the number of nested divs!
    //If we had already found the div with the id, then we must copy all thats next
    if ( boo_div_with_id )
    {
        str_return = str_return + char_current;
        //Once we have the opened divs count at zero or less, then we are sure that we copied all the nested divs in between so we are ready to
        //return            
        if ( int_opened_div_count <= 0 ) {  return  str_return;  }

    }



    //The start of div then we must copy the div contents until we reach the end of the div tag >
    if ( boo_div_start )
    {
        str_div_contents = str_div_contents + char_current;
    }
    else
    {
      str_div_contents = "";
    }




    //Now we must detect the end of the div if we had detected the start before
    if ( boo_div_start )
    {
            //The end of the div is denoted by a >
            if( char_current == '>' )
            {
                //We have just copied whats in a div then we must check the id we wanted
                if ( boo_div_with_id == false )
                {
                    boo_div_with_id = ( str_div_contents.indexOf(str_div_id) != -1);

                    // We set this to 1, if we get a new div we increment it by 1 if we get to the end of a div we decrease it by 1
                    int_opened_div_count = 1; 
                }

                str_div_contents = "";
                boo_div_start = false;
            }
    }


    }




    return str_return;
    }


    //U can try this function as follows in your code
    <script language="javascript">

        var sample_html = "";
        var sample_div = "sammy the dog1";
        var sample_read = "";



        sample_html= "<html><body><div id=\'sammy the dog\'><div   id=\'sammy the dog1\'><div id=\'sammy the dog2\'>crap crap</div></div> </div>                               <body></html>";

        sample_read = ExtractFromDiv(sample_html, sample_div);

        alert( sample_read );

    </script>

///從我的工作開始。 好的編碼！