Having difficulty identifying duplicate sentences in Vue.js when highlighting them

Question

Having difficulty identifying duplicate sentences in Vue.js when highlighting them

I am looking for a way to identify and highlight repetitive sentences within a text area input paragraph. I attempted the following code, but unfortunately, it did not produce the desired result.

highlightRepeatedText(str) {
  // Split the string into an array of sentences
  const sentencesArray = str.split(".");
  // Initialize an empty array to store repeated sentences
  let repeatedSentences = [];

  // Iterate over the array of sentences
  for (let i = 0; i < sentencesArray.length; i++) {
    const currentSentence = sentencesArray[i].trim();
    // Check if current sentence is already in repeated array, if yes then highlight it
    if (repeatedSentences.includes(currentSentence)) {
      sentencesArray[i] = `<mark>${currentSentence}</mark>`;
    } else {
      // If not, add it to the repeated array
      repeatedSentences.push(currentSentence);
    }
  }

  // Return the modified string with highlighted repeated sentences
  return sentencesArray.join(".");
},

javascript vue.js highlight

Answer 1

Answer №1

If you are looking for a solution that involves using v-html or understanding how a function is called, the code snippet provided below might be helpful:

<script>
import { ref } from 'vue'

export default {
  data(){
    return {
      msg: 'Hello'
    }
  },
    computed: {
    highlightedText(){
      const hlt = this.highlightRepeated(this.msg);
      console.log(hlt);
      return hlt;
    }
  },
  methods:{
    highlightRepeated(str) {
      // Split the string into an array of sentences
      const sentences = str.split(".");
      // Create a variable to store the repeated sentences
      let repeated = [];

      // Iterate over the array of sentences
      for (let i = 0; i < sentences.length; i++) {
        const sentence = sentences[i].trim();
        // If the sentence has already been added to the repeated array, highlight it
        if (repeated.includes(sentence)) {
          sentences[i] = `<mark>${sentence}</mark>`;
        } else {
          // Otherwise, add it to the repeated array
          repeated.push(sentence);
        }
      }
      // Return the modified string
      return sentences.join(".");
    }
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
    <h1 v-html="highlightedText"></h1>

  <input v-model="msg">
</template>

Check out the playground link for more details.

Answer 2

If you are looking for a solution that involves using v-html or understanding how a function is called, the code snippet provided below might be helpful:

<script>
import { ref } from 'vue'

export default {
  data(){
    return {
      msg: 'Hello'
    }
  },
    computed: {
    highlightedText(){
      const hlt = this.highlightRepeated(this.msg);
      console.log(hlt);
      return hlt;
    }
  },
  methods:{
    highlightRepeated(str) {
      // Split the string into an array of sentences
      const sentences = str.split(".");
      // Create a variable to store the repeated sentences
      let repeated = [];

      // Iterate over the array of sentences
      for (let i = 0; i < sentences.length; i++) {
        const sentence = sentences[i].trim();
        // If the sentence has already been added to the repeated array, highlight it
        if (repeated.includes(sentence)) {
          sentences[i] = `<mark>${sentence}</mark>`;
        } else {
          // Otherwise, add it to the repeated array
          repeated.push(sentence);
        }
      }
      // Return the modified string
      return sentences.join(".");
    }
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
    <h1 v-html="highlightedText"></h1>

  <input v-model="msg">
</template>

Check out the playground link for more details.

Having difficulty identifying duplicate sentences in Vue.js when highlighting them

Answer №1

Similar questions

What is the best way to eliminate a trailing backslash from a string?

What is the reason for not allowing return statements in the ternary operator?

Fade out all the other images using jQuery

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

Expandable full-width JavaScript accordion for seamless navigation

Obtaining data from a CSV file and transforming it into JSON format results in an array

Intercepting and handling errors thrown by a Node module

There was an issue with Angular 2.0 at :0:0, which was caused by a response with status: 0 from the URL: null

How come my total isn't zero after I get a 1 on the dice roll?

express-validator never accepts valid input

Guide on utilizing Subscribe Observable for performing lookup in Angular

Implementing recursive functionality in a React component responsible for rendering a dynamic form

Data has been successfully acquired through the query, however, it cannot be accessed via the GraphQL API

"Troubleshooting: Why is the JavaScript canvas.toDataURL method returning an

Discover the method of extracting parameters from an event in Vuetify Vue.js

uib-datepicker-popup allowing for changing minimum mode dynamically

Unable to import local npm package due to an error

Can you help me understand how to ensure the CSS translate feature lands in a specific div, no matter its initial position?

Change the value of the checked property to modify the checked status

Stopping $interval using promise after a specific condition is satisfied using Angular timer