SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Associating a dot(flag) with and array?

    Hi there, (Note: That's an array. No wonder I have problems with my scripting.)

    I'm trying to breakdown a string

    example

    "<p>Number 1 Paragraph</p><b>This is Bold</b><br>Some more Text<p>Number 2 Paragraph</p>"
    With regexp = /<\/?p>|<\/?b>|<br>/gi; and match() I can make an array. That's fine.

    Then with regexp = /<\//gi; I can identify the start and end tags. Again fine.

    What I was hoping to do was add some sort of flag to the array.

    So if my tagType array ended up looking like ("<p>","</p>","<b>","</b>"....)

    To then add

    tagType [0].flag = "Start"
    tagType [1].flag = "End"
    tagType [2].flag = "Start"
    tagType [3].flag = "End"

    I've spent hours hunting around, but can't really find an answer.

    Is the only solution to use a multi dimension array like this instead?

    tagType [0][1] = "Start"
    tagType [1][1] = "End"
    tagType [2][1] = "Start"
    tagType [3][1] = "End"

    Any pointers or links would be appreciated.

    Thanks.

    RLM2008

    oh can I also ask is there anything wrong with creating functions like this to save on typing?

    Code:
    function getID(id){return document.getElementByID(id);}
    function makeText(txt) {return document.CreateTextNode(txt)}
    
    var paraID = getID("Paragraph1");

  2. #2
    SitePoint Enthusiast Dharma's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could have tagType be an array filled with object literals, not sure if that's what you're looking for.

    As to your function shorthands, sure, that seems fine.
    <samsara>You are here.</samsara>

  3. #3
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could have tagType be an array filled with object literals, not sure if that's what you're looking for.
    It could be Dharma, I'll look into it. Cheers

    RLM2008

  4. #4
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a simple test :
    Code:
    <html>
    <head>
       <title>Test</title>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
       <style type="text/css">
       </style>
    </head>
    <body> 	
       <script type="text/javascript">
       var flag = true;
       var aS = [
          "blah",
          "bleh",
          "blih",
          "bloh",
          "bluh"
       ];
       var aO = [
          {},
          {},
          {},
          {},
          {}
       ];
       for (var i=0, imax=aS.length; i<imax; i++) {
          flag = !flag;
          aS[i].flag = flag;
          aO[i].flag = flag;
       }
       for (var i=0, imax=aS.length; i<imax; i++) {
          alert(aS[i] +'/'+ aO [i] +' - '+ aS[i].flag +'/'+ aO[i].flag);
       }
       </script>
    </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks bbpublic,

    I've just ammended your code and by the looks of it thanks to your help found what I'm looking for. Using the square brackets aO[i] = [aS[i]]; seems to have done the trick. A bit of a fluke

    Edit: Got to ask now. What are the square brackets doing? Are they making it associative?

    nice one.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
     <script type="text/javascript">
       var flag = true;
       var aS = [
          "blah",
          "bleh",
          "blih",
          "bloh",
          "bluh"
       ];
       var aO = [
          {},
          {},
          {},
          {},
          {}
       ];
       for (var i=0; i<aS.length ; i++) { //imax=aS.length;
          flag = !flag;
          aO[i] = [aS[i]];
    	  aO[i].flag = flag;
       }
       for (var i=0; i<aS.length; i++) {
          alert(aO[i]+' - '+aO[i].flag);
       }
       </script>
    
    </head>
    
    <body>
    </body>
    </html>
    RLM2008

  6. #6
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not so good in javascript, so if I say something wrong, I hope somebody will corrct me.

    First of all,
    [] = Array
    {} = Object

    When you try something like this : tagType [0].flag it means you try to add a property to the content of tagType at the index 0. If this content is a String object, apparently you must prototype it to add a property (am I right?).

    If you want to add a property with this syntax tagType [0].flag the content of tagType [0] must be an object (remember that : {}?)

    Actually, what you've done is pretty much what Dharma advised to you. But you just put an array in an another array of length 1. It will be better I think if you do something like this :
    aO[i] = {"tag":aS[i], "flag":"Start"}
    you'll create an array of objects. These objects have two properties "tag" and "flag" and you can use htem as associative arrays.

  7. #7
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd wondered about the {}. That makes sense.

    Actually, what you've done is pretty much what Dharma advised to you
    I didn't have time to look, as I was trying to figure something else. I had the feeling that might have been the case

    String object, apparently you must prototype
    i looked into prototype.

    As far as I could tell, you could do

    Array.prototype.flag = "whatever"

    however you couldn't do

    ArrayA [0].flag ="whatever";
    ArrayA [1].flag ="Something Different";

    you could do

    ArrayA [0].flag ="whatever";
    ArrayB [0].flag ="Something Different";

    In other words one flag per array instance, not array index.

    If you want to add a property with this syntax tagType [0].flag the content of tagType [0] must be an object (remember that : {}?)

    aO[i] = {"tag":aS[i], "flag":"Start"}
    This is an object with two properties "tag" and "flag" and you can use it as an associative array.
    That's great bbpublic, thanks.

    RLM2008

  8. #8
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Deleted....................................

    RLM2008
    Last edited by RLM2008; Dec 4, 2008 at 11:01.

  9. #9
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New to the Forum, so not sure if it's taking the p*ss posting a script like this, rather than just a one liner. Apologies ahead

    After briefly trying to get to grips with the Dom as an alternative to document.write, I wanted to see if I could come up with an alternative to innerHTML. It's a long way off I know and doesn't account for the multitude of tags and attributes, but just wanted to know if I'm heading in the right direction. My knowledge is pretty limited I have to say.

    Any thoughts, if you can be bothered, would be appreciated. By the way it's just for fun and a bit of a learning exercise. Edit: (off to read stickies. Really should have done that before)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    function docLoad()
    {
    //************************* Dom Shortcuts ***************************
    	function getID(id) {return document.getElementById(id);}
    	function getTag(tag) {return document.getElementsByTagName(tag);}
    	function makeElem(tagNM) {return document.createElement(tagNM);}
    	function makeText(txt) {return document.createTextNode(txt);}
    //*******************************************************************	
    	
    	var strg= "<p><b>Number 1 Paragraph is Bold</b><br>Some more Text</p><p>Number 2 Paragraph</p>";
    	
    	var regexp = /<\/?p>|<\/?b>|<br>/gi;
    	var tagEnd = /<\//gi;
    	var tagSymb = /<\/?|>/gi;
    	var strgMch = strg.match (regexp);
    	var start = 0;
    	var textArr = []; // Array
    	var tagArr = {}; // Object
    	var tagWrapStart = [];
    	var tagWrapEnd = [];
    	var txt = "";
    
    //*******************************************************************
    		
    //****************** Stripping out the Text Sections ***********************		
    		for (var i=0; i<strgMch.length ; i++)
    		{
    //      --------- Populate the Tag Object Array -----------------	
    		tagArr[i] = {"tag":strgMch[i], "flag":(strgMch[i].match (tagEnd))? false : true}
    		tagArr[i].tag = tagArr[i].tag.replace (tagSymb,"");//strip symbols leaving just letters
    //      --------------------------------------------------------
    		
    		var currTag = strgMch[i];
    		var currTagLg = strgMch[i].length;
    		var currTagPos = strg.indexOf(strgMch[i],start);
    		var nextPos = currTagPos+currTagLg;
    		var nextTag = strg.indexOf(strgMch[i+1],nextPos);
    		var txt = strg.slice (nextPos,[nextTag]);
    	
    			if  ((nextPos != nextTag)&(!!txt))
    			{
    			textArr.push (txt)
    			}
    		start = nextPos;
    		
    		}
    //********************** Check Nest ****************
       	
    	for (var i = 0; i<strgMch.length ; i++)
    	{
    		if (tagArr[i].flag) 
    		{   
    			tagWrapStart.push(i);
    //          -------- Now Check for Tag End Wrap--------			
    			if (tagArr[i].tag != "br")
    	  		{
    			for (var x = i; x<strgMch.length ; x++)
    	   			{
    					if (tagArr[i].tag == (tagArr[x].tag)&(!tagArr[x].flag))
    					{
    					tagWrapEnd.push (x); x=(strgMch.length+10); // Add End Wrap to Array and Quit Loop
    					}  
    	   			}
    			}
    			else
    			{tagWrapEnd.push (null)} // if <br>
    		}
    	}
    //********************** Check Nest End	****************	
    
    //********************** Send Data to Screen for Debug ***********
    	var idTag = getID("Here");
    	var text = makeText(strg);
    	idTag.appendChild (text);
    	
    	var newElem = makeElem("br")
    	idTag.appendChild (newElem);
    	
    	for (var i = 0; i<strgMch.length ; i++)
    	{
    
    	var newElem = makeElem("br")
    	idTag.appendChild (newElem);
    	
    	var text = makeText((i)+". "+tagArr[i].tag+" - "+tagArr[i].flag);
    	idTag.appendChild (text);
    	}
    //-----
    
    	for (var i = 0; i<textArr.length ; i++)
    	{
    	document.write ("<br>"+(i)+". "+textArr[i]);
    	}
    	
    	document.write ("<p>"+"Tag Relationship"+"<br>")
    	for (var i=0 ; i<tagWrapStart.length ; i++)
    	{
    		document.write ("<br>"+tagArr[tagWrapStart[i]].tag+" "+(tagWrapStart[i])+" <---> "+(tagWrapEnd[i]));
    	}
    //********************** Debug End ********************
    }
    //-->
    </script>
    <!--*******************************************************************************************-->
    
    </head>
    
    <body>
    <b id="Here"></b>
    <script type="text/javascript">
    <!--
    docLoad();
    //-->
    </script>
    
    </body>
    </html>
    Example debug results

    <p><b>Number 1 Paragraph is Bold</b><br>Some more Text</p><p>Number 2 Paragraph</p>

    0. p - true
    1. b - true
    2. b - false
    3. br - true
    4. p - false
    5. p - true
    6. p - false

    0. Number 1 Paragraph is Bold
    1. Some more Text
    2. Number 2 Paragraph

    Tag Relationship

    p 0 <---> 4
    b 1 <---> 2
    br 3 <---> null
    p 5 <---> 6
    Cheers

    RLM2008


Bookmarks

Posting Permissions

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