Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-10-2010, 02:54 AM   PM User | #1
lellimecnar
New to the CF scene

 
Join Date: Sep 2010
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
lellimecnar is an unknown quantity at this point
Inline text highlighting

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.

How can I do this in JavaScript?
lellimecnar is offline   Reply With Quote
Old 09-10-2010, 08:03 AM   PM User | #2
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,105
Thanks: 197
Thanked 2,422 Times in 2,400 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
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

Last edited by Philip M; 09-10-2010 at 12:12 PM..
Philip M is offline   Reply With Quote
Old 09-10-2010, 07:59 PM   PM User | #3
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,579
Thanks: 62
Thanked 4,064 Times in 4,033 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Quote:
Q. If you were to spell out numbers, how far would you have to go until you would find the letter "A"?
два (2 in Russian)

Actually, if you use the number one with a female noun, you only have to get to 1:
одна девушка (one girl)

Crazily, the number one is an adjective in Russian, and so matches the gender of the noun it modifies.

<grin style="чудовищно" />
__________________
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.

Last edited by Old Pedant; 09-10-2010 at 08:02 PM..
Old Pedant is offline   Reply With Quote
Old 09-10-2010, 08:09 PM   PM User | #4
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,105
Thanks: 197
Thanked 2,422 Times in 2,400 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
Well, yes, I meant in English!

Quatre French
Acht Dutch
Philip M is offline   Reply With Quote
Old 09-10-2010, 08:12 PM   PM User | #5
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,579
Thanks: 62
Thanked 4,064 Times in 4,033 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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.
Old Pedant is offline   Reply With Quote
Reply

Bookmarks

Tags
highlight, highlighter, rooh.it, roohit, text

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:37 PM.


Advertisement
Log in to turn off these ads.