Exploring Vue.js: Navigating through highlighted search terms with previous and next buttons

Question

Exploring Vue.js: Navigating through highlighted search terms with previous and next buttons

Is there a way to allow users to navigate through highlighted search results using 'next / previous' arrows? Something similar to the feature in Google Docs shown below:

https://i.sstatic.net/44LpL.png

I already have the code to highlight all occurrences using a filter and regular expression :

<p v-html="$options.filters.highlightSearchResults(theText,  searchTerms)"></p>

And here's the code snippet:

filters: {
  highlightSearchResults(theText, searchTerms) {
    const re = new RegExp(searchTerms, "gi")
    return theText.replace(re, (match) => `<span style="background-color:#ffff00">${match}</span>`
  }

However, I'm stuck on how to implement the navigation functionality for cycling through the found instances. Any guidance would be greatly appreciated.

javascript vue.js

Answer 1

Answer №1

To improve the functionality, you can establish a variable called currentIndex that points to the index of the currently highlighted item (and is modified by the Next/Prev buttons).

export default {
  data() {
    currentIndex: 0,
  }
}

Additionally, maintain an iterator index in your string replacer method that will only wrap the matching text with a highlighting <span> when it matches the currentIndex:

export default {
  methods: {
    highlightSearchResults(theText, searchTerms) {
      const re = new RegExp(searchTerms, 'gi')
      let i = 0
      return theText.replace(re, (match) =>
        (i++ == this.currentIndex)
                             ? `<span style="background-color:#ffff00">${match}</span>`
                             : match
      )
    },
  }
}

Check out the demo here.

To optimize rendering performance, consider replacing the highlightSearchResults function in the template with a computed property, as the value would be cached and reused in the subsequent render:

<template>
  <p v-html="highlightedText"></p>
</template>

<script>
export default {
  computed: {
    highlightedText() {
      return this.highlightSearchResults(this.theText, this.searchTerms)
    }
  }
}
</script>

See the optimized version in action.

Answer 2

To improve the functionality, you can establish a variable called currentIndex that points to the index of the currently highlighted item (and is modified by the Next/Prev buttons).

export default {
  data() {
    currentIndex: 0,
  }
}

Additionally, maintain an iterator index in your string replacer method that will only wrap the matching text with a highlighting <span> when it matches the currentIndex:

export default {
  methods: {
    highlightSearchResults(theText, searchTerms) {
      const re = new RegExp(searchTerms, 'gi')
      let i = 0
      return theText.replace(re, (match) =>
        (i++ == this.currentIndex)
                             ? `<span style="background-color:#ffff00">${match}</span>`
                             : match
      )
    },
  }
}

Check out the demo here.

To optimize rendering performance, consider replacing the highlightSearchResults function in the template with a computed property, as the value would be cached and reused in the subsequent render:

<template>
  <p v-html="highlightedText"></p>
</template>

<script>
export default {
  computed: {
    highlightedText() {
      return this.highlightSearchResults(this.theText, this.searchTerms)
    }
  }
}
</script>

See the optimized version in action.

Exploring Vue.js: Navigating through highlighted search terms with previous and next buttons

Answer №1

Similar questions

locate handlers for events using selenium web automation

The message that keeps popping up says "TypeError: Unable to access the 'execute' property of an undefined object."

What is the most effective method for transferring resolved promise values to a subsequent "then" chain?

"Is there a way to retrieve the file size from a source on a different site

What is the process for activating and deactivating the scroll trigger within Material UI's useScrollTrigger module?

How can I retrieve all element attributes in TypeScript using Protractor?

Encountering an error with NodeJs, AngularJs, and Mongoose: TypeError - Object.keys invoked on a non-object leading to Function.keys (native)

Tips for identifying the clicked location inside an element using JavaScript?

What steps do I need to take to integrate FontAwesome with the vue-cli webpack-simple template?

Angular JS is encountering an issue where the promise object is failing to render correctly

Is there a way to automatically remove a document in MongoDB and Node.js once its expiration date has passed?

Unacceptable response from AJAX function

What is the method to deactivate all events in React components using refs?

Creating client side scripts for an ajax call to generate a Json object is simple once you understand the basics

Animation event in CSS3 fails to trigger on Firefox browser

The XMLHttpRequest is displaying additional characters within its response

Tips for effectively passing parameters in nested controllers within AngularJS

Achieve a stunning visual effect by gradually blending the background image in a parallax

Managing several drop elements using class dynamically

Stuck at loading: Electron encountering issues with Aurelia Navigation Setup