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

Visual Studio Terminal displaying "Module Not Found" error message

Angular directive that verifies the presence of a specific number of child li elements

The absence of a React JS button on the page

Encountered error code 422 Unprocessable_entity upon submitting form to Rails API via Vue.js application

Utilize the power of React and Framer Motion to create a visually stunning fade

How can Vue.js update the displayed information when the selection option changes?

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

A guide to implementing X-Frame-Options in an express.js web application using node.js

Using Selenium WebDriver to handle Angular requests in Java

Is this included in the total number of reads?

Dragging a div element within a table

Create your masterpiece on a rotated canvas

Using the onclick event with an image created through PHP code

What is the best method to securely install a private Git repository using Yarn, utilizing access tokens without the need to hardcode them

Can images be sent to an Express API using SvelteKit's `on:change` event handler in combination with Form Actions?

Navigating with React Router using server-side routing in the web browser

Error: JavaScript alert box malfunctioning

I am looking to transfer an image stored in a database onto a card

What is the proper way to access the current value of a computed property from within its own computation method?

What is the significance of having 8 pending specs in E2E Protractor tests on Firefox?