A lightweight collection of text manipulation utilities for web applications.
npm install text-utilities-proor
yarn add text-utilities-pro- 🔍 Text Truncation
- Middle ellipsis (
autowidthMiddle) - Truncates from the middle preserving start and end - End ellipsis (
endEllipsis) - Traditional end truncation
- Middle ellipsis (
- 🔠 Text Transformation
- camelCase conversion (
toCamelCase) - kebab-case conversion (
toKebabCase)
- camelCase conversion (
- 🔍 Text Enhancement
- Match highlighting (
highlightMatches) - Highlight search terms in text
- Match highlighting (
- 🛡️ Comprehensive error handling and edge case management
- 🌐 Works in all modern browsers
import {
autowidthMiddle,
endEllipsis,
highlightMatches,
toCamelCase,
toKebabCase
} from 'text-utilities-pro';
// Examples for each utility
const element = document.getElementById('my-element');
// Middle ellipsis
autowidthMiddle(element, 'Long file name with extension.pdf');
// End ellipsis
endEllipsis(element, 'This text will be truncated at the end if needed');
// Highlight matches
const highlightedText = highlightMatches('The quick brown fox', 'brown');
// Case conversions
const camelCased = toCamelCase('hello-world'); // "helloWorld"
const kebabCased = toKebabCase('helloWorld'); // "hello-world"Automatically applies middle ellipsis to text that doesn't fit within its container.
function autowidthMiddle(
el: HTMLElement | null | undefined,
fullText: string | null | undefined
): voidApplies standard end ellipsis to text that exceeds its container width.
function endEllipsis(
el: HTMLElement | null | undefined,
fullText: string | null | undefined
): voidConverts text to camelCase format.
function toCamelCase(text: string): stringConverts text to kebab-case format.
function toKebabCase(text: string): stringHighlights matching portions of text.
function highlightMatches(
text: string,
query: string,
options?: {
highlightTag?: string;
highlightClass?: string;
highlightStyle?: string;
}
): string<div id="middle-ellipsis" style="width: 200px; white-space: nowrap; overflow: hidden;"></div>
<div id="end-ellipsis" style="width: 200px; white-space: nowrap; overflow: hidden;"></div>
<script>
const midElement = document.getElementById('middle-ellipsis');
const endElement = document.getElementById('end-ellipsis');
const filename = 'very-long-filename-with-detailed-description.txt';
autowidthMiddle(midElement, filename); // "very-long-file...description.txt"
endEllipsis(endElement, filename); // "very-long-filename-with-de..."
</script>// camelCase examples
toCamelCase('hello-world'); // "helloWorld"
toCamelCase('foo_bar'); // "fooBar"
toCamelCase('Hello World'); // "helloWorld"
// kebab-case examples
toKebabCase('helloWorld'); // "hello-world"
toKebabCase('foo_bar'); // "foo-bar"
toKebabCase('Hello World'); // "hello-world"// Basic highlight
highlightMatches('The quick brown fox', 'brown');
// Returns: "The quick <mark>brown</mark> fox"
// Custom highlighting
highlightMatches('The quick brown fox', 'brown', {
highlightTag: 'span',
highlightClass: 'highlight',
highlightStyle: 'background-color: yellow; font-weight: bold;'
});
// Returns: "The quick <span class="highlight" style="background-color: yellow; font-weight: bold;">brown</span> fox"Works in all modern browsers that support ES2021 features. The utilities check for browser environment availability and provide appropriate error handling.
MIT