Weird innerHTML problem

nekeno12 · #1 (**permalink**) 03-29-06, 01:18 AM

Okay, only IE kicks back an error on this script, but FireFox doesn't. Both browsers update the content just the way I intended them to, but this friggin' IE error is bugging me. Maybe one of you JavaScript guys can look further into this. The event that is triggering the error is in the innerHTML regex replacement. Go ahead and keep the code if it's useful for you, but I'd like to figure out why an error is coming back in IE.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TeaserText</title>
<script type="text/javascript" language="javascript">
function TeaserText(inputElements, collapseLength) {
	if (document.getElementById) {
		//build array of elements to update
		if (inputElements.match(/,{1,}/)) {
			var elements_array = inputElements.split(",");
		} else {
			elements_array = new Array(inputElements);
		}
		
		for (i=0;i<elements_array.length;i++) {
			//now update the innerHTML of the given element
			//name
			var thisvalue = null;
			thisvalue = document.getElementById(elements_array[i]);
			
			//convert all tags to a special tag for revert later
			//and rid of all whitespace
			var temptext = thisvalue.innerHTML;
			temptext = temptext.replace(/\r|\r\n|\t|\n/g, "");
			temptext = temptext.replace(/<(\/?)(p|b|u|i|span|div)>/g, "{$1$2}");
			//revert back syntax
			//temptext = temptext.replace(/{(\/?)(p|b|u|i|span|div)}/g, "<$1$2>");
			
			var originalLength = temptext.length;
			if (originalLength > collapseLength + 50) {
				var firstpart = temptext.substring(0,collapseLength) + '<span id="stt_moreinfo_' + elements_array[i] + '">&nbsp<a href="javascript:OpenTeaser(\'' + elements_array[i] + '\');" class="moreinfolink">(more...)</a></span>';
				var secondpart = temptext.substring(collapseLength, originalLength);
				
				//revert and send back
				temptext = firstpart.replace(/{(\/?)(p|b|u|i|span|div)}/g, "<$1$2>") + '<span id="stt_' + elements_array[i] + '" style="display:none;">' + secondpart + '</span>';
				//temptext = temptext.replace(/{(\/?)(p|b|u|i|span|div)}/g, "<$1$2>");
				thisvalue.innerHTML = temptext;
			}
		}
	}
}
function OpenTeaser(elementName) {
	
	document.getElementById('stt_moreinfo_' + elementName).style.display='none';
	
	var stt = document.getElementById('stt_' + elementName);
	stt.style.display='inline';
	stt.innerHTML = stt.innerHTML.replace(/{(\/?)(p|b|u|i|span|div)}/g, "<$1$2>");
}
</script>
</head>

<body>
<span id="collapse1">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempus  blandit metus. Cras vestibulum. Donec vehicula lectus. Ut et dui. Nunc  fringilla lacus at justo. Ut hendrerit quam eu nulla. Suspendisse odio  leo, sollicitudin quis, eleifend consectetuer, tempor ut, risus. Fusce  sem. Nullam consequat. Duis ut sem eu nunc ultricies ornare. </p>
	<p>Nullam nec nulla. Ut vulputate malesuada ante. Curabitur lacus  tellus, viverra in, commodo non, laoreet sed, nibh. Vivamus varius,  nulla id rutrum iaculis, nibh dolor cursus dui, eget facilisis est  felis egestas mi. Curabitur tincidunt. Praesent sagittis vulputate  turpis. Praesent suscipit adipiscing sem. Mauris scelerisque, velit sit  amet porttitor pharetra, nunc felis accumsan metus, non pharetra enim  sapien eu odio. Sed risus. Aliquam accumsan pharetra turpis. </p>
	<p>In tincidunt, neque ut aliquet laoreet, elit magna volutpat nulla, a  ultrices metus enim auctor risus. Curabitur porttitor aliquet lectus.  Nam vel dolor nec dolor venenatis sodales. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. Ut at lorem  eget dolor faucibus convallis. Pellentesque leo arcu, gravida non,  tempus condimentum, ornare eget, leo. Pellentesque porttitor, leo a  tristique porttitor, est diam ultricies diam, sit amet scelerisque  lacus diam sit amet diam. In felis nisl, suscipit vitae, feugiat eu,  aliquet ac, urna. Aliquam vehicula elementum odio. Sed non tortor.  Nullam blandit nonummy sem. Praesent adipiscing vehicula sapien. Nunc  iaculis, pede eu rhoncus luctus, justo tellus congue purus, a tincidunt  neque eros tincidunt nisi. </p>
	<p>Nunc consequat. Sed eros risus, commodo luctus, dapibus ullamcorper,  cursus mollis, justo. Sed ut enim eget tortor fermentum tristique. In  iaculis laoreet ipsum. Mauris nisi. Quisque lectus quam, vehicula eget,  ornare ac, malesuada eget, odio. Proin ac tellus eget diam condimentum  nonummy. Praesent fermentum. Integer purus. Aliquam congue. Nulla  vehicula lorem eu felis. Phasellus sit amet dui nec mauris ullamcorper  tincidunt. Fusce bibendum sem at ante. In tincidunt, sapien ac tempus  dapibus, dolor sem aliquet felis, sed mollis lacus risus et libero. Ut  elementum massa ut elit. Nullam nonummy viverra pede. Etiam porta odio  sed lectus. Etiam bibendum. Nam vitae lorem non ante luctus dapibus.  Integer aliquet. </p>
	<p>In laoreet. Nulla faucibus erat. Curabitur fermentum tellus suscipit  urna. Duis risus eros, interdum eu, fermentum id, pharetra eget,  libero. Ut vulputate semper nunc. Etiam placerat pellentesque massa.  Cras pharetra auctor felis. Nulla interdum laoreet erat. Curabitur eget  sapien. Aliquam luctus risus ut nisl. Mauris dui nunc, dignissim a,  iaculis id, egestas vitae, odio. Sed at augue a risus dapibus eleifend.  Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Pellentesque habitant morbi tristique senectus  et netus et malesuada fames ac turpis egestas. In hac habitasse platea  dictumst. Nam mauris lorem, ultrices id, imperdiet eget, porttitor ut,  libero. Praesent fringilla nibh vel elit. </p>
</span>
<script language="javascript" type="text/javascript">
if(typeof TeaserText == "function") {
	TeaserText('collapse1', 400);
};
</script>
</body>
</html>

TwoD · #2 (**permalink**) 03-29-06, 04:15 AM

Actually, the text isn't reverted back correctly in Internet Explorer, or any other browser, because the RegExp:s don't math anything. You have the <p> tags as <P>, but you are only searching for lowercase characters. Fixing this by doing /gi everywhere correctly escapes and reverts the text in FireFox, but it fails in IE.

I'm not sure why this happens...
What I've found so far is that it has somehting to do with outputting HTML tags into that specific span. If you try to output normal text (by either not reverting the tags, or by simply typing something else) it outputs correctly. But as soon as one or more HTML tags are included, it fails.
I tried to output the same contents to another span and it worked. But I can't find out why it doesn't work with stt.innerHTML...

nekeno12 · #3 (**permalink**) 03-29-06, 01:28 PM

Okay,

I've rewritten the script a bit, and used W3C DOM for the OpenTeaser function. The problem now, is the text in the textNode is parsed as literal text with escaped HTML tags.

Does anyone now how to appendChild to a node without it parsing text literally and parse the string with the HTML included?

Here's the new code:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TeaserText</title>
<script type="text/javascript" language="javascript">
function TeaserText(inputElement, collapseLength) {
	if (document.getElementById(inputElement)) {
		//assign element to variable
		var docObject = document.getElementById(inputElement);
		
		//copy innerHTML to a temp variable
		var temptext = docObject.innerHTML;
			//remove whitespace
			temptext = temptext.replace(/\r|\r\n|\t|\n/g, "");
			//convert all tags to temporary special tags
			temptext = temptext.replace(/\<(.*?)\>/gi, "{$1}");
		
		//only use TeaserText if the length is long enough
		var originalLength = temptext.length;
		if ( originalLength > (collapseLength + 50) ) {
			//assign the teaser text to firstpart variable
			var firstpart = temptext.substring(0,collapseLength) + '<span id="stt_moreinfo_' + inputElement + '">&nbsp<a href="javascript:OpenTeaser(\'' + inputElement + '\');" class="moreinfolink">(more...)</a></span>';
			//assign the remaining text to secondpart variable (hidden span)
			var secondpart = temptext.substring(collapseLength, originalLength);
			
			//revert special tags, hide secondpart and assign back to docObject.innerHTML
			temptext = firstpart.replace(/\{(.*?)\}/gi, "<$1>") + '<span id="stt_' + inputElement + '" style="display:none;">' + secondpart + '</span>';
			docObject.innerHTML = temptext;
		}
	}
}
function OpenTeaser(elementName) {
	//hide (more info...) button
	document.getElementById('stt_moreinfo_' + elementName).style.display='none';
	
	//convert special tags back and show secondpart
	var stt = document.getElementById('stt_' + elementName);
	//save stt innerHTML to temptext and then reassign
	var temptext = stt.firstChild.nodeValue;
		temptext = temptext.replace(/\{(.*?)\}/gi, "<$1>");
		
	//show stt
	stt.style.display='inline';
	//assign temptext to innerHTML
	stt.removeChild(stt.childNodes[0]);
	var x = document.createTextNode(temptext);
	stt.appendChild(x);
}
</script>
</head>

<body>
<span id="collapse1">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempus  blandit metus. Cras vestibulum. Donec vehicula lectus. Ut et dui. Nunc  fringilla lacus at justo. Ut hendrerit quam eu nulla. Suspendisse odio  leo, sollicitudin quis, eleifend consectetuer, tempor ut, risus. Fusce  sem. Nullam consequat. Duis ut sem eu nunc ultricies ornare. </p>
	<p>Nullam nec nulla. Ut vulputate malesuada ante. Curabitur lacus  tellus, viverra in, commodo non, laoreet sed, nibh. Vivamus varius,  nulla id rutrum iaculis, nibh dolor cursus dui, eget facilisis est  felis egestas mi. Curabitur tincidunt. Praesent sagittis vulputate  turpis. Praesent suscipit adipiscing sem. Mauris scelerisque, velit sit  amet porttitor pharetra, nunc felis accumsan metus, non pharetra enim  sapien eu odio. Sed risus. Aliquam accumsan pharetra turpis. </p>
	<p>In tincidunt, neque ut aliquet laoreet, elit magna volutpat nulla, a  ultrices metus enim auctor risus. Curabitur porttitor aliquet lectus.  Nam vel dolor nec dolor venenatis sodales. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. Ut at lorem  eget dolor faucibus convallis. Pellentesque leo arcu, gravida non,  tempus condimentum, ornare eget, leo. Pellentesque porttitor, leo a  tristique porttitor, est diam ultricies diam, sit amet scelerisque  lacus diam sit amet diam. In felis nisl, suscipit vitae, feugiat eu,  aliquet ac, urna. Aliquam vehicula elementum odio. Sed non tortor.  Nullam blandit nonummy sem. Praesent adipiscing vehicula sapien. Nunc  iaculis, pede eu rhoncus luctus, justo tellus congue purus, a tincidunt  neque eros tincidunt nisi. </p>
	<p>Nunc consequat. Sed eros risus, commodo luctus, dapibus ullamcorper,  cursus mollis, justo. Sed ut enim eget tortor fermentum tristique. In  iaculis laoreet ipsum. Mauris nisi. Quisque lectus quam, vehicula eget,  ornare ac, malesuada eget, odio. Proin ac tellus eget diam condimentum  nonummy. Praesent fermentum. Integer purus. Aliquam congue. Nulla  vehicula lorem eu felis. Phasellus sit amet dui nec mauris ullamcorper  tincidunt. Fusce bibendum sem at ante. In tincidunt, sapien ac tempus  dapibus, dolor sem aliquet felis, sed mollis lacus risus et libero. Ut  elementum massa ut elit. Nullam nonummy viverra pede. Etiam porta odio  sed lectus. Etiam bibendum. Nam vitae lorem non ante luctus dapibus.  Integer aliquet. </p>
	<p>In laoreet. Nulla faucibus erat. Curabitur fermentum tellus suscipit  urna. Duis risus eros, interdum eu, fermentum id, pharetra eget,  libero. Ut vulputate semper nunc. Etiam placerat pellentesque massa.  Cras pharetra auctor felis. Nulla interdum laoreet erat. Curabitur eget  sapien. Aliquam luctus risus ut nisl. Mauris dui nunc, dignissim a,  iaculis id, egestas vitae, odio. Sed at augue a risus dapibus eleifend.  Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Pellentesque habitant morbi tristique senectus  et netus et malesuada fames ac turpis egestas. In hac habitasse platea  dictumst. Nam mauris lorem, ultrices id, imperdiet eget, porttitor ut,  libero. Praesent fringilla nibh vel elit. </p>
</span>
<script language="javascript" type="text/javascript">
if(typeof TeaserText == "function") {
	TeaserText('collapse1', 400);
};
</script>
</body>
</html>