I have a plain text (data is just dumped from a log file) returned from an API say

The data from API is maintained in a pinia store
I’m trying to implement search functionality over this entire log of data.

Here’s the code

  <template>
  <div>
    <v-row>
      <v-col cols="3">
        <v-text-field  v-model="searchText" @keyup="searchLogs">
        </v-text-field>
      </v-col>
    </v-row>
    <v-card >
      <div>
        <p style="white-space: pre">{{ TestResults }}</p>
      </div>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import { ref, } from 'vue'
import { storeToRefs } from 'pinia'

import { useDataStore } from '@/stores/dataStore'
const {TestResults } = storeToRefs(useDataStore ())

const searchText = ref('Search')


const searchLogs = () => {
  let logRefData;
  
}

TestResults has the response.

I’m able to get the data in rows in UI since I have used “white-space: pre”. How do I filter the search text inside this entire text which is a string? (Like filter js function is used on arrays)

Also, my script code is in typescript.

If the search text is present in a particular row, the entire row should be displayed.

Eg:

Search text :
xx

Search result:

Search text :
2/7/23

Search result: