29 lines
833 B
Vue
29 lines
833 B
Vue
<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);
|
|
})
|
|
|
|
console.log(props, beforeText.value, afterText.value);
|
|
</script> |