How To Extract All Contents Inside A Div From Html String In Javascript

I have a HTML string like this :- var html = '

• 

  On JS side: Take a look at replace or match Something like (not tested):

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

  This probably doesn't work because it will stop on the first </div>, but regex is the way to go here, just find an expression which returns what you need.

  Generally I think it is a bad idea to "hardcode" HTML in PHP or JS variables. IMHO it is better to use a template engine, which can be used on both sides (client and server) like Mustache. It providers complete separation of HTML from any kind of application logic, client(JS) or server(PHP).

Solution 3:

Take a look at DOM or the other PHP XML libs.

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

Solution 4:

Okay I was faced with the same problem sometime ago, and it had to do with refreshing a div from an ajax result which would return the same page html but now I wanted to grab only the id I wanted, and set the innerHTML. So I wrote a javascript function to do this,

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


    //The string we want to return at the endvar 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 searchvar start_index = -1; 

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

    //The array for the beginning of a divvar arr_div_start = newArray('<', 'd', 'i', 'v', ' ');

    //The array that ends a divvar arr_div_end =  newArray('<', '/', 'd', 'i', 'v', '>');

    //The ending charactervar 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 returnif (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 divvar boo_div_start = false;

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

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

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

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

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

    //Lets check the beginning of a div, then the div begins from hereif ( 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 1if( 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 nextif ( 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 beforeif ( 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 wantedif ( 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>

///It works from my end. Good coding!

Share