extract-html-attributes

A TypeScript library that provides functions to extract attributes from HTML tags. This library is written in TypeScript and provides full type safety and better developer experience.

Features

• Extract both attribute names and values from HTML tags
• TypeScript support with full type definitions
• Handles various HTML attribute formats (quoted, unquoted, single-quoted)
• Zero dependencies
• Comprehensive test coverage
• Supports self-closing tags
• Handles nested HTML elements
• Input validation and error handling

Installation

npm install extract-html-attributes

Usage

import { extractAttributes, extractAttributeNames } from 'extract-html-attributes';

// Extract attributes with their values
const html = '<div class="container" id="main">';
const attributes = extractAttributes(html);
console.log(attributes);
// Output:
// [
//   { tagName: 'div', attributeName: 'class', valueAttribute: 'container' },
//   { tagName: 'div', attributeName: 'id', valueAttribute: 'main' }
// ]

// Extract only attribute names
const attributeNames = extractAttributeNames(html);
console.log(attributeNames);
// Output: ['class', 'id']

More Examples

// Self-closing tags
const imgHtml = '<img src="image.jpg" alt="An image" />';
const imgAttributes = extractAttributes(imgHtml);
// Output: [
//   { tagName: 'img', attributeName: 'src', valueAttribute: 'image.jpg' },
//   { tagName: 'img', attributeName: 'alt', valueAttribute: 'An image' }
// ]

// Nested tags
const nestedHtml = '<div class="outer"><div class="inner" data-test="value"></div></div>';
const nestedAttributes = extractAttributes(nestedHtml);
// Output: [
//   { tagName: 'div', attributeName: 'class', valueAttribute: 'outer' },
//   { tagName: 'div', attributeName: 'class', valueAttribute: 'inner' },
//   { tagName: 'div', attributeName: 'data-test', valueAttribute: 'value' }
// ]

// Different quote styles
const mixedQuotesHtml = '<input type="text" class=\'container\' data-test=value>';
const mixedAttributes = extractAttributes(mixedQuotesHtml);
// Output: [
//   { tagName: 'input', attributeName: 'type', valueAttribute: 'text' },
//   { tagName: 'input', attributeName: 'class', valueAttribute: 'container' },
//   { tagName: 'input', attributeName: 'data-test', valueAttribute: 'value' }
// ]

API

extractAttributes(html: string): Attribute[]

Extracts all attributes from HTML tags, including their values.

Parameters

• html (string): The HTML string to parse

Returns

An array of Attribute objects, where each object has:

• tagName (string): The name of the HTML tag
• attributeName (string): The name of the attribute
• valueAttribute (string): The value of the attribute

Throws

• Error: If the input is not a valid string

extractAttributeNames(html: string): string[]

Extracts only the attribute names from HTML tags, without their values.

Parameters

• html (string): The HTML string to parse

Returns

An array of strings containing the attribute names

Throws

• Error: If the input is not a valid string

Development

This project uses TypeScript and includes comprehensive testing with Jest.

Setup

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test
npm run test:watch  # Run tests in watch mode
npm run test:coverage  # Run tests with coverage report

# Lint code
npm run lint
npm run lint:fix  # Fix linting issues automatically

# Format code
npm run format

# Clean build directory
npm run clean

Project Structure

extract-html-attributes/
├── src/
│   ├── index.ts          # Main source code
│   └── index.test.ts     # Test files
├── dist/                 # Compiled JavaScript files
├── package.json          # Project configuration
├── tsconfig.json         # TypeScript configuration
├── jest.config.js        # Jest configuration
├── .eslintrc.js         # ESLint configuration
└── .prettierrc          # Prettier configuration

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.