Search text highlight

index.html

<input placeholder="Search..."></input>
<blockquote>Lastly, she pictured to herself how this same little sister of hers would, in the after-time, be herself a grown woman; and how she would keep, through all her riper years, the simple and loving heart of her childhood; and how she would gather about her other little children, and make their eyes bright and eager with many a strange tale, perhaps even with the dream of Wonderland of long ago; and how she would feel with all their simple sorrows, and find a pleasure in all their simple joys, remembering her own child-life, and the happy summer days.</blockquote>
<cite>Lewis Carroll&mdash;Alice's Adventures in Wonderland</cite>

script.js

var src_str = $("blockquote").text();
var term;

$("input").keyup(function() {
  $("blockquote").text(src_str);
  term = $("input").val();
  var highlight = $("blockquote").text()
  $("blockquote").html(function(_, html) {
   return html.split(term).join("<span class='smallcaps'>" + term + "</span>");
  });
})

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

search-text-highlight.markdown

Search text highlight

A Pen by Paul Grant on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Lato:300);
$highlight: #ff5500;
$background: #222;
$text: #fff8d6;

body {
  background: linear-gradient(to bottom, $background 0%,lighten($background,5%) 50%,$background 100%);
  padding:0;
  margin:0;
  height:100vh;
  width:100vw;
  color:$text;
  font-family: 'Lato', sans-serif;
  line-height:200%;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content: center;
  flex-direction:column;
}

blockquote {
  width:50%;
  max-width:1000px;
}

input {
  background:$highlight;
  border: solid 1px mix($highlight, $text, 50%);
  padding:10px;
  font-family: 'Lato', sans-serif; 
  color: $text;
  font-size:32px;
  width:40%;
  max-width:800px;
  &:focus {
    outline: solid 1px $text;
  }
  &::-webkit-input-placeholder {
     color: mix($highlight, $text, 60%);
  }

  &:-moz-placeholder { /* Firefox 18- */
     color: mix($highlight, $text, 60%);  
  }

  &::-moz-placeholder {  /* Firefox 19+ */
     color: mix($highlight, $text, 60%);  
  }

  &:-ms-input-placeholder {  
     color: mix($highlight, $text, 60%);  
  }
}

span {
  background: linear-gradient(to bottom, transparentize($highlight, 1) 0%,transparentize($highlight, 1) 45%, $highlight 45%, $highlight 75%,transparentize($highlight, 1) 75%,transparentize($highlight, 1) 100%);
}