JavaScript Forum

**hpdp** · 03-24-2010, 11:56 AM

Hi, I have a web page which displays a article. Some of the words in the article are highlighted in different colors depending on
how important they are.

Now, I need to select some words, and click a button on the page, to change the color of those words into different color.

Can anyone give me some idea how to approach this? I googled, but didn't find any information on this problem.

Thanks!!!!

**chrishirst** · 01:22 PM

and do these colours need to change for ALL viewers or just the local client

**paul.h** · 03-27-2010, 12:59 PM

You can use jQuery to do this:

http://api.jquery.com/addClass/

HTML:

HTML Code:

<p>This are <span class="highlight">special</span> words that are  <span class="highlight">highlighted</span></p>

<p><input type="submit" value="Change color" class="change" /></p>

jQuery:

HTML Code:

$(".change").click(function () {
      $(".highlight").addClass("newcolor");
      return false;
});

CSS:

HTML Code:

.highlight{background:blue}
.newcolor{background:yellow}

**indyonline** · 04-06-2010, 03:04 PM

Pauls reply should fix it. Or you should be able to find the code thats already doing it and use it again and change the colors. might have to create another CSS style

**hpdp** · 03:03 PM

Hi, I have a page. When an user select a word and click a button. The color of the selected word will change to different color. But the problem is I only want to change the color of the selected word instead of all the same words through the whole page.
My example code is:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>highlight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="javascript" type="text/javascript">
function findText(snippet) {

var userSelectedRange = document.selection.createRange();
var selectedText = userSelectedRange.text
var selectedHtmlText = userSelectedRange.htmlText;
var replaceText = '<span class="'+snippet+'">'+selectedText+'</span>';

var newSourceCode, count=0;
newSourceCode= document.body.innerHTML;
re = new RegExp(selectedHtmlText, "gi");
newSourceCode= newSourceCode.replace(re,replaceText);
document.body.innerHTML = newSourceCode;
}
</script>

<style type="text/css">
.highlight {
background:#ff0;
color#00f;
}
.blue {
color:blue;
}
.red {
color:red;
}
.orange {
color: orange;
}
.purple {
color: purple;
}
</style>

</head>
<body>
<form action="" method="" name="form1">
<div>
        <button type="button" id="red" value="red" onclick="findText(document.getElementById('red').value)">red</button>&nbsp;&nbsp;
        <button type="button" id="blue" value="blue" onclick="findText(document.getElementById('blue').value)">blue</button>

</div>
</form>
<br>A <span class="orange">strain</span> of <span class="red">Stachybotrys</span> <span class="orange">chartarum</span> was <span class="blue">recently</span> <span class="or
ange">isolated</span> from the <span class="orange">lung</span> of a <span class="purple">patient</span> in <span class="orange">Texas</span> .
<br>A <span class="orange">strain</span> of <span class="red">Stachybotrys</span> <span class="orange">chartarum</span> was <span class="blue">recently</span> <span class="or
ange">isolated</span> from the <span class="orange">lung</span> of a <span class="purple">patient</span> in <span class="orange">Texas</span> .
</body></html>

When I select 'strain' of the first sentence, then click the button 'red'. I only want the color of that word changes. But 'strain' from the 2nd sentence also changes color. (the code only works at IE browser)
How do I solve this problem? I appreciate any suggestions!
Thanks!

**hpdp** · 04-09-2010, 01:21 PM

Hi, I have a web page. I can select a word and change the color of that word. But
the problem is when I view the source of that page from the browser, I still
see the original html source code instead of the changed one.
My example code is: (only works at IE browser)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>highlight</title>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8">

<script  language="javascript" type="text/javascript">
function  findText(snippet) {

var userSelectedRange =  document.selection.createRange();
var selectedText =  userSelectedRange.text
var selectedHtmlText =  userSelectedRange.htmlText;
var replaceText = '<span  class="'+snippet+'">'+selectedText+'</span>';

alert('text='+selectedText);
alert('html='+selectedHtmlText);

var  newSourceCode, count=0;
newSourceCode= document.body.innerHTML;
re  = new RegExp(selectedHtmlText, "gi");
newSourceCode=  newSourceCode.replace(re,replaceText);
document.body.innerHTML =  newSourceCode;
}
</script>

<style  type="text/css">
.highlight {
background:#ff0;
color#00f;
}
.blue  {
color:blue;
}
.red {
color:red;
}
.orange {
color:  orange;
}
.purple {
color: purple;
}
</style>

</head>
<body>
<form  action="" method="" name="form1">
<div>
        <button  type="button" id="red" value="red"  onclick="findText(document.getElementById('red').value)">red</button>&nbsp;&nbsp;
        <button  type="button" id="blue" value="blue"  onclick="findText(document.getElementById('blue').value)">blue</button>

</div>
</form>
<br>A  <span class="orange" id="1">strain</span> of <span  class="red">Stachybotrys</span> <span  class="orange">chartarum</span> was <span  class="blue">recently</span> <span class="orange">isolated</span>  from the <span class="orange">lung</span> of a <span  class="purple">patient</span> in <span  class="orange">Texas</span> .
<br>A <span  class="orange" id="1">strain</span> of <span  class="red">Stachybotrys</span> <span  class="orange">chartarum</span> was <span  class="blue">recently</span> <span class="orange">isolated</span>  from the <span class="orange">lung</span> of a <span  class="purple">patient</span> in <span  class="orange">Texas</span> .
</body>
</html>

Thanks for any help on this problem!!!!

**hpdp** · 04-09-2010, 01:22 PM

Thanks for reading this post. I solved this problem by assigning each word with an
unique number.

**hpdp** · 04-09-2010, 01:26 PM

Thanks for your help. I made the site working by using selection.CreateRange().
But I have a problem with the code. Please see my new post at

http://www.webmaster-talk.com/javascript-forum/201745-how-save-changed-page-after-using.html

Thanks!!

**chrishirst** · 04-09-2010, 02:03 PM

Javascript works on the document model in memory it does not and cannot change the original source code.

**chrishirst** · 04-09-2010, 02:04 PM

merged all the related threads.