云策 WordPress 开发者社区

块编辑器开发文档

TextHighlight

查看官方原文 ↗
💡 云策文档标注

概述

TextHighlight 是一个 WordPress 组件，用于在文本字符串中高亮显示指定字符串的匹配项。它通过将每个匹配项包裹在 标签中来实现，该标签提供浏览器默认样式。

关键要点

  • 组件用途：高亮文本中的指定字符串，支持不区分大小写的多匹配。
  • 核心 Props：包括 highlight（要搜索和高亮的字符串）和 text（被测试的文本字符串），两者均为必需。
  • 输出方式：使用 标签包裹匹配项，依赖浏览器默认样式。

代码示例

import { TextHighlight } from '@wordpress/components';

const MyTextHighlight = () => (
    <TextHighlight
        text="Why do we like Gutenberg? Because Gutenberg is the best!"
        highlight="Gutenberg"
    />
);
📄 原文内容

Highlights occurrences of a given string within another string of text. Wraps each match with a <mark> tag which provides browser default styling.

Usage

Pass in the text and the highlight string to be matched against.

In the example below, the string Gutenberg would be highlighted twice.

import { TextHighlight } from '@wordpress/components';

const MyTextHighlight = () => (
    <TextHighlight
        text="Why do we like Gutenberg? Because Gutenberg is the best!"
        highlight="Gutenberg"
    />
);

Props

The component accepts the following props.

highlight: string

The string to search for and highlight within the text. Case insensitive. Multiple matches.

  • Required: Yes
  • Default: ''

text: string

The string of text to be tested for occurrences of then given highlight.

  • Required: Yes
  • Default: ''