print_r() type thing for JavaScript

Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

print_r() type thing for JavaScript

Post by Chris Corbyn »

It's not "exactly" a print_r() equivalent it will only work with arrays thus far.

I didn't write it for public use -> it was just for examining my array structures (particulary extracted from regexps) but I may add functionality for object structures later (not sure how it would work as yet).

Code: Select all

/*****************************************************************
*	Function:	write_r()
*	Usage:		write_r(mixed Array [, string `indent offset`])
*	Author:		d11wtq (http://forums.devnetwork.net/)
*	Date:		April 2005
*	Version:	1.0.0
******************************************************************/

function write_r(obj, tabs) {
	!tabs ? tabs = '' : tabs = tabs;
	if (obj.constructor == Array) { //Is Array
		document.write("Array\r\n");
		document.write(tabs+"(\r\n");
		for (var x in obj) {
			document.write(tabs+"     ["+x+"]"+" => "); //Array Key
			if (obj[x].constructor == Array) {
				write_r(obj[x], tabs+"        "); //Re-run this function
			} else {
				document.write(obj[x]+"\r\n"); //Array value
			}
		}
		document.write(tabs+")\r\n");
	} else {
		document.write(typeof(obj)+"\r\n"); //Object type otherwise
	}
}
Last edited by Chris Corbyn on Mon Dec 12, 2005 6:32 pm, edited 4 times in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Example usage:

REMOVED... phpBB went wonky. See below for more up-to-date code ;)
Last edited by Chris Corbyn on Mon Dec 12, 2005 6:33 pm, edited 2 times in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Updated.... I was bored :P

==> It'll now recurse objects.

This fascinates me running it on DOM obejcts for some reason.... Just poking around to see what's hidden in here :lol:

WARNING: Be prepared to witness your browser hang for a very long time you give it "document" or document.body, or any HUGE objects as arguments....
You have been warned ;)


The Snippet

Code: Select all

function write_r(obj, tabs)
{
	if (!tabs) tabs = '';
	
	if (typeof obj == 'object')
	{ //Is object (has properties etc)
		document.write(typeof obj + "<br />");
		
		document.write(tabs+"(<br />");
		for (var x in obj)
		{
			document.write(tabs+"&nbsp;&nbsp;&nbsp;&nbsp;["+x+"]"+" => ");
			if (typeof obj[x] == 'object')
			{
				write_r(obj[x], tabs+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"); //Recurse
			}
			else
			{
				document.write(obj[x]+"<br />"); //Value
			}
		}
		document.write(tabs+")<br />");
	}
}
An example test (Nosying into the style object of a <div> element):

Code: Select all

<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--

function write_r(obj, tabs)
{
	if (!tabs) tabs = '';
	
	if (typeof obj == 'object')
	{ //Is object (has properties etc)
		document.write(typeof obj + "<br />");
		
		document.write(tabs+"(<br />");
		for (var x in obj)
		{
			document.write(tabs+"&nbsp;&nbsp;&nbsp;&nbsp;["+x+"]"+" => ");
			if (typeof obj[x] == 'object')
			{
				write_r(obj[x], tabs+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"); //Recurse
			}
			else
			{
				document.write(obj[x]+"<br />"); //Value
			}
		}
		document.write(tabs+")<br />");
	}
}

function write_r_test()
{
	var theDiv = document.getElementById('foo');
	write_r(theDiv.style);
}

// -->
</script>
</head>
<body onload="write_r_test();">
<div id="foo" style="color: #FF0000; font-weight: bold; border: 1px solid #00FF00; background-color: #9999FF; font-size: 1.3em; float: right; clear: right;">Ding</div>
</body>
</html>
Which produces:

Code: Select all

object
(
    [0] => color
    [1] => font-weight
    [2] => border-top-width
    [3] => border-right-width
    [4] => border-bottom-width
    [5] => border-left-width
    [6] => border-top-style
    [7] => border-right-style
    [8] => border-bottom-style
    [9] => border-left-style
    [10] => border-top-color
    [11] => border-right-color
    [12] => border-bottom-color
    [13] => border-left-color
    [14] => background-color
    [15] => font-size
    [16] => float
    [17] => clear
    [length] => 18
    [cssText] => border: 1px solid rgb(0, 255, 0); color: rgb(255, 0, 0); font-weight: bold; background-color: rgb(153, 153, 255); font-size: 1.3em; float: right; clear: right;
    [getPropertyValue] => function getPropertyValue() { [native code] }
    [getPropertyCSSValue] => function getPropertyCSSValue() { [native code] }
    [removeProperty] => function removeProperty() { [native code] }
    [getPropertyPriority] => function getPropertyPriority() { [native code] }
    [setProperty] => function setProperty() { [native code] }
    [item] => function item() { [native code] }
    [parentRule] => object
        (
        )
    [azimuth] =>
    [background] => rgb(153, 153, 255)
    [backgroundAttachment] =>
    [backgroundColor] => rgb(153, 153, 255)
    [backgroundImage] =>
    [backgroundPosition] =>
    [backgroundRepeat] =>
    [border] => 1px solid rgb(0, 255, 0)
    [borderCollapse] =>
    [borderColor] => rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)
    [borderSpacing] =>
    [borderStyle] => solid solid solid solid
    [borderTop] => 1px solid rgb(0, 255, 0)
    [borderRight] => 1px solid rgb(0, 255, 0)
    [borderBottom] => 1px solid rgb(0, 255, 0)
    [borderLeft] => 1px solid rgb(0, 255, 0)
    [borderTopColor] => rgb(0, 255, 0)
    [borderRightColor] => rgb(0, 255, 0)
    [borderBottomColor] => rgb(0, 255, 0)
    [borderLeftColor] => rgb(0, 255, 0)
    [borderTopStyle] => solid
    [borderRightStyle] => solid
    [borderBottomStyle] => solid
    [borderLeftStyle] => solid
    [borderTopWidth] => 1px
    [borderRightWidth] => 1px
    [borderBottomWidth] => 1px
    [borderLeftWidth] => 1px
    [borderWidth] => 1px 1px 1px 1px
    [bottom] =>
    [captionSide] =>
    [clear] => right
    [clip] =>
    [color] => rgb(255, 0, 0)
    [content] =>
    [counterIncrement] =>
    [counterReset] =>
    [cue] =>
    [cueAfter] =>
    [cueBefore] =>
    [cursor] =>
    [direction] =>
    [display] =>
    [elevation] =>
    [emptyCells] =>
    [cssFloat] => right
    [font] =>
    [fontFamily] =>
    [fontSize] => 1.3em
    [fontSizeAdjust] =>
    [fontStretch] =>
    [fontStyle] =>
    [fontVariant] =>
    [fontWeight] => bold
    [height] =>
    [left] =>
    [letterSpacing] =>
    [lineHeight] =>
    [listStyle] =>
    [listStyleImage] =>
    [listStylePosition] =>
    [listStyleType] =>
    [margin] =>
    [marginTop] =>
    [marginRight] =>
    [marginBottom] =>
    [marginLeft] =>
    [markerOffset] =>
    [marks] =>
    [maxHeight] =>
    [maxWidth] =>
    [minHeight] =>
    [minWidth] =>
    [orphans] =>
    [outline] =>
    [outlineColor] =>
    [outlineStyle] =>
    [outlineWidth] =>
    [overflow] =>
    [padding] =>
    [paddingTop] =>
    [paddingRight] =>
    [paddingBottom] =>
    [paddingLeft] =>
    [page] =>
    [pageBreakAfter] =>
    [pageBreakBefore] =>
    [pageBreakInside] =>
    [pause] =>
    [pauseAfter] =>
    [pauseBefore] =>
    [pitch] =>
    [pitchRange] =>
    [position] =>
    [quotes] =>
    [richness] =>
    [right] =>
    [size] =>
    [speak] =>
    [speakHeader] =>
    [speakNumeral] =>
    [speakPunctuation] =>
    [speechRate] =>
    [stress] =>
    [tableLayout] =>
    [textAlign] =>
    [textDecoration] =>
    [textIndent] =>
    [textShadow] =>
    [textTransform] =>
    [top] =>
    [unicodeBidi] =>
    [verticalAlign] =>
    [visibility] =>
    [voiceFamily] =>
    [volume] =>
    [whiteSpace] =>
    [widows] =>
    [width] =>
    [wordSpacing] =>
    [zIndex] =>
    [MozAppearance] =>
    [MozBackgroundClip] =>
    [MozBackgroundInlinePolicy] =>
    [MozBackgroundOrigin] =>
    [MozBinding] =>
    [MozBorderBottomColors] =>
    [MozBorderLeftColors] =>
    [MozBorderRightColors] =>
    [MozBorderTopColors] =>
    [MozBorderRadius] =>
    [MozBorderRadiusTopleft] =>
    [MozBorderRadiusTopright] =>
    [MozBorderRadiusBottomleft] =>
    [MozBorderRadiusBottomright] =>
    [MozBoxAlign] =>
    [MozBoxDirection] =>
    [MozBoxFlex] =>
    [MozBoxOrient] =>
    [MozBoxOrdinalGroup] =>
    [MozBoxPack] =>
    [MozBoxSizing] =>
    [MozColumnCount] =>
    [MozColumnWidth] =>
    [MozColumnGap] =>
    [MozFloatEdge] =>
    [MozForceBrokenImageIcon] =>
    [MozImageRegion] =>
    [MozMarginEnd] =>
    [MozMarginStart] =>
    [MozOpacity] =>
    [MozOutline] =>
    [MozOutlineColor] =>
    [MozOutlineRadius] =>
    [MozOutlineRadiusTopleft] =>
    [MozOutlineRadiusTopright] =>
    [MozOutlineRadiusBottomleft] =>
    [MozOutlineRadiusBottomright] =>
    [MozOutlineStyle] =>
    [MozOutlineWidth] =>
    [MozOutlineOffset] =>
    [MozPaddingEnd] =>
    [MozPaddingStart] =>
    [MozUserFocus] =>
    [MozUserInput] =>
    [MozUserModify] =>
    [MozUserSelect] =>
    [opacity] =>
    [outlineOffset] =>
    [overflowX] =>
    [overflowY] =>
)
Post Reply