How to do wordwrap the HTML content using javascript?

ramkumaraol · #1 11-14-2007, 02:49 AM

HI,
How to do wordwrap the HTML content using javascript?

Thanks,
RamkumarB

Kamalakannan · #2 11-14-2007, 03:54 AM

Hi ramkumar,

I am can't get your question can u tell me exactly what you want?

Regards,
R.Kamalakannan.

ramkumaraol · #3 11-14-2007, 09:41 PM

HI Kamal,

For example :
If there is a word like:
Discuss web

I need to wrap for 6 characters. So it should be

Discuss
web

Thanks,
Ramkumar.B

velhari · #4 11-17-2007, 12:21 AM

Hi, the follwing script will helps you...

HTML Code:

<div id="divElem"> <p>Discuss Web</p> </div>

Code:

function MakeWrapOnText(pmContent, Break)
{
	vRes = pmContent.split(/ /g);
	for ( vLoop=0; vLoop<vRes.length; vLoop++ )
	{
		vLength  = vRes[vLoop].length;
		if ( vLength < Break ) continue;
		vStart = 0;
		vTemp  = '';	
		vEnd    = Break;			
		while ( true )
		{
			vTemp   += vRes[vLoop].substring(vStart,vEnd);
			vTemp   += '<br>';
			vStart  = vEnd+1;
			vEnd    = vEnd+Break;
			if ( vStart > vLength ) break;
		}
		vRes[vLoop] = vTemp;	
	}
	WrapContent = vRes.join(" ");
	return WrapContent;
}

function wordwrap(Id, Break)
{
	var vId = document.getElementById(Id);
	oParent = vId;
	while(true)
	{
		if ( oParent ==  null ) break;
		GrandChild = oParent.firstChild;
		RemRefNode = oParent;
		WrappedContent = '';
		if ( GrandChild != null )
		{
			if ( GrandChild.nodeName == "#text" )
			{
				WrappedContent += MakeWrapOnText(GrandChild.nodeValue, Break );
				RemRefNode.removeChild(GrandChild);
				vArray = WrappedContent.split(/\<br\>/gi );
				vSpan = document.createElement('span');
				for(vLoop=0;vLoop<vArray.length; vLoop++)
				{
						vSpan.appendChild(document.createTextNode(vArray[vLoop]));
						vSpan.appendChild(document.createElement("<br>"));
				}
				RemRefNode.appendChild(vSpan);
				oParent 	    = RemRefNode.nextSibling;
			}
			else oParent = GrandChild;
		}
		else break;
	}
}

Code:

wordwrap('divElem',7);

ramkumaraol · #5 11-17-2007, 12:42 AM

HI,

It breaks HTML Tags.I need wrap the content without breaking html tags.

Thanks,
Ramkumar.B

velhari · #6 11-18-2007, 10:08 PM

Hi Ramkumar,

I notice that while executing that script, if there is any anchor tag present means, it breaks the URL. Now i modified according to that.....

HTML Code:

<div id="divElem"> <a href="http://www.discussweb.com">Discuss Web</a> </div>

Code:

function MakeWrapOnText(pmContent, Break)
{
	vRes = pmContent.split(/ /g);
	for ( vLoop=0; vLoop<vRes.length; vLoop++ )
	{
		vLength  = vRes[vLoop].length;
		if ( vLength < Break ) continue;
		vStart = 0;
		vTemp  = '';	
		vEnd    = Break;			
		while ( true )
		{
			vTemp   += vRes[vLoop].substring(vStart,vEnd);
			vTemp   += '<br>';
			vStart  = vEnd+1;
			vEnd    = vEnd+Break;
			if ( vStart > vLength ) break;
		}
		vRes[vLoop] = vTemp;	
	}
	WrapContent = vRes.join(" ");
	return WrapContent;
}

Code:

function wordwrap(Id, Break)
{
	var vId = document.getElementById(Id);
	oParent = vId;
	while(true)
	{
		if ( oParent ==  null ) break;
		GrandChild = oParent.firstChild;
		RemRefNode = oParent;
		WrappedContent = '';
		if ( GrandChild != null )
		{
			if ( GrandChild.nodeName == "#text" )
			{
				WrappedContent += MakeWrapOnText(GrandChild.nodeValue, Break );					
				oParentText = GrandChild.parentNode;
				if ( (oParentText.nodeName).toUpperCase() == "A" )
				{
					GrandParent = oParentText.parentNode;
					vHref = oParentText.getAttribute("href");
					vAnchor = 1;
				}
				else
					vAnchor = 0;
				RemRefNode.removeChild(GrandChild);
				vArray = WrappedContent.split(/\<br\>/gi );			
				vSpan = document.createElement('span');
				for(vLoop=0;vLoop<vArray.length; vLoop++)
				{
					if ( vAnchor == 1 && vLoop == 0)
					{
						vSpan.appendChild(document.createTextNode(vArray[vLoop]));
						RemRefNode.appendChild(vSpan);
					}
					else if ( vAnchor == 1 && vLoop!= 0 )
					{
						oBreak  = document.createElement("<br>");
						oAnchor = document.createElement("A");
						oAnchor.href = vHref;		oAnchor.appendChild(document.createTextNode(vArray[vLoop]));
						GrandParent.appendChild(oBreak);
						GrandParent.appendChild(oAnchor);
					}
					else
					{						 vSpan.appendChild(document.createTextNode(vArray[vLoop]));							vSpan.appendChild(document.createElement("<br>"));
					}
				}
			        if ( vAnchor == 0 )
				     RemRefNode.appendChild(vSpan);
			        oParent 	    = RemRefNode.nextSibling;
			}
			else oParent = GrandChild;
		}
		else break;
	}
}

Code:

wordwrap('divElem',7);

ramkumaraol · #7 11-19-2007, 03:03 AM

HI Vel,
For Large HTML content it didn't work.
For ex:

Code:

 <div id="divElem">
	<h2 class="r"><a href="http://www.seio.es/test/" class="l" onmousedown="return clk(this.href,'','','res','5','')"><strong>TEST</strong> Magazine - Home</a></h2><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td class="j"><font size="-1"><strong>TEST</strong> is an international journal of Statistics and Probability which is published in English by SPRINGER and sponsored by SEIO (the Spanish Society of <strong>...</strong><br /><span class="a">www.seio.es/<strong>test</strong>/ - 4k - </span><a href="http://72.14.235.104/search?q=cache:nUCOdgJ9bXcJ:www.seio.es/test/ test&amp;hl=en&amp;ct=clnk&amp;cd=5&amp;gl=in" class="fl">Cached</a> - <a href="http://www.google.co.in/search?hl=en&amp;q=related:www.seio.es/test/" class="fl">Similar pages</a></font></td></tr></tbody></table>
 </div>
wordwrap('divElem',7);

For this content your code didn't work.
Thanks,
Ramkumar.B

velhari · #8 11-22-2007, 12:38 AM

Hi Ram,

I hope that the following re-modified(from the above scripts) script will wrap the html content regardless of length it having.

HTML Code:

<div id="divElem"> <h2 class="r"><a href="http://www.seio.es/test/" class="l" onmousedown="return clk(this.href,'','','res','5','')"><strong>TEST</strong> Magazine - Home</a></h2><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td class="j"><font size="-1"><strong>TEST</strong> is an international journal of Statistics and Probability which is published in English by SPRINGER and sponsored by SEIO (the Spanish Society of <strong>...</strong><br /><span class="a">www.seio.es/<strong>test</strong>/ - 4k - </span><a href="http://72.14.235.104/search?q=cache:nUCOdgJ9bXcJ:www.seio.es/test/ test&amp;hl=en&amp;ct=clnk&amp;cd=5&amp;gl=in" class="fl">Cached</a> - <a href="http://www.google.co.in/search?hl=en&amp;q=related:www.seio.es/test/" class="fl">Similar pages</a></font></td></tr></tbody></table> </div>

Code:

function MakeWrapOnText(pmContent, Break)
{
	vRes = pmContent.split(/ /g);
	for ( vLoop=0; vLoop<vRes.length; vLoop++ )
	{
		vLength  = vRes[vLoop].length;
		if ( vLength < parseInt(Break) ) continue;
		vStart = 0;
		vTemp  = '';	
		vEnd    = Break;			
		while ( true )
		{
			vTemp   += vRes[vLoop].substring(vStart,vEnd);
			vStart  = vEnd;
			if ( vStart > vLength ) break;
			vTemp   += '<br>';				
			vEnd    = vEnd+Break;
		}
		vRes[vLoop] = vTemp;	
	}
	WrapContent = vRes.join(" ");		
	if ( vRes.length == 1 ) WrapContent += " ";		
	return WrapContent;
}

Code:

function wordwrap(Id, Break)
{
	var vId = document.getElementById(Id);
	oParent = vId;
	ParentNode = [];
	ChildNode  = [];
	ParentNode.push(vId);
	while(true)
	{
		vLen = ParentNode.length-1;
		popvalue = ParentNode[vLen];
		if ( popvalue == null ) break;
		childs = popvalue.childNodes;														
		for ( key=0; key<childs.length; key++)
		{
			if ( childs[key] != null )
				ChildNode.push(childs[key]);					
		}
		refParent = ParentNode.pop();
		while( (nde=ChildNode.pop())!= null )
		{
			if ( nde.nodeName == "#text" )
			{
				if ( refParent == null ) continue;
				if ( nde.nodeValue.length <=1 ) if ( (nde.nodeValue).match(/ /g) ) continue;
				WrappedContent = MakeWrapOnText(nde.nodeValue, Break );
				vArray = WrappedContent.split(/\<br\>/gi );										
				if ( WrappedContent.match(/\<br\>/gi) ) putBreak=1;
				else putBreak=0;
				vSpan = document.createElement('span');										          for(tempInner=0;tempInner<vArray.length; tempInner++)
				{
						 vSpan.appendChild(document.createTextNode(vArray[tempInner]));
					if ( putBreak )							                                                               vSpan.appendChild(document.createElement("br"));						
				}
				refParent.insertBefore(vSpan, nde);
				refParent.removeChild(nde);
			}
			else if ((nde.nodeName).toUpperCase() == "A" ) 
			{
				refAnc = ParseAnchorNode(nde, Break);
				refParent.insertBefore(refAnc, nde);
				refParent.removeChild(nde);					
			}
			else
				ParentNode.push(nde);			
		}
	}
}

Code:

function ParseAnchorNode( AnchorNode , Break)
{
	oRefAnchor = AnchorNode;
	vHref      = oRefAnchor.getAttribute("href");
	WrappedContent = '';
	anchorChilds = oRefAnchor.childNodes;
	vSpan = document.createElement('span');
	for ( vInnerLoop=0; vInnerLoop<anchorChilds.length; vInnerLoop++ )
	{
		refAnchorChild = anchorChilds[vInnerLoop];
		if ( refAnchorChild.nodeName == "#text" )
		{
			WrappedContent = MakeWrapOnText(refAnchorChild.nodeValue, Break);
			vArray = WrappedContent.split(/\<br\>/gi );
			if ( WrappedContent.match(/\<br\>/gi) ) putBreak=1;
			else putBreak=0;
			for(vLoop2=0;vLoop2<vArray.length; vLoop2++)
			{
				oAnchor = document.createElement("A");
				oAnchor.href = vHref;
				oAnchor.appendChild(document.createTextNode(vArray[vLoop2]));
				vSpan.appendChild(oAnchor);
				oBreak  = document.createElement("br");
				if ( putBreak )
					vSpan.appendChild(oBreak);
			}				
		}
		else
		{
			tempAnchor = refAnchorChild;
			ExtraNodes = document.createElement(tempAnchor.nodeName);
			tempchild = tempAnchor.firstChild;
			while( tempchild.nodeType != 3 )
			{
				subExtraNodes = document.createElement(tempchild.nodeName);
				ExtraNodes.appendChild(subExtraNodes);
				tempchild = tempchild.firstChild;
			}
			WrappedContent = MakeWrapOnText(tempchild.nodeValue, Break);
			vArray = WrappedContent.split(/\<br\>/gi );				
			if ( WrappedContent.match(/\<br\>/gi) ) putBreak=1;
			else putBreak=0;
			for(vLoop1=0;vLoop1<vArray.length; vLoop1++)
			{
				oAnchor = document.createElement("A");
				oAnchor.href = vHref;
				oAnchor.appendChild(document.createTextNode(vArray[vLoop1]));
				ExtraNodes.appendChild(oAnchor);
				if ( putBreak )
				{
					oBreak  = document.createElement("br");
					ExtraNodes.appendChild(oBreak);
				}
			}
			vSpan.appendChild(ExtraNodes);
		}
	}
	return vSpan;		
}

Code:

wordwrap('divElem',7);

ramkumaraol · #9 11-22-2007, 01:24 AM

hi Vel,
It works fine.

Thanks,
Ramkumar.B

Kamalakannan · #10 11-22-2007, 06:12 AM

Hi vel,

Excellent your code and i need small modification in your code.
I think actually wordwrap means,
Wraps a string to a given number of characters
But in your code not break the line after what i gave the number of characters.

For example,

Code:

wordwrap('divElem',7);

Here i give number of character 7 means each line should contains only 7 characters only including blank space.

Regards,
R.Kamalakannan.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Basics Of HTML, JavaScript And CSS Writing.	paulcage	HTML, CSS and Javascript Coding Techniques	4	09-16-2009 07:39 PM
how to assign html Content to RichText as a Normal Text?	poornima	ASP and ASP.NET Programming	3	03-10-2008 02:15 AM
How to do wordwrap the HTML content using javascript?	ramkumaraol	PHP Programming	0	11-14-2007 03:01 AM
HTML and Javascript in email	Anand	PHP Programming	0	07-19-2007 03:28 AM
How to create html from the content of the textbox?	Balasubramanian.S	C# Programming	4	03-29-2007 07:30 AM