PDA

View Full Version : replace some parts in the document



d-machine
07-15-2008, 08:56 AM
Hi

Is it possible to replace some code parts in the document, which are not recognized as Strings?

for example:
if I want to replace this part:

<div class="blue">This should be red</div>

with this code:

<div class="red">This should be red</div>

rangana
07-15-2008, 09:06 AM
Is your end result to change the class name to blue when it's red and vice-versa? If so, you might find this basic example useful:


<script type="text/javascript">
window.onload=function()
{
var mydivs=document.getElementsByTagName('div');
for(var i=0;i<mydivs.length;i++)
{if(mydivs[i].className=='blue'||mydivs[i].className=='red')
{mydivs[i].onclick=function()
{this.className=(this.className!='blue')?'blue':'red';}
}}}
</script><div class="blue">This should be red</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="blue">This should be red</div>


Hope it keeps you going.

d-machine
07-15-2008, 09:14 AM
Hi

thank you very much.

I changed the onclick to onload

do you know why isn't it working?

rangana
07-15-2008, 09:40 AM
Not working? It is. I tested the code on IE, FF, Safari and Opera and thus works identical. Try to alert the className:


<script type="text/javascript">
window.onload=function()
{
var mydivs=document.getElementsByTagName('div');
for(var i=0;i<mydivs.length;i++)
{if(mydivs[i].className=='blue'||mydivs[i].className=='red')
{mydivs[i].onclick=function()
{this.className=(this.className!='blue')?'blue':'red';
alert(this.className);}
}}}
</script>
<div class="blue">This should be red</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="red">This should be blue</div>
<div class="blue">This should be red</div>

d-machine
07-15-2008, 10:24 AM
I know that in this way it is working :)
But I don't need this action to happen onmouseclick, only on page load

so I've tried to change the onclick to onload but it isn't working..

rangana
07-15-2008, 10:48 AM
Change to:


window.onload=function()
{
var mydivs=document.getElementsByTagName('div');
for(var i=0;i<mydivs.length;i++)
{if(mydivs[i].className=='blue'||mydivs[i].className=='red')
this.className=(this.className!='blue')?'blue':'red';}}

d-machine
07-15-2008, 10:58 AM
I really appreciate your help,
but it is not working (I've checked it on FF and on IE).

rangana
07-15-2008, 11:06 AM
Then we're not looking on the same script. Up your modification so we could fiddle on it.

codeexploiter
07-15-2008, 11:10 AM
Check the following code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.blue{
width:100px;
height:100px;
border:1px solid blue;
margin-bottom:5px;
color:blue;
font-family:Verdana;
font-size:11px;
}
.red{
width:100px;
height:100px;
border:1px solid red;
margin-bottom:5px;
color:red;
font-family:Verdana;
font-size:11px;
}
.one{
width:100px;
height:50px;
border:1px solid green;
margin-bottom:5px;
color:gray;
font-family:Verdana;
font-size:11px;
}
</style>
<script type="text/javascript">
function getElementsByClass(searchClass, node, tag){
var classElements = new Array();
if (node == null)
node = document;
if (tag == null)
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

window.onload = function(){
var els = getElementsByClass('blue',null,null);
for(var i = 0; i < els.length; i++){
els[i].className = 'red' ;
}
}

</script>
</head>
<body>
<div class="one">Class used is one</div>
<div class="one">Class used is one</div>
<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
<div class="one">Class used is one</div>
<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
</body>
</html>

Is this what you are looking for?

The getElementsByClassName function was developed by Dustin Diaz (http://www.dustindiaz.com/).

Let me know if this is what you are looking for.

d-machine
07-15-2008, 11:43 AM
Then we're not looking on the same script. Up your modification so we could fiddle on it.

Thank you very much, I still don't know why isn't it working

anyway as I said I really appreciate you help! maybe I did something worng



The code of codeexploiter is working perfect!
Thank you very very much !!

Just a question: if hypothetically, I have some dives that I need that will stay blue as they are, and I cannot define them special id/class is there a way to get those dives not by class, only by the text in them?

codeexploiter
07-15-2008, 12:09 PM
For that we have to distinguish between the elements you want to change and the elements you don't want to change using some items. For eg: consider you have a title attribute in those div that you don't want to change with a value '0'. Assuming that a title value of 0 will skip that element. Also you need to adjust the JS code I've provided according to that. Have a look at the below code. Changes highlighted:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.blue{
width:100px;
height:100px;
border:1px solid blue;
margin-bottom:5px;
color:blue;
font-family:Verdana;
font-size:11px;
}
.red{
width:100px;
height:100px;
border:1px solid red;
margin-bottom:5px;
color:red;
font-family:Verdana;
font-size:11px;
}
.one{
width:100px;
height:50px;
border:1px solid green;
margin-bottom:5px;
color:gray;
font-family:Verdana;
font-size:11px;
}
</style>
<script type="text/javascript">
function getElementsByClass(searchClass, node, tag){
var classElements = new Array();
if (node == null)
node = document;
if (tag == null)
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

window.onload = function(){
var els = getElementsByClass('blue',null,null);
for(var i = 0; i < els.length; i++){
if(!els[i].title)
els[i].className = 'red';
else if(els[i].title != '0'){
els[i].className = 'red';
}
}
}

</script>
</head>
<body>
<div class="one">Class used is one</div>
<div class="one">Class used is one</div>
<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
<div class="one">Class used is one</div>
<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
<div class="blue">Class used is blue and will be changed to red using JavaScript</div>
<div class="blue" title="0">Class used is blue and will remain unchanged</div>
<div class="blue" title="0">Class used is blue and will remain unchanged</div>
</body>
</html>


The last two div elements whose class name is 'blue' and title value is '0' will not be converted to class 'red' as they have '0' as the value of their title properties. Also you can have any other properties that can be used at this context but I felt title will do the job for at this time. You can have your own title value in other elements but make sure that the value is not equal to '0'. If it is '0' then it will not change the element class name.

Hope this is what you are looking.

d-machine
07-15-2008, 02:34 PM
Great :]

I've learnt a lot from you !

You are genius! ;)