В CdsAutocomplete, CdsCombobox и CdsSelect подсветка совпадений уже встроена — отдельный CdsHighlight там не нужен. Для постоянной метки рядом с текстом возьмите CdsTag, для счётчика — CdsBadge.

Вариации

Поисковый запрос

Свойство text принимает исходную строку, query — то, что искал пользователь. Запрос может быть строкой или массивом терминов: подсветятся все из них.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsHighlight
      class="text-900 text-content-primary"
      text="Шаблоны: договор поставки, договор аренды и договор подряда"
      query="договор"
    />

    <CdsHighlight
      class="text-900 text-content-primary"
      text="Шаблоны: договор поставки, договор аренды и договор подряда"
      :query="['поставки', 'подряда']"
    />
  </div>
</template>

Все вхождения

По умолчанию подсвечивается первое вхождение каждого термина. Свойство match-all подсвечивает все — в длинном тексте так видно полную картину.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsHighlight
      class="text-900 text-content-primary"
      text="Шаблоны: договор поставки, договор аренды и договор подряда"
      query="договор"
    />

    <CdsHighlight
      class="text-900 text-content-primary"
      text="Шаблоны: договор поставки, договор аренды и договор подряда"
      query="договор"
      match-all
    />
  </div>
</template>

Регистр

Свойство ignore-case ищет совпадения без учёта регистра. Оно нужно почти всегда, когда запрос набирает пользователь.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsHighlight class="text-900 text-content-primary" text="ИНН, Инн и инн — одно и то же" query="инн" match-all />

    <CdsHighlight
      class="text-900 text-content-primary"
      text="ИНН, Инн и инн — одно и то же"
      query="инн"
      match-all
      ignore-case
    />
  </div>
</template>

Готовые диапазоны

Когда совпадения ищет не браузер, а сервер, передайте их в matches — массив пар [start, end] по индексам исходной строки. Диапазоны имеют приоритет над query, пересекающиеся объединяются автоматически.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight } from '@central-design-system/components';

// Диапазоны [start, end] в исходной строке: «канцелярских товаров» и «офиса»
const matches = [
  [28, 48],
  [67, 72]
] as const;
</script>

<template>
  <div class="flex justify-center">
    <CdsHighlight
      class="text-900 text-content-primary"
      text="Заявка на участие в закупке канцелярских товаров для регионального офиса"
      :matches="matches"
    />
  </div>
</template>

Цвет и плотность

Свойство color задаёт цвет подсветки — им же тонируется фон, поэтому достаточно одного значения. opacity меняет плотность фона.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsHighlight class="text-900 text-content-primary" text="Подсветка цветом по умолчанию" query="по умолчанию" />

    <CdsHighlight
      class="text-900 text-content-primary"
      text="Подсветка цветом бренда"
      query="цветом бренда"
      color="brand-primary"
    />

    <CdsHighlight
      class="text-900 text-content-primary"
      text="Более плотный фон подсветки"
      query="плотный фон"
      color="green"
      opacity="28%"
    />
  </div>
</template>

Разметка

Свойство tag задаёт тег обёртки (по умолчанию span), mark-class добавляет свой класс каждому совпадению.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsHighlight
      class="text-900 text-content-primary"
      tag="p"
      text="Подсветка внутри абзаца: тег задаётся пропом tag"
      query="внутри абзаца"
    />

    <CdsHighlight
      class="text-900 text-content-primary"
      text="Совпадению можно добавить свой класс"
      query="свой класс"
      mark-class="font-bold"
    />
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Поиск по списку

Один и тот же запрос фильтрует список и подсвечивает совпадения в найденных строках. match-all и ignore-case держат подсветку и фильтр согласованными: раз строка попала в выдачу, совпадение в ней видно.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight, CdsTextInput } from '@central-design-system/components';
import { computed, ref } from 'vue';

const query = ref('дог');

const documents = [
  'Договор поставки канцелярии',
  'Договор аренды помещения',
  'Акт сверки взаиморасчётов',
  'Счёт на оплату № 1024'
];

const found = computed(() => {
  const needle = query.value.trim().toLowerCase();

  return needle ? documents.filter((document) => document.toLowerCase().includes(needle)) : documents;
});
</script>

<template>
  <div class="flex w-[350px] flex-col gap-2 m-auto">
    <CdsTextInput v-model="query" placeholder="Поиск по документам" prepend-inner-icon="search" clearable />

    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="document in found" :key="document">
        <CdsHighlight
          class="text-900 text-content-primary"
          :text="document"
          :query="query.trim()"
          match-all
          ignore-case
        />
      </li>

      <li v-if="found.length === 0" class="text-900 text-content-secondary">Ничего не найдено</li>
    </ul>
  </div>
</template>

Запрос из нескольких слов

Разбейте введённую фразу на слова и передайте массивом в query — компонент подсветит каждое слово по отдельности, даже если в тексте они стоят далеко друг от друга.

Sandbox Storybook

<script setup lang="ts">
import { CdsHighlight, CdsTextInput } from '@central-design-system/components';
import { computed, ref } from 'vue';

const query = ref('бумага а4');

const description =
  'Закупка бумаги: бумага А4 плотностью 80 г/м², бумага А3 и картон. Поставка на склад в Москве до конца месяца.';

const terms = computed(() => query.value.trim().split(/\s+/).filter(Boolean));
</script>

<template>
  <div class="flex w-[350px] flex-col gap-2 m-auto">
    <CdsTextInput v-model="query" label="Запрос" placeholder="Например: бумага а4" clearable />

    <CdsHighlight
      class="text-900 text-content-primary"
      tag="p"
      :text="description"
      :query="terms"
      match-all
      ignore-case
    />
  </div>
</template>

Совпадения с сервера

Полнотекстовый поиск на бэкенде уже знает, какие фрагменты считать совпадениями: он учитывает морфологию, синонимы и опечатки. Отдайте эти диапазоны в matches — клиент ничего не будет искать заново.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsHighlight } from '@central-design-system/components';
import { ref } from 'vue';

interface SearchResult {
  id: number;
  title: string;
  matches: [number, number][];
}

const loading = ref(false);
const results = ref<SearchResult[]>([]);

// Ответ поиска: сервер сам решил, какие фрагменты считать совпадениями
const response: SearchResult[] = [
  { id: 1, title: 'Заявка на поставку бумаги А4 для офиса', matches: [[19, 28]] },
  { id: 2, title: 'Договор поставки бумаги и картона', matches: [[17, 23]] }
];

const search = () => {
  loading.value = true;
  results.value = [];

  setTimeout(() => {
    results.value = response;
    loading.value = false;
  }, 1200);
};
</script>

<template>
  <div class="flex w-[350px] flex-col gap-2 m-auto">
    <CdsButton text="Найти «бумага А4»" :loading="loading" @click="search" />

    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="result in results" :key="result.id">
        <CdsHighlight class="text-900 text-content-primary" :text="result.title" :matches="result.matches" />
      </li>
    </ul>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет текста подсветки.
ignoreCase	boolean | undefined	—	Игнорировать регистр при поиске по query.
markClass	string | undefined	—	Дополнительный CSS-класс для элемента <mark>.
matchAll	boolean | undefined	—	Подсвечивать все вхождения, а не только первое.
matches	readonly MatchRange[] | undefined	—	Готовые диапазоны совпадений [start, end]. Имеют приоритет над query.
opacity	string | number | undefined	—	Прозрачность фона подсветки (CSS-переменная --cds-highlight-opacity).
query	string | string[] | undefined	—	Поисковый запрос: строка или массив строк-терминов.
tag	string | JSXComponent<any> | undefined	'span'	Пользовательский HTML-тег для отображения
text	string | undefined	''	Текст, в котором выполняется подсветка.