Problem while highlighting repeated sentence in vue js

Question

I want to mark some repeated sentences from a text area input paragraph. I tried the below code but it's not working.

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(".");
},

How are you using this function output? How is it triggered? — AnandShiva
– AnandShiva, Commented Dec 30, 2022 at 18:09
` handleHighlight() { // Get the value of the textarea input field const str = this.$refs.input.value; // Highlight the repeated sentences const highlighted = this.highlightRepeated(str); // Update the data property with the highlighted string this.input = highlighted; }` — Saikat Sen
– Saikat Sen, Commented Dec 30, 2022 at 18:13
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community
– Community Bot, Commented Dec 30, 2022 at 20:54

AnandShiva · Accepted Answer · 2022-12-30 18:14:26Z

2

The following snippet works for me. See if you want to use v-html. Or how the function is being called.

<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>

playground link

answered Dec 30, 2022 at 18:14

AnandShiva

1,42921 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saikat Sen Over a year ago

Hey brother,Thank u so much. It works fine. But i need to highlight in texarea field. If i want to search after put some repeated sentence in textarea then show mark tag not highlighted. Here is my code

handleHighlight() {       // Get the value of the textarea input field      const str = this.$refs.input.value;              // Highlight the repeated sentences       const highlighted = this.highlightRepeated(str);        // Update the data property with the highlighted string       this.input = highlighted;     },

AnandShiva Over a year ago

Input does not render html if that is what you are trying to do. You have to build a custom text area which accepts html as input and use that instead of standard text input component.

Collectives™ on Stack Overflow

Problem while highlighting repeated sentence in vue js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related