@libs-ui/pipes-format-text-highlight-by-keyword 0.2.355-9 → 0.2.356-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,103 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Highlight By Keyword Pipe
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Pipe highlight (tô màu) từ khóa trong chuỗi văn bản. Hỗ trợ tìm kiếm không dấu tiếng Việt, không phân biệt hoa/thường và tùy chỉnh CSS class highlight.
|
|
4
|
+
|
|
5
|
+
## Tính năng
|
|
6
|
+
|
|
7
|
+
- ✅ Highlight tất cả các lần xuất hiện của từ khóa trong chuỗi
|
|
8
|
+
- ✅ Tìm kiếm không dấu — "an" match "An", "ăn", "ân", "ản"... (tiếng Việt)
|
|
9
|
+
- ✅ Không phân biệt hoa/thường (case-insensitive)
|
|
10
|
+
- ✅ Tùy chỉnh CSS class cho phần highlight
|
|
11
|
+
- ✅ Option `ignoreHighlight` để vô hiệu hóa linh hoạt
|
|
12
|
+
- ✅ Xử lý an toàn null/undefined
|
|
13
|
+
|
|
14
|
+
## Cài đặt
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @libs-ui/pipes-format-text-highlight-by-keyword
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Import
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import { LibsUiPipesFormatTextHighlightByKeywordPipe } from '@libs-ui/pipes-format-text-highlight-by-keyword';
|
|
24
|
+
|
|
25
|
+
@Component({
|
|
26
|
+
standalone: true,
|
|
27
|
+
imports: [LibsUiPipesFormatTextHighlightByKeywordPipe],
|
|
28
|
+
})
|
|
29
|
+
export class ExampleComponent {}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Cú pháp
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
value | LibsUiPipesFormatTextHighlightByKeywordPipe : search : ignoreHighlight? : classHightLight?
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
> ⚠️ **Quan trọng:** Pipe trả về **HTML string**. Phải dùng `[innerHTML]` để hiển thị highlight. Dùng `{{ }}` sẽ chỉ hiện HTML thô (escaped).
|
|
39
|
+
|
|
40
|
+
## Ví dụ
|
|
41
|
+
|
|
42
|
+
### Trong Template
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<!-- ✅ Đúng: dùng [innerHTML] -->
|
|
46
|
+
<p [innerHTML]="text | LibsUiPipesFormatTextHighlightByKeywordPipe : keyword"></p>
|
|
47
|
+
|
|
48
|
+
<!-- ❌ Sai: dùng {{ }} sẽ hiện text thô -->
|
|
49
|
+
<p>{{ text | LibsUiPipesFormatTextHighlightByKeywordPipe : keyword }}</p>
|
|
50
|
+
|
|
51
|
+
<!-- Custom CSS class -->
|
|
52
|
+
<p
|
|
53
|
+
[innerHTML]="text | LibsUiPipesFormatTextHighlightByKeywordPipe
|
|
54
|
+
: keyword
|
|
55
|
+
: false
|
|
56
|
+
: 'bg-yellow-300 text-gray-900 font-bold'"></p>
|
|
57
|
+
|
|
58
|
+
<!-- Tắt highlight có điều kiện -->
|
|
59
|
+
<p [innerHTML]="text | LibsUiPipesFormatTextHighlightByKeywordPipe : keyword : !isSearching"></p>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Dùng trong TypeScript
|
|
63
|
+
|
|
64
|
+
Pipe là thin wrapper của hàm `highlightByKeyword` trong `@libs-ui/utils`. Khi cần gọi trong TypeScript, import và dùng thẳng hàm đó — **không cần inject pipe**:
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { highlightByKeyword } from '@libs-ui/utils';
|
|
68
|
+
|
|
69
|
+
// Dùng thẳng hàm utils — không cần inject pipe
|
|
70
|
+
const result = highlightByKeyword('Nguyễn Văn An', 'an');
|
|
71
|
+
// Output: 'Nguyễn Văn <span class="bg-[#19344a] text-white">An</span>'
|
|
72
|
+
|
|
73
|
+
// Custom class:
|
|
74
|
+
const custom = highlightByKeyword('Hello World', 'hello', false, 'bg-yellow-300 text-gray-900');
|
|
75
|
+
|
|
76
|
+
// Trong component class:
|
|
77
|
+
class ExampleComponent {
|
|
78
|
+
safeHtml = highlightByKeyword(this.rawText, this.searchTerm);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## API
|
|
83
|
+
|
|
84
|
+
| Tham số | Kiểu | Bắt buộc | Default | Mô tả |
|
|
85
|
+
| ----------------- | ---------------------- | -------- | --------------------------- | -------------------------------------------------- |
|
|
86
|
+
| `value` | `string \| undefined` | ✅ | - | Chuỗi văn bản gốc cần tô màu keyword |
|
|
87
|
+
| `search` | `string \| undefined` | ✅ | - | Từ khóa cần highlight trong chuỗi |
|
|
88
|
+
| `ignoreHighlight` | `boolean \| undefined` | ❌ | `undefined` | Nếu `true`, bỏ qua highlight và trả về `value` gốc |
|
|
89
|
+
| `classHightLight` | `string \| undefined` | ❌ | `'bg-[#19344a] text-white'` | CSS class áp dụng cho `<span>` bao quanh keyword |
|
|
90
|
+
|
|
91
|
+
## Khi nào sử dụng
|
|
92
|
+
|
|
93
|
+
- **Search result:** Highlight keyword trong danh sách kết quả tìm kiếm
|
|
94
|
+
- **Autocomplete:** Tô màu từ khóa trong dropdown gợi ý
|
|
95
|
+
- **Table filter:** Highlight từ khóa trong bảng dữ liệu khi lọc
|
|
96
|
+
- **Tiếng Việt:** Cần tìm kiếm không dấu (gõ "an" match "Ân", "ăn"...)
|
|
97
|
+
|
|
98
|
+
## Lưu ý quan trọng
|
|
99
|
+
|
|
100
|
+
- **Luôn dùng `[innerHTML]`** — pipe trả về HTML string chứa `<span>` tags
|
|
101
|
+
- **XSS:** Chỉ dùng với dữ liệu đã tin cậy. Nếu `value` đến từ user input chưa kiểm tra, hãy sanitize trước khi truyền vào pipe
|
|
102
|
+
- **Default class** là `'bg-[#19344a] text-white'` (dark navy background). Có thể override bằng bất kỳ Tailwind hoặc CSS class nào
|
|
103
|
+
- **ignoreHighlight** hữu ích để toggle highlight theo state, tránh phải thêm `@if` trong template
|