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

Thanks,
RamkumarB

Hi ramkumar,

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

Regards,
R.Kamalakannan.

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

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);

__________________
Regards,
VELHARI
I am not totally useless. I can be used for a bad example

HI,

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

Thanks,
Ramkumar.B

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);

__________________
Regards,
VELHARI
I am not totally useless. I can be used for a bad example

HI Vel,
For Large HTML content it didn't work.
For ex:
For this content your code didn't work.
Thanks,
Ramkumar.B

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);

__________________
Regards,
VELHARI
I am not totally useless. I can be used for a bad example

hi Vel,
It works fine.

Thanks,
Ramkumar.B

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,
Here i give number of character 7 means each line should contains only 7 characters only including blank space.

Regards,
R.Kamalakannan.