• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

javascript document.write find/replace

Hi all,

Can somebody show me how to use document.write to find/replace the html in a div?

For example, I have the following:

<div id="contactdetails">john@gmail.com</div>

I want to replace the text between the div tags.

Thanks
0
zattz
Asked:
zattz
  • 6
  • 6
  • 2
1 Solution
 
asafadisCommented:
Must it be document.write?

You could try:

document.getElementById('contactdetails').innerHTML = 'myNew@email.com';

Open in new window

0
 
Terry_focusCommented:
Here you go, you

This is done using the innerHTML of the element not document.write

References:
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
http://www.w3schools.com/jsref/jsref_replace.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
	function replace(){
		//Find the element
		var div = document.getElementById("contactdetails");
		//The innerHTML attribute holds the text inside the div
		//Using a string replace to swap @ symbol for [AT]
		var newText = div.innerHTML.replace(/@/,"[AT]");
		//Assign our new text to the div contents
		div.innerHTML = newText;
	}
</script>
</head>
<body>
	<input type="button" value="Replace" onclick="replace()" />
	<div id="contactdetails">john@gmail.com</div>
</body>
</html>

Open in new window

0
 
zattzAuthor Commented:
I want it done with document.write
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Terry_focusCommented:
Hi,

document.write will always append to the end of the body. This is the best conventional way to do it. Why must it be document.write?
0
 
asafadisCommented:
Well you can't.
"document.write" only writes on-the-spot.
0
 
zattzAuthor Commented:
Can't you load the document into a variable, do the find/replace, then document.write the variable?
0
 
zattzAuthor Commented:
Terry, my previous experience with document.write is that you can erase the entire source and rewrite it?
0
 
Terry_focusCommented:
That is a really, really long way round and very convetional but you can like so
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
	function replace(){
		var body = document.getElementsByTagName('body')[0];
		var text = body.innerHTML.replace('<div id="contactdetails">john@gmail.com</div>','<div id="contactdetails">new text</div>');
		body.innerHTML="";
		document.write(text);
	}
</script>
</head>
<body>
	<input type="button" value="Replace" onclick="replace()" />
	<div id="contactdetails">john@gmail.com</div>
</body>
</html>

Open in new window

0
 
Terry_focusCommented:
correction - un-conventional
0
 
zattzAuthor Commented:
I understand it's un-convential and a long way round. But I do have a reason.

We're getting closer, but I need to find/replace the content between the div tag. The content is not always going to be john@gmail.com, so I presume a regex is needed?
0
 
zattzAuthor Commented:
Oh, I see I can combine both your examples :)
0
 
Terry_focusCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Test Page
<script type="text/javascript">
      function replace(){
            //Get your body tag
            var body = document.getElementsByTagName('body')[0];
            //Find the start of your div
            var start = body.innerHTML.indexOf('');
            //Find the end DOES not work with nested div's
            var end = body.innerHTML.indexOf('',start);
            //Cut the end text
            var endText = body.innerHTML.substr(end);
            //Get everything up to the start of the div and the dev tag itself
            var startText = body.innerHTML.substr(0,start+''.length);
            //Create your new text
            var newText = startText+" Your new Text "+endText;
            //Whipe out whats there
            body.innerHTML='';
            //Use your document.write
            document.write(newText);
      }
</script>


      <input type="button" value="Replace" onclick="replace()" />
      john@gmail.com


 
0
 
Terry_focusCommented:
Sorry hit the button to quick, here's it cutting out the text
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
	function replace(){
		//Get your body tag
		var body = document.getElementsByTagName('body')[0];
		//Find the start of your div
		var start = body.innerHTML.indexOf('<div id="contactdetails">');
		//Find the end DOES not work with nested div's
		var end = body.innerHTML.indexOf('</div>',start);
		//Cut the end text
		var endText = body.innerHTML.substr(end);
		//Get everything up to the start of the div and the dev tag itself
		var startText = body.innerHTML.substr(0,start+'<div id="contactdetails">'.length);
		//Create your new text
		var newText = startText+" Your new Text "+endText;
		//Whipe out whats there
		body.innerHTML='';
		//Use your document.write
		document.write(newText);
	}
</script>
</head>
<body>
	<input type="button" value="Replace" onclick="replace()" />
	<div id="contactdetails">john@gmail.com</div>
</body>
</html>

Open in new window

0
 
zattzAuthor Commented:
thx
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now