Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    93
    Thanks
    12
    Thanked 0 Times in 0 Posts

    divide up html into sections

    Hi guys,

    I have been trying various functions to split up a page of html with

    (div|span|font|p|strong|b|u|i|em|blockquote|ol|ul|li|strike|hr)

    tags.

    I want to split this page into three parts and not to split inside of a html tag. So I can place two divs in between these three parts. These divs are then floated left or right (to paint the picture)

    Any ideas how I might ven successfully atempt this?

    I have been using this function which I have altered slightly

    Code:
    //bastardised from a function here http://www.navioo.com/php/docs/function.wordwrap.php
    //basically take a string find an END html tag and then split the string if its over the amount sepcified there - so I can split strings with html in and not break the html
    //supports all valid html tags 
    //(pretty sure this works as intended - needs looking out for across the site)
    
    
    function cut_html($str,$start,$qty){
    
    	$tag_open = '<';
    	$tag_close = '>';
    	$end_tag = '/';
    	$double_quote = '\"';
    	$single_quote = "\'";
    	$count = 0;
    	$in_tag = 0;
    	$str_len = strlen($str);
    	$segment_width = $start;
    
    for ($i=0 ; $i<=$str_len ; $i++){
    
    
    if ($str[$i] == $tag_open) {
    
      if ($in_tag == 2){ //this is an opening < for a closing tag </a>
        $in_tag--;//in_tag == 1
        $segment_width++;
      }else{
        $in_tag++; //an opening < for a tag (in_tag == 1)
        $segment_width++;
      }
    
    } elseif ($str[$i] == $double_quote) {  //to stop the / in a link (between quotes) being counted as the html end_tag  - Relys on valid xhtml (js and php checks this) (anything inside quotes is ignored)
    
      if ($in_tag == 1) { //inside of a tag
        $in_tag + 2;    //hit a starting double quote (in_tag == 3)
        $segment_width++;
      }else if ($in_tag == 3) { //closing an open double quote
        $in_tag - 2; //closed double quote (in_tag == 1)
        $segment_width++;
      }
    			
    			
    } elseif ($str[$i] == $single_quote) { //to stop the / in a link (between quotes) being counted as the html end_tag  - Relys on valid xhtml (js and php checks this) (anything inside quotes is ignored)
    
      if ($in_tag == 1) { //inside of a tag
        $in_tag + 3;//hit a starting single quote (in_tag == 4)
        $segment_width++;
      }else if ($in_tag == 4) { //closing an open single quote
        $in_tag - 3; //closed single quote (in_tag == 1)
        $segment_width++;
      }
    
    } elseif ($str[$i] == $end_tag) { //end tag / 
    
       if ($in_tag == 1) { //if inside of the < > tags
         $in_tag++; //in_tag == 2
         $segment_width++;
       }
    
    } elseif ($str[$i] == $tag_close) {
       if ($in_tag == 2) { //we are on the final closing tag of an element >
         $in_tag = ($in_tag -2); // in_tag == 0
         $segment_width++;
      }else if ($in_tag == 1) { //the > of the starting tag of an element <a blah... >
         $in_tag++; // in_tag == 2
         $segment_width++;
      }
    
    } else {
    
      if ($in_tag == 0) { //were not inside a html tag
    			
    	$segment_width++;
    
      if (($segment_width >= $qty) && ($str[$i] == " ")) { //if we have gone over the designated split amount ($qty) and we are on a space " " and we arnt in a html tag then split the string
    	$str = substr($str, $start, $i );
    					
      }
    }	
    }
    
    		
    	}
    return $str;
    }
    I aam quite lost on this and any help or pointers on spliting html into three(or any other number) of parts without ruining the formatting - I.e not splitting in the middle of a tag. Would be massively appreciated.

    To me these seems like a can of worms!
    Last edited by chidge; 02-05-2010 at 10:35 PM.

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,246
    Thanks
    12
    Thanked 340 Times in 336 Posts
    I didn’t get where you want to split the page …
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    93
    Thanks
    12
    Thanked 0 Times in 0 Posts
    this is to split a body of html up so I can place images floating left and right (two) within this body of text. The split is denoted by $qty and the value of $qty is denoted by the strlen($str)/3

    I then go on to place spans inbetween the resulting three different valid chunks of html.

    I am relooking this morning but I seem to be getting issues with tags being cut up and prblems with invalid html...
    I am wondering if there is a much better approach to this than the one I am currently attempting. Seems an obvious one in a php coders utility belt
    I have seen something (late last night) involving domdocument which I may have a look at.


    Im also thinking this is the wrong way to look at it and I need to create something that splits the html into three and gives me back an array with these three sections, rather than calling the above function three times... back to the drawing board.

    any advice really welcome

    Thanks
    Last edited by chidge; 02-06-2010 at 08:35 AM.

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,246
    Thanks
    12
    Thanked 340 Times in 336 Posts
    how complex is that body of text? (are there many paragraphs, nested elements, etc.) maybe you should post a link …
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    93
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Unfortunately Im not off my machine yet still on dev server so no link but I can give you the next best thing.

    Here is an example of the html generated by the wysiwyg I have made.

    This is the html I wish to split.


    The only permitted tags in this html are : (div|span|font|p|strong|b|u|i|em|blockquote|ol|ul|li|strike|hr)



    Code:
    <br /><font size="4"><strong>Lorem</strong></font><br /><br /><font size="3">
     ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget neque sit amet sem posuere tempor non non tellus. Suspendisse consequat mauris id eros pretium euismod. Sed pulvinar dui ligula, id volutpat enim. Praesent laoreet, elit eu mattis dictum, leo lorem ornare lectus, et tempor nulla metus in quam. Duis aliquet orci at lacus sagittis rutrum. Vivamus dictum dui id ante dictum et varius felis elementum. Cras facilisis convallis quam sit amet ornare. Sed ac mauris sit amet nisl dignissim vehicula. Vestibulum adipiscing sollicitudin lectus. Nulla facilisi.</font>
    <br />
    <br />
    <br />
    <font size="4">
    <strong>Cras molestie nibh nec risus fermentum consectetur.</strong>
    </font>
    <br />
    <font size="2">
    <br />
    </font>
    <font size="3">Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In tincidunt nibh eu est vehicula id ornare odio placerat. Aliquam ultricies leo eget lorem consequat aliquet. Maecenas volutpat odio ut orci aliquet eleifend. Cras placerat viverra nisl vel semper. Vivamus eget velit augue. Mauris ultrices ultrices fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque nulla mauris, convallis sit amet consectetur eu, auctor quis sem. Ut viverra nunc sit amet massa rutrum cursus. Cras libero est, luctus nec faucibus at, aliquam non ante.
    <br />
    <br />
    Morbi sagittis, urna eget consequat blandit, nunc enim aliquam urna, ut vehicula turpis ante sed orci. Nam ac dolor eget orci bibendum posuere vitae ut lectus. Duis ipsum tellus, varius quis mattis sed, convallis vel leo. Sed ullamcorper dapibus purus vitae convallis. Praesent porttitor, arcu eu ornare laoreet, purus nisl venenatis orci, sit amet suscipit ipsum urna ac nisi. Etiam ac mi magna. Donec accumsan blandit est vitae rhoncus.
    <br />
    <br />
    Quisque in pretium elit. Sed adipiscing ullamcorper dolor in vehicula. Phasellus vel malesuada erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mattis erat, ut sodales velit pulvinar quis. Donec dolor mi, sodales in accumsan quis, volutpat at leo. Suspendisse congue adipiscing imperdiet. Nunc at diam ac metus tincidunt laoreet a at sem. Maecenas ac cursus diam. Nulla sit amet commodo tortor.
    <br />
    <br />
    Quisque sed neque dui, id dapibus lorem. Aenean id ante et justo fringilla placerat eget non lacus. Vivamus at eros eu nunc porttitor tempus. Nullam vulputate nibh eu augue tincidunt sed posuere arcu vestibulum. Vestibulum orci augue, gravida a tempus at, iaculis sit amet arcu. Ut sit amet neque eget leo faucibus posuere. Proin eget erat tellus, at semper ligula. Ut vitae ornare purus. In est lorem, aliquet at placerat sed, lobortis gravida erat.
    <br />
    <br />
     Proin tincidunt luctus lectus. Aliquam porta sapien vitae mi lacinia ac tristique enim posuere. Cras quis nisl vitae mi semper dapibus rhoncus et ligula. Mauris a quam at lacus gravida ultricies eget sodales dolor. In scelerisque mollis nulla. Maecenas nunc velit, bibendum sit amet elementum ac, dapibus eget ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non nisl et enim ullamcorper volutpat vitae in nibh. Nullam blandit, elit eget auctor ultrices, velit nunc pretium augue, eget rutrum libero ligula nec est. Maecenas non ornare enim.
    <br />
    <br />
    Proin aliquet, diam ut ultrices vulputate, est nunc vulputate orci, in fringilla enim augue sed odio. Maecenas mattis consectetur tristique. Praesent molestie accumsan dolor id varius. In at libero enim, vitae pretium nunc. Duis est ligula, porttitor id vulputate et, ultricies eu metus. Sed egestas pulvinar nulla. Sed ultricies felis sed massa sollicitudin at tristique mi hendrerit. Aenean sollicitudin justo non est congue ac fringilla lacus porttitor. Phasellus blandit orci vitae dolor facilisis pharetra. Aliquam pharetra tempus nunc nec venenatis. Aliquam quis dui ac enim auctor eleifend in sit amet odio. Cras consectetur massa enim. Fusce venenatis odio non nibh eleifend ultrices. Nulla facilisi. Suspendisse vitae blandit elit.
    </font>
    <font size="2">
    <br />
    </font>
    <br />
    <br />
    <font size="4">
    <strong>Aliquam erat volutpat</strong>
    </font>
    <br />
    <br />
    <font size="3">Proin aliquet, diam ut ultrices vulputate, est nunc vulputate orci:
    <br />
    <br />
    1. In est lorem
    <em>(Nullam blandit)</em>
    <br />
    <br />
    2. in fringilla
    <em>(Nullam blandit)</em>
    <br />
    <br />
    3. Confluence
    <em>(Nullam blandit)</em>
    <br />
    <br />
    4. vulputate
    <em>(Nullam blandit)</em>
    <br />
    <br />
    5. Proin aliquet
    <em>(Nullam blandit)</em>
    <br />
    <br />
    6. nunc vulputate orci
    <em>(Nullam blandit)</em>
    <br />
    <br />
    7. vulputate orci
    </font>
    <font size="2">
    <em>
    <font size="3">(Nullam blandit)</font>
    </em>
    <br />
    <br />
    <br />
    </font>
    <font size="3">Fusce venenatis odio non nibh eleifend
    <a class="tip" target="_self" title="" href="http://www.venenatisodiononnibheleifend.com/massa/eleifend/">eleifend in sit amet odio</a>
    </font>
    <font size="3">.
    <br />
    diam ut ultrices vulputate, est nunc vulputate orci
    <a class="tip" target="_self" title="" href="http://www.venenatis.com/Fusce/eleifend-ultrices">Fusce venenatis odio non nibh eleifend ultrices</a>.
    </font>
    <br />
    ta

    P.s - yes I realise the wysiwyg has a few issues (other than pbcac problems), but its html validates and its cross browser (safari, ff, chrome, ie, opera) so that makes me happy for the moment - it will be tweaked
    Last edited by chidge; 02-06-2010 at 09:33 AM.

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,246
    Thanks
    12
    Thanked 340 Times in 336 Posts
    OMG …

    is there no way to restructure that? like
    Code:
    <h2>Cras molestie nibh nec risus fermentum consectetur.</h2>
    
    <p>Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In tincidunt nibh eu est vehicula id ornare odio placerat. Aliquam ultricies leo eget lorem consequat aliquet. Maecenas volutpat odio ut orci aliquet eleifend. Cras placerat viverra nisl vel semper. Vivamus eget velit augue. Mauris ultrices ultrices fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque nulla mauris, convallis sit amet consectetur eu, auctor quis sem. Ut viverra nunc sit amet massa rutrum cursus. Cras libero est, luctus nec faucibus at, aliquam non ante.</p>
    <p>Morbi sagittis, urna eget consequat blandit, nunc enim aliquam urna, ut vehicula turpis ante sed orci. Nam ac dolor eget orci bibendum posuere vitae ut lectus. Duis ipsum tellus, varius quis mattis sed, convallis vel leo. Sed ullamcorper dapibus purus vitae convallis. Praesent porttitor, arcu eu ornare laoreet, purus nisl venenatis orci, sit amet suscipit ipsum urna ac nisi. Etiam ac mi magna. Donec accumsan blandit est vitae rhoncus.</p>
    <p>Quisque in pretium elit. Sed adipiscing ullamcorper dolor in vehicula. Phasellus vel malesuada erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mattis erat, ut sodales velit pulvinar quis. Donec dolor mi, sodales in accumsan quis, volutpat at leo. Suspendisse congue adipiscing imperdiet. Nunc at diam ac metus tincidunt laoreet a at sem. Maecenas ac cursus diam. Nulla sit amet commodo tortor.</p>
    <p>Quisque sed neque dui, id dapibus lorem. Aenean id ante et justo fringilla placerat eget non lacus. Vivamus at eros eu nunc porttitor tempus. Nullam vulputate nibh eu augue tincidunt sed posuere arcu vestibulum. Vestibulum orci augue, gravida a tempus at, iaculis sit amet arcu. Ut sit amet neque eget leo faucibus posuere. Proin eget erat tellus, at semper ligula. Ut vitae ornare purus. In est lorem, aliquet at placerat sed, lobortis gravida erat.</p>
    <p>Proin tincidunt luctus lectus. Aliquam porta sapien vitae mi lacinia ac tristique enim posuere. Cras quis nisl vitae mi semper dapibus rhoncus et ligula. Mauris a quam at lacus gravida ultricies eget sodales dolor. In scelerisque mollis nulla. Maecenas nunc velit, bibendum sit amet elementum ac, dapibus eget ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non nisl et enim ullamcorper volutpat vitae in nibh. Nullam blandit, elit eget auctor ultrices, velit nunc pretium augue, eget rutrum libero ligula nec est. Maecenas non ornare enim.</p>
    <p>Proin aliquet, diam ut ultrices vulputate, est nunc vulputate orci, in fringilla enim augue sed odio. Maecenas mattis consectetur tristique. Praesent molestie accumsan dolor id varius. In at libero enim, vitae pretium nunc. Duis est ligula, porttitor id vulputate et, ultricies eu metus. Sed egestas pulvinar nulla. Sed ultricies felis sed massa sollicitudin at tristique mi hendrerit. Aenean sollicitudin justo non est congue ac fringilla lacus porttitor. Phasellus blandit orci vitae dolor facilisis pharetra. Aliquam pharetra tempus nunc nec venenatis. Aliquam quis dui ac enim auctor eleifend in sit amet odio. Cras consectetur massa enim. Fusce venenatis odio non nibh eleifend ultrices. Nulla facilisi. Suspendisse vitae blandit elit.</p>
    
    <h2>Aliquam erat volutpat</h2>
    <h3>Proin aliquet, diam ut ultrices vulputate, est nunc vulputate orci:</h3>
    <ol>
      <li>In est lorem <em>(Nullam blandit)</em></li>
      <li>in fringilla <em>(Nullam blandit)</em></li>
      <li>Confluence <em>(Nullam blandit)</em></li>
      <li>vulputate <em>(Nullam blandit)</em></li>
      <li>Proin aliquet <em>(Nullam blandit)</em></li>
      <li>nunc vulputate orci <em>(Nullam blandit)</em></li>
      <li>vulputate orci</li>
    </ol>
    this would make life for you much easier. and btw. <font> is a deprecated element.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    New Coder
    Join Date
    Nov 2008
    Posts
    93
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Yes fully in agreement and I would write it this way if I was handcoding it but this is the resulting html from users inputing text into an iframe and using design mode within this iframe to create w3c valid markup (even though not semantic) across browser. So imagine all the different ways browsers define font, etc.

    I didnt realise font in html is depreciated, but in a wysiwyg I cant see another easy way to change font size... Personally in my markup I use css for font.

    Yes not ideal markup but its working for what I need and its displaying correctly.

    Anyway - not a semantic html post more about how to split this wysiwyg soup up without breaking tags.

    Or to drop the wysiwyg?

    Thanks

    P.s pbcac (problem between computer and chair) - users dont seem to understand that word and wysiwyg are miles apart so this is also a result of people changing things around in the wysiwyg. I have a massive (well 26kb after compression) wysiwyg javascript I have written that performs many many checks to validate markup etc - so this is also the result of that.
    Last edited by chidge; 02-06-2010 at 10:24 AM.

  • #8
    New Coder
    Join Date
    Nov 2008
    Posts
    93
    Thanks
    12
    Thanked 0 Times in 0 Posts
    To tie up and maybe help future people wishing to cut up html a few simple changes (marked in bold) have made it work, got massively confused with this but after spending a bit of time debugging it works a treat. Ta


    Code:
    //bastardised from a function here http://www.navioo.com/php/docs/function.wordwrap.php
    //basically take a string find an END html tag and then split the string if its over the amount sepcified there - so I can split strings with html in and not break the html
    //supports all valid html tags 
    //(pretty sure this works as intended - needs looking out for across the site)
    
    
    function cut_html($str,$start,$qty){
    
    	$tag_open = '<';
    	$tag_close = '>';
    	$end_tag = '/';
    	$double_quote = "\"";
    	$single_quote = '\'';
    	$count = 0;
    	$in_tag = 0;
    	$str_len = strlen($str);
    	$segment_width = $start;
    
    for ($i=0 ; $i<=$str_len ; $i++){
    
    
    if ($str[$i] == $tag_open) {
    
      if ($in_tag == 2){ //this is an opening < for a closing tag </a>
        $in_tag--;//in_tag == 1
        $segment_width++;
      }else{
        $in_tag++; //an opening < for a tag (in_tag == 1)
        $segment_width++;
      }
    
    } elseif ($str[$i] == $double_quote) {  //to stop the / in a link (between quotes) being counted as the html end_tag  - Relys on valid xhtml (js and php checks this) (anything inside quotes is ignored)
    
      if ($in_tag == 1) { //inside of a tag
        $in_tag += 2;    //hit a starting double quote (in_tag == 3)
        $segment_width++;
      }else if ($in_tag == 3) { //closing an open double quote
        $in_tag -= 2; //closed double quote (in_tag == 1)
        $segment_width++;
      }
    			
    			
    } elseif ($str[$i] == $single_quote) { //to stop the / in a link (between quotes) being counted as the html end_tag  - Relys on valid xhtml (js and php checks this) (anything inside quotes is ignored)
    
      if ($in_tag == 1) { //inside of a tag
        $in_tag += 3;//hit a starting single quote (in_tag == 4)
        $segment_width++;
      }else if ($in_tag == 4) { //closing an open single quote
        $in_tag -= 3; //closed single quote (in_tag == 1)
        $segment_width++;
      }
    
    } elseif ($str[$i] == $end_tag) { //end tag / 
    
       if ($in_tag == 1) { //if inside of the < > tags
         $in_tag++; //in_tag == 2
         $segment_width++;
       }
    
    } elseif ($str[$i] == $tag_close) {
       if ($in_tag == 2) { //we are on the final closing tag of an element >
         $in_tag = ($in_tag -2); // in_tag == 0
         $segment_width++;
      }else if ($in_tag == 1) { //the > of the starting tag of an element <a blah... >
         $in_tag++; // in_tag == 2
         $segment_width++;
      }
    
    } else {
    
      if ($in_tag == 0) { //were not inside a html tag
    			
    	$segment_width++;
    
      if (($segment_width >= $qty) && ($str[$i] == " ")) { //if we have gone over the designated split amount ($qty) and we are on a space " " and we arnt in a html tag then split the string
    	$str = substr($str, $start, $i );
    					
      }
    }	
    }
    
    		
    	}
    return $str;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •