<template>
    <div>
        {{beforeText}}<span class="highlight">{{matchedText}}</span>{{afterText}}
    </div>
</template>

<script setup lang="ts">
interface Prop
{
    text: string;
    matched: string;
}
const props = defineProps<Prop>();

const beforeText = computed(() => {
    const pos = props.text.toLowerCase().indexOf(props.matched.toLowerCase());
    return props.text.substring(0, pos);
})
const matchedText = computed(() => {
    const pos = props.text.toLowerCase().indexOf(props.matched.toLowerCase());
    return props.text.substring(pos, pos + props.matched.length);
})
const afterText = computed(() => {
    const pos = props.text.toLowerCase().indexOf(props.matched.toLowerCase()) + props.matched.length;
    return props.text.substring(pos);
})
</script>