Javascript Problem

I wanted to create script which will search for <p> and it's content.This is the code i did:

function search(string){var elementi=document.getElementsByTagName("p");var cekor=-1;while(cekor<=elementi.length){cekor++;if(elementi[cekor].innerHTML.indexOf(string)==-1){}else{elementi[cekor].style.background="blue";}}}

And it worked,after many fixes and tries.I know about that {}else{ that i should replace with one ! in the if statement.That is not my problem.There are two problems:
1.My script allows searching tags,so paragraph may contain <b> and it will be allowed in searching.So,if i search for b,in paragraph with this HTML:

<b>Hello</b> this is an example

It will find b,which i don't want.
2.My script is selecting the whole paragraph instead of one word.I don't know how to add color only for word.Will i need to add new css class tags between word?

Before I provide a solution for your problem, I must clarify a few things :

There are 2 types of nodes :
1. Element Node
2. Text Node

nodeType property of node can be used to determine the type of node.
nodeValue property of node can be used to retrieve the text associated with the text node.
please visit :
http://www.javascriptkit.com/domref/nodetype.shtml

In text:

<p> Hello, <b>Manish</b> ... this is an example </p>

1. p,b are element nodes.
2. p has three child nodes:

a) Text Node: Hello,
Element Node: b
c) Text Node: ... this is an example

3. b has one child node.

a) Text Node: Manish

please, visit : http://www.howtocreate.co.uk/tutorials/javascript/dombasics

I) To solve your first problem, you must search only in text nodes.

II) To solve your second problem, .. yes, you must wrap your search keyword in a span tag. for e.g :

<p> Hello, <b>Manish</b> ... this is an <span class="highlight">example</span> </p>

Thank you.Again i have problem with my first problem.What about >,© and other like that? I think i would replace all them with empty string ('') using object.replace(firstTag,"") and that will replace most used tags in my paragraphs.I haven't some complicate code in paragraphs,just few <strong>,© and few others.I am not good at string manipulating so i don't know how i will find the exact string only,using what function? I tried few example with combinating charAt() and my cekor loop variable,and replacing but it didn't worked.Could you give me code how to highlight only one word?

Edited October 24, 2009 by TheDarkHacker (see edit history)

let me know if you can use this script I found on internet:

http://www.nsftools.com/misc/SearchAndHighlight.htm

My goal was to make my script,not copied and pasted,something like project...That is the best way to learn some programming language.I wanted to try with IndexOf() to search in paragraph and it worked but i have problems with searching for tags and separating word from paragraph.

It is good you want to make your script work, this way you will learn fast and better.

I think one way of learning can be to study somebody else's code.

I couldn't understand what this script was trying to do, but I think it was cleverly finding a way to avoid searching tags like this logic:

1. Let's suppose your searchKey is a tag, then its html representation would be :

<searchKey> some example text </searchKey>

Now,

html.indexOf('>', positionOfSearchKey) < html.indexOf('<', positionOfSearchKey)

2. Let's suppose your searchKey is not a tag, then its html representation would be:

<someTag> some example containing searchKey in text </someTag>

Now,

html.indexOf('>', positionOfSearchKey) > html.indexOf('<', positionOfSearchKey)

Hence, by checking these two cases, you can differentiate if the searchKey is a tag or not.

you can replace searchKey with

<span class="highlight">searchKey</span>

Define a css style :

.highlight {  background-color: yellow;  font-weight: bolder; }

I hope this would run correct. please, let me know if it works ..

No that can't help me because of all that © or < or > or or other examples and when text node and

html.indexOf('>', positionOfSearchKey) > html.indexOf('<', positionOfSearchKey)

doesn't help.They way i will do it will be replacing all that tags with empty string "" so that problem is solved.No problem now,i made my script...This topic can be closed.

Thank you.Again i have problem with my first problem.What about >,© and other like that? I think i would replace all them with empty string ('') using object.replace(firstTag,"") and that will replace most used tags in my paragraphs.I haven't some complicate code in paragraphs,just few <strong>,© and few others.I am not good at string manipulating so i don't know how i will find the exact string only,using what function? I tried few example with combinating charAt() and my cekor loop variable,and replacing but it didn't worked.Could you give me code how to highlight only one word?

you should only call the functions from the onload event of the body tag, or from a button or link or something that's triggered after the page is loaded. If you try to call these functions before a page has finished loading (for example, from a script block in the <head> or <body> section of the page), you will have unpredictable results.

 

The performance is a little slow if you have a large number of matches on a big web page (for example, if you try to match "a" on a 100k page). For a moderate number of matches, even on a large page, the performance is generally fine.

 

If there are HTML tags between letters of a word or between words in a phrase, then the word/phrase will not be highlighted as a match. For example, a search for "plant" will not match the word plant, because the HTML representation of the word is "p<u>lan</u>t", and the HTML tags will throw the search off. Likewise, if you highlight part of a word using a search, and then try to highlight the word itself, the word will not be matched for the same reason (if you search for and highlight "ant" and then try to search for and highlight "plant", you won't get any matches for "plant" because the HTML for the word will have been changed to "pl<highlightStartTag>ant<highlightEndTag>").