javascript highlight word on base of index sent to function

Question

I want to highlight the specific word index passed by function, initially function added on a button click. The problem is when i reassign 'document.getElementById('inputText').innerHTML = filterText;' it re-renders the page(Because there is iframe video ) and there is an iframe and another thing which are conflicting.

function makeALlIndex() {
    defaultText = document.getElementById('inputText').innerHTML;
}

function changeColor(index, word) {
    myText = defaultText;
    var filterText = myText.substr(0, index) + '<span  class="highlightClass">' + word + '</span>' + myText.substr(index + word.length);
    document.getElementById('inputText').innerHTML = filterText;
}

Html

<body onload="makeALlIndex()">
       <div id="inputText">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<button onclick="changeColor(0,'')">click me</button>
    </div>
</body>

so you want to highlight the color of a specific text inside `innerHTML`? — gurvinder372, Mar 22 '16 at 14:18
on every change have to remove previous one because its reading effect — naCheex, Mar 22 '16 at 14:23
Possible duplicate of [How to highlight text using javascript](http://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) — Mr. Polywhirl, Mar 22 '16 at 14:35
Why do you want to pass the index and the word? If you know the index, you can find the word, no? Does the index take into account the characters that make up the tags? Where do you get this index from? — trincot, Mar 22 '16 at 14:52

score 0 · Answer 1 · answered Mar 22 '16 at 14:22

0

try to change your method to

function changeColor(index, word) {
   myText = defaultText;
   var filterText = myText.substring(0, index).split( word ).join( '<span  class="highlightClass">' + word + '</span>' ) +  myText.substr(index + word.length);
   document.getElementById('inputText').innerHTML = filterText;
}

answered Mar 22 '16 at 14:22

gurvinder372

66,980
10
72
94

its reloading my page when i comment 'document.getElementById('inputText').innerHTML = filterText;' its wokring fine but how i can replace the filtered html – naCheex Mar 22 '16 at 14:27
@AliRaza didn't get `how i can replace the filtered html` part. – gurvinder372 Mar 22 '16 at 14:28
when I have my new html in `filterText ` so when i assign it to inner html it rerener my page. – naCheex Mar 22 '16 at 14:30
@AliRaza what is the expected behaviour if changeColor is invoked again then? – gurvinder372 Mar 22 '16 at 14:31
remove previous highlighted word and apply to next word (represent by index) – naCheex Mar 22 '16 at 14:32
@AliRaza isn't that what is happening? – gurvinder372 Mar 22 '16 at 14:33
Actually I need a funtion where I only can pass my index and it will turn highlight my that word witihin specific html
. that's all my problem there would be some jquery solution
– naCheex Mar 22 '16 at 14:34
@AliRaza how do you want the index to be used? – gurvinder372 Mar 23 '16 at 04:58
I have edited question. It was reloading because there is iframe which is reload video so that I am getting reloading effect. – naCheex Mar 23 '16 at 07:48

score 0 · Answer 2 · answered Mar 22 '16 at 15:26

@Aliraza -

I think following solution will work for you

function changeColor(index, word) {
    myText = defaultText;
    var filterText = '',newText ='',myTextArray =[];
    if( myText.indexOf(word)!=-1){
        myTextArray = myText.split(word);
        for(i=0; i<= myTextArray.length-1;i++){  
           if(i==index){
               newText = myTextArray[i] + '<span  class="highlightClass">' + word + '</span>';
            }else {
               newText =  myTextArray[i];
            }
            filterText += newText;
       }    
        document.getElementById('inputText').innerHTML = filterText;
    }
}

It is based on the URL you have provided. Still there are lots of things you may need to change in it.

javascript highlight word on base of index sent to function

2 Answers2