|
| 1 | +/** @format */ |
| 2 | + |
| 3 | +import { Pipe, PipeTransform } from "@angular/core"; |
| 4 | +import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; |
| 5 | + |
| 6 | +@Pipe({ name: "truncateHtml", standalone: true }) |
| 7 | +export class TruncateHtmlPipe implements PipeTransform { |
| 8 | + constructor(private sanitizer: DomSanitizer) {} |
| 9 | + |
| 10 | + transform(value: string, limit: number): SafeHtml { |
| 11 | + if (!value) return ""; |
| 12 | + |
| 13 | + // Сначала убираем все HTML теги чтобы считать только текст |
| 14 | + const plainText = value.replace(/<[^>]*>/g, ""); |
| 15 | + |
| 16 | + if (plainText.length <= limit) { |
| 17 | + return this.sanitizer.bypassSecurityTrustHtml(value); |
| 18 | + } |
| 19 | + |
| 20 | + // Обрезаем по тексту, сохраняя теги |
| 21 | + let charCount = 0; |
| 22 | + let result = ""; |
| 23 | + let inTag = false; |
| 24 | + let currentTag = ""; |
| 25 | + const openTags: string[] = []; |
| 26 | + const selfClosingTags = ["br", "hr", "img", "input", "meta", "link"]; |
| 27 | + |
| 28 | + for (let i = 0; i < value.length; i++) { |
| 29 | + const char = value[i]; |
| 30 | + |
| 31 | + if (char === "<") { |
| 32 | + inTag = true; |
| 33 | + currentTag = ""; |
| 34 | + } |
| 35 | + |
| 36 | + if (inTag) { |
| 37 | + result += char; |
| 38 | + currentTag += char; |
| 39 | + |
| 40 | + if (char === ">") { |
| 41 | + // Закончился тег, анализируем его |
| 42 | + const tagContent = currentTag.slice(1, -1).trim(); // убираем < и > |
| 43 | + |
| 44 | + if (tagContent.startsWith("/")) { |
| 45 | + // Закрывающий тег |
| 46 | + openTags.pop(); |
| 47 | + } else if (!tagContent.startsWith("!")) { |
| 48 | + // Открывающий тег (не комментарий) |
| 49 | + const tagNameMatch = tagContent.match(/^(\w+)/i); |
| 50 | + if (tagNameMatch) { |
| 51 | + const tagName = tagNameMatch[1].toLowerCase(); |
| 52 | + // Проверяем, что это не самозакрывающийся тег |
| 53 | + if (!selfClosingTags.includes(tagName) && !tagContent.endsWith("/")) { |
| 54 | + openTags.push(tagName); |
| 55 | + } |
| 56 | + } |
| 57 | + } |
| 58 | + |
| 59 | + inTag = false; |
| 60 | + currentTag = ""; |
| 61 | + } |
| 62 | + } else { |
| 63 | + if (charCount >= limit) break; |
| 64 | + result += char; |
| 65 | + charCount++; |
| 66 | + } |
| 67 | + } |
| 68 | + |
| 69 | + // Закрываем все открытые теги |
| 70 | + let closedTags = result; |
| 71 | + for (let i = openTags.length - 1; i >= 0; i--) { |
| 72 | + closedTags += `</${openTags[i]}>`; |
| 73 | + } |
| 74 | + |
| 75 | + return this.sanitizer.bypassSecurityTrustHtml(closedTags + "..."); |
| 76 | + } |
| 77 | +} |
0 commit comments