Highlight area as one searches for - By give it a red background

Question

It is such that I'm trying right now with Jquery to find the determining search words, for example searching for. Let also say that you will find "Lorem" then the highlight text with red shift.

I have look on:

Add()

Find()

Html site:

<div id="SearchBox">
<div class="col-md-6">
    <h2>Hello world</h2>
    <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum har været standard fyldtekst siden 1500-tallet, hvor en ukendt trykker sammensatte en tilfældig spalte for at trykke en bog til sammenligning af forskellige skrifttyper. Lorem Ipsum har ikke alene overlevet fem århundreder, men har også vundet indpas i elektronisk typografi uden væsentlige ændringer. Sætningen blev gjordt kendt i 1960'erne med lanceringen af Letraset-ark, som indeholdt afsnit med Lorem Ipsum, og senere med layoutprogrammer som Aldus PageMaker, som også indeholdt en udgave af Lorem Ipsum.</p>
</div>
<div class="col-md-6">
    <h2>Hello world</h2>
    <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum har været standard fyldtekst siden 1500-tallet, hvor en ukendt trykker sammensatte en tilfældig spalte for at trykke en bog til sammenligning af forskellige skrifttyper. Lorem Ipsum har ikke alene overlevet fem århundreder, men har også vundet indpas i elektronisk typografi uden væsentlige ændringer. Sætningen blev gjordt kendt i 1960'erne med lanceringen af Letraset-ark, som indeholdt afsnit med Lorem Ipsum, og senere med layoutprogrammer som Aldus PageMaker, som også indeholdt en udgave af Lorem Ipsum.</p>
</div>

Jquery:

$('#SearchBox').find("Lorem").css('background-color', 'red');

the problem is that it highlights the area of the words that I will search. Like when you click ctrl + F, it comes back and tells you these area we have this search words.

Related http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery — yuriy636, Jul 19 '16 at 11:43

score 1 · Answer 1 · answered Jul 19 '16 at 12:08

There is no jQuery method to wrap matches. You'll have to use a plugin, like mark.js. It will search for matches inside the specified context and wraps them with a custom element. You can then assign the element a color, in your case red.

Example:

var markInstance = new Mark(document.querySelector("#SearchBox"));
function highlight(){
    var searchTerm = document.querySelector("input").value;
    markInstance.unmark().mark(searchTerm);
}

mark{
    background: red;
    color: white;
}

<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script>
<input type="text" placeholder="Lorem ipsum..." oninput="highlight()">
<div id="SearchBox">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

I've tried to do as you write, but it works so unfortunately not. — J. Willumsen, Jul 19 '16 at 15:34
Please provide more information what doesn't work. Click on "Run code snippet" and you can see that it works like a charm! — dude, Jul 19 '16 at 15:46
I can see it works here, but when I eg doing it on my own side and just write L so it will not rise up. @dude — J. Willumsen, Jul 19 '16 at 15:55
Then please open another question. The solution from Mahmoud is definitely something I can't recommend. — dude, Jul 19 '16 at 16:12

score 0 · Accepted Answer · answered Jul 19 '16 at 11:45

firstly $('#SearchBox').find("Lorem") is a wrong selector because .find needs a jquery selector id , tag name Or class name find out more here .

to implement this feature you need to actually search in the inner text of the div , try contains or javascript indexOf , then to highlight the text you may replace the whole inner html with new html and desired word highlighted with different background.

ex :

var searchWord = "Lorem";
$('#SearchBox p:contains('+searchWord +')').each(function(){
  var currentText = $(this).html();
  var replaceAll = new RegExp(searchWord,"gi");
  $(this).html(currentText.replace(replaceAll,'<div style="display:inline;background-color:red">'+searchWord+'</div>'));
});

https://jsfiddle.net/n2u3s8c9/1/

This will 1. destroy events within the p elements (as it uses `innerHTML` in the background), 2. trigger DOM generation over and over again. — dude, Jul 19 '16 at 12:30

Highlight area as one searches for - By give it a red background

2 Answers2