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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question capture text of div into object, separated into spans and unspanned content?

    I have a really weird scenario... I have a div that looks like this:

    Code:
    <div id="problematicDiv">
        This is a test
        <span class="wordGroup">word group 1</span>
        more text
        <span class="wordGroup">word group 2</span>
        last bit of text that stretches on and on
    </div>
    and I need to capture the content, so it looks like this:
    Code:
        var ungrouped, grouped;
        
        ungrouped[1] = "This is a test"; 
        ungrouped[3] = "more text"; 
        ungrouped[5] = "last bit of text that stretches on and on";
         
        grouped[2]  = "<span class="wordGroup">word group 1</span>";
        grouped[4]  = "<span class="wordGroup">word group 2</span>";
    or maybe:
    Code:
        var sections = [
                              [false, "This is a test"],
                              [true,  "<span class="wordGroup">word group 1</span>"],
                              [false, "more text"],
                              [true, "<span class="wordGroup">word group 2</span>"],
                              [false, "last bit of text that stretches on and on"]
                            ];
    The divs may contain other tags, and may not have the spans in that order, quantity or positioning. I do not want to capture any tags, except the spans with the class mentioned.

    any idea how I might go about this?

    I was thinking of writing a recursive function that gathers the part before the first span and the first span, then feeds the rest into the same function, but I can't figure out how to feed only that section of the DOM to the recursive function.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    no need for recursion, just use dom methods to massage the html structure before you harvest it:

    Code:
    <div id="problematicDiv">
        This is a test
        <span class="wordGroup">word group 1</span>
        more text
        <span class="wordGroup">word group 2</span>
        last bit of text that stretches on and on
    </div>
    
    <script>
    
    
    var div=document.createElement("div");
        div.innerHTML=problematicDiv.innerHTML;
    
    var ungrouped=[], 
        grouped=[],
        tags=div.cloneNode(true);
    
    [].slice.call(tags.querySelectorAll("span.wordGroup")).map(function(a){
      grouped.push(a.outerHTML);
      var boundry=document.createElement("br");
      a.parentNode.insertBefore(boundry, a);
      a.parentNode.removeChild(a);
    });
    
    ungrouped=tags.firstChild.innerHTML.trim().split(/\s*<br>\s*/);
    
    console.log({g: grouped, u: ungrouped}); 
    </script>

    shows:

    Code:
    {
    	"g": [
    		"<span class=\"wordGroup\">word group 1</span>",
    		"<span class=\"wordGroup\">word group 2</span>"
    	],
    	"u": [
    		"This is a test",
    		"more text",
    		"last bit of text that stretches on and on"
    	]
    }
    Last edited by rnd me; 04-18-2013 at 07:04 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    singedpiper (04-18-2013)

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can you explain how that code works? I'm having a little trouble wrapping my head around it...

    also, it seems like it does a good job of splitting (although I'm getting an error, initially), but I need to retain an index of ordering between the two types, so I know that ungrouped[1] comes before grouped[1] and that ungrouped[2] is between grouped[1] and grouped[2].

    you see, once i have identified the grouped and ungrouped sections, they have to be processed and then reassembled into a similar div.
    Last edited by singedpiper; 04-18-2013 at 08:11 PM.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by singedpiper View Post
    Can you explain how that code works? I'm having a little trouble wrapping my head around it...

    also, it seems like it does a good job of splitting (although I'm getting an error, initially), but I need to retain an index of ordering between the two types, so I know that ungrouped[1] comes before grouped[1] and that ungrouped[2] is between grouped[1] and grouped[2].
    ok, that makes sense, and it's do-able. since we need indexed output, i'll move both to a single array and stack objects instead of strings, so we can indicate that the slot is of the grouped or ungrouped kind.

    i'll add some comments to help illustrate how it works, let me know if you want me to zoom-in on any particular part.

    Code:
    <div id="problematicDiv">
        This is a test
        <span class="wordGroup">word group 1</span>
        more text
        <span class="wordGroup">word group 2</span>
        last bit of text that stretches on and on
    </div>
    
    <script>
    
    var div=document.createElement("div"); 	// creates a new temp div that we can mess-up without affecting the page
        div.innerHTML=IN.value;		// fills temp div with existing div content
       div=div.firstChild; 			// drill into the temp div wrapper to get a clone of the problematic div.
    
       var output=[],  			// a stack for the extractions
           a;          			// a current span element var to use within the loop to refer to the "current" span
    
    
    while(a=div.querySelectorAll("span.wordGroup")[0]){	// continues grabbing all span.wordGroup tags until none are left:
    
      var boundary =document.createElement("br"); 		// make a boundary to stand-in where the span was
       a.parentNode.insertBefore(boundary, a); 		// inject boundary just before span
       a.parentNode.removeChild(a); 			// remove orig span that was added to stack as a grouped slot
    
       var texts=div.innerHTML.split("<br>") 			// grabs all text to the left of extracted span
       output.push({kind: "ungrouped", value: texts[0].trim() });	// push the other text to the stack
       div.innerHTML=texts.slice(1).join("<br>");			// removes the content before the boundary and the boundary itself
       output.push({kind: "grouped", value: a.outerHTML});	     // push the span code to the stack
    
    }// next sub-element
    
     output.push({kind: "ungrouped", value: div.innerHTML.trim() }); // push the last remaining text to the stack
      
    
    console.log(output);					// view the output structure
    
    
    </script>
    shows:
    Code:
    [
    	{
    		"kind": "ungrouped",
    		"value": "This is a test"
    	},
    	{
    		"kind": "grouped",
    		"value": "<span class=\"wordGroup\">word group 1</span>"
    	},
    	{
    		"kind": "ungrouped",
    		"value": "more text"
    	},
    	{
    		"kind": "grouped",
    		"value": "<span class=\"wordGroup\">word group 2</span>"
    	},
    	{
    		"kind": "ungrouped",
    		"value": "\n    last bit of text that stretches on and on\n"
    	}
    ]

    whew, that took a bit more thought than i first realized!
    i think this is what you need, let me know if i'm wrong...
    Last edited by rnd me; 04-18-2013 at 09:09 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    singedpiper (04-19-2013)

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks for the huge help! I reworked your code to replace some of the longer parts with shorter jQuery alternatives, but your solution was straightforward and logical.

    Thanks to your help, I finally managed to finish my jSlabify plugin for jQuery. In case you were wondering, here's a demo of what you helped me build:

    http://gschoppe.com/projects/jSlabif...lslabdemo.html

    Which is now a new feature of jSlabify:

    http://gschoppe.com/projects/jSlabify/


  •  

    Posting Permissions

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