<template>
<section class="memo-list__content-item">
<!-- 概要 -->
<section class="item-title">
<SearchContent :searchValue="searchValue" :content="item.title" />
</section>
<!-- 内容 -->
<section class="item-content">
<SearchContent :searchValue="searchValue" :content="item.content" />
</section>
</section>
</template>
<script setup lang="tsx">
const SearchContent = defineComponent({
name: 'SearchContent',
props: {
searchValue: {
type: String,
default: ''
},
content: {
type: String,
default: ''
}
},
setup (props) {
const searchValue = props.searchValue
const content = props.content
const index = content.indexOf(searchValue)
if (index === -1) return content
const searchIndex = searchValue.length + index
const extraContent = startIndex => (
<>
{startIndex ? <span>...</span> : ''}
<span>{content.slice(startIndex, index)}</span>
<span style='background: #fae086'>{content.slice(index, searchIndex)}</span>
<span>{content.slice(searchIndex)}</span>
</>
)
if (searchIndex > CONTENT_CUT_LENGTH) return extraContent(index - 4)
return extraContent(0)
}
})
</script>