Alright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar.
I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected.
This ought to move you forward. You can use css to change the background color the .highLight selector from background-color:#ff9900; (but what is meant by "whatever color they have selected"?).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var count = 0;
var itemList = new Array();
var oldText = "";
var rawText = "";
var workText = "";
function highlight() {
// overcome problem in Firefox caused by blank fields
itemList[0] = document.getElementById("txt1").value == '' ? "FireSchmoxStryng" : document.getElementById("txt1").value;
itemList[1] = document.getElementById("txt2").value == '' ? "FireSchmoxStryng" : document.getElementById("txt2").value;
itemList[2] = document.getElementById("txt3").value == '' ? "FireSchmoxStryng" : document.getElementById("txt3").value;
if (count == 0) {
rawText = document.getElementById('subjectMatter');
workText = rawText.innerHTML;
oldText = rawText.innerHTML;
}
else {
workText = oldText;
}
workText = workText.replace(/(\<)/g," $1").replace(/(\>)/g,"$1 ");
for (i=0; i<itemList.length; i++) {
itemList[i]= itemList[i].replace(/^\s+|\s+$/g,"");
var currWord = new RegExp("([\\s\\r\\n\(]*"+itemList[i]+"[\\s,;\.:?!\'\"()-]+)",'gi');
workText = workText.replace(currWord," <span class='highLight'>$1<\/span> ");
}
//for (i=0; i<itemList.length; i++) {
//var currWord = new RegExp("(\<\/span\>\\s)([0-9a-z%,;:\.?!\"\'()]+\\s)",'gi');
//workText = workText.replace(currWord," $1<span class='highLight'>$2<\/span> ");
//}
//for (i=0; i<itemList.length; i++) {
//var currWord = new RegExp("(\\s[0-9a-z%,;.:?!'()]+)(\\s\<span class='highLight'>)",'gi');
//workText = workText.replace(currWord," <span class='highLight'>$1<\/span>$2 ");
//}
rawText.innerHTML = workText;
count ++;
}
</script>
<style type="text/css">
body {font-family: arial; font-size: 10pt; margin-top: 60px; margin-bottom: 60px; background-color: #f5f5f5;}
.highLight {font-family: arial; font-size: 10pt; color: #00008B; background-color:#ff9900; font-weight: bold; cursor: help;}
</style>
</head>
<body>
<form>
First word or phrase to find <input type = "text" id = "txt1" size = "50"><br>
Second word or phrase to find <input type = "text" id = "txt2" size = "50"><br>
Third word or phrase to find <input type = "text" id = "txt3" size = "50"><br><br>
<input type = "button" value = "Highlight Selected" onclick = "highlight()">
<input type = "reset" value = "Reset Form">
<input type = "button" value = "Reset Results" onclick = "document.getElementById('subjectMatter').innerHTML = oldText">
</form>
<br>
<div id='subjectMatter'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor.
</div>
</body>
</html>
Q. If you were to spell out numbers, how far would you have to go until you would find the letter "A"?
A. One thousand
It is a fun question. A surprising answer in English if you've never thought about it before. Of course, some people say "one hundred AND one", but we'll delegate them to English grammar hell.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.