Scan DOM for a String in Angularjs

Viewed 72

I'm looking for a simple way to traverse a DOM (or element) for a given string in Angularjs. If the given string is found, I'd like to bold it's text. I feel I'm overthinking this already since I haven't come up with a solution yet.

For example

Searching for Dog should return 4 results

<section id="container">
  <div>
    <h2>Dogs are great</h2>
    <p>They are the best. Everyone should have a dog</p>
    <div>
      <p>Cat owners are just confused dog owners</p>
      <p>What's your doggos name?</p>
    </div>
  </div>
</section>

<script>
$scope.search = function(word){
    var entireDom = // Get the entire innerText of the <section>
    if(entireDom.match(word) {
      // Wrap the string in <strong> tags & update the DOM somehow?
      // This function should probably be case insensitive
    }
}
<script>

Any ideas or tips would be super helpful. Thanks!

1 Answers
Related