HtmlToken (EN)

Table of Contents

• Introduction
• Properties
  • name ✅
  • closing ✅
  • selfClosing ✅
• Methods
  • lint ✅
  • findMatchingTag ✅
  • cloneNode
  • replaceTag
  • fix
  • toHtml

Other Languages

• 简体中文

Introduction

HTML tags, not matched. This class also includes the methods of the AttributesToken class.

✅ Available in the Mini and Browser versions.

Properties

name

✅ Expand

type: string
The name of the tag in lowercase, read-only.

// name
var {firstChild} = Parser.parse('<b>');
assert.equal(firstChild, '<b>');
assert.strictEqual(firstChild.name, 'b');

closing

✅ Expand

type: boolean
Whether the tag is a closing tag.

// closing
var {firstChild} = Parser.parse('<b>');
assert.equal(firstChild, '<b>');
assert(!firstChild.closing);

// closing (main)
var {firstChild} = Parser.parse('<b>');
firstChild.closing = true;
assert.equal(firstChild, '</b>');

selfClosing

✅ Expand

type: boolean
Whether the tag is self-closing.

// selfClosing
var {firstChild} = Parser.parse('<br/>');
assert.equal(firstChild, '<br/>');
assert(firstChild.selfClosing);

// selfClosing (main)
var {firstChild} = Parser.parse('<br/>');
firstChild.selfClosing = false;
assert.equal(firstChild, '<br>');

Methods

lint

✅ Expand

returns: LintError[]
Report potential grammar errors.

// lint
var [h1, li, i, big, i2, wbr] = Parser.parse(`<h1/></li/><i></big><i>
{|</wbr>
|}`).querySelectorAll('html');
assert.equal(h1, '<h1/>');
assert.equal(li, '</li/>');
assert.equal(i, '<i>');
assert.equal(big, '</big>');
assert.equal(i2, '<i>');
assert.equal(wbr, '</wbr>');
assert.deepStrictEqual(h1.lint(), [
	{
		rule: 'h1',
		severity: 'error',
		message: '<h1>',
		startLine: 0,
		startCol: 0,
		startIndex: 0,
		endLine: 0,
		endCol: 5,
		endIndex: 5,
		suggestions: [
			{
				desc: 'h2',
				range: [2, 3],
				text: '2',
			},
		],
	},
	{
		rule: 'unmatched-tag',
		severity: 'error',
		message: 'invalid self-closing tag',
		startLine: 0,
		startCol: 0,
		startIndex: 0,
		endLine: 0,
		endCol: 5,
		endIndex: 5,
		suggestions: [
			{
				desc: 'no self-closing',
				range: [3, 4],
				text: '',
			},
			{
				desc: 'close',
				range: [3, 5],
				text: '></h1>',
			},
		],
	},
]);
assert.deepStrictEqual(li.lint(), [
	{
		rule: 'unmatched-tag',
		severity: 'error',
		message: 'tag that is both closing and self-closing',
		startLine: 0,
		startCol: 5,
		startIndex: 5,
		endLine: 0,
		endCol: 11,
		endIndex: 11,
		suggestions: [
			{
				desc: 'open',
				range: [6, 7],
				text: '',
			},
			{
				desc: 'no self-closing',
				range: [9, 10],
				text: '',
			},
		],
	},
]);
assert.deepStrictEqual(i.lint(), [
	{
		rule: 'unmatched-tag',
		severity: 'warning',
		message: 'unclosed tag',
		startLine: 0,
		startCol: 11,
		startIndex: 11,
		endLine: 0,
		endCol: 14,
		endIndex: 14,
	},
]);
assert.deepStrictEqual(big.lint(), [
	{
		rule: 'unmatched-tag',
		severity: 'error',
		message: 'unmatched closing tag',
		startLine: 0,
		startCol: 14,
		startIndex: 14,
		endLine: 0,
		endCol: 20,
		endIndex: 20,
		suggestions: [
			{
				desc: 'remove',
				range: [14, 20],
				text: '',
			},
		],
	},
	{
		rule: 'obsolete-tag',
		severity: 'warning',
		message: 'obsolete HTML tag',
		startLine: 0,
		startCol: 14,
		startIndex: 14,
		endLine: 0,
		endCol: 20,
		endIndex: 20,
	},
]);
assert.deepStrictEqual(i2.lint(), [
	{
		rule: 'unmatched-tag',
		severity: 'error',
		message: 'unclosed tag',
		startLine: 0,
		startCol: 20,
		startIndex: 20,
		endLine: 0,
		endCol: 23,
		endIndex: 23,
		suggestions: [
			{
				desc: 'close',
				range: [21, 21],
				text: '/',
			},
		],
	},
]);
assert.deepStrictEqual(wbr.lint(), [
	{
		rule: 'parsing-order',
		severity: 'error',
		message: 'HTML tag in table attributes',
		startLine: 1,
		startCol: 2,
		startIndex: 26,
		endLine: 1,
		endCol: 8,
		endIndex: 32,
		fix: {
			desc: 'remove',
			range: [26, 32],
			text: '',
		},
	},
	{
		rule: 'unmatched-tag',
		severity: 'error',
		message: 'tag that is both closing and self-closing',
		startLine: 1,
		startCol: 2,
		startIndex: 26,
		endLine: 1,
		endCol: 8,
		endIndex: 32,
		fix: {
			desc: 'open',
			range: [27, 28],
			text: '',
		},
	},
]);

findMatchingTag

✅ Expand

returns: this
Find the matching tag.

// findMatchingTag
var {firstChild, lastChild} = Parser.parse('<p></p>');
assert.equal(firstChild, '<p>');
assert.equal(lastChild, '</p>');
assert.strictEqual(firstChild.findMatchingTag(), lastChild);
assert.strictEqual(lastChild.findMatchingTag(), firstChild);

cloneNode

Expand

returns: this
Deep clone the node.

// cloneNode (main)
var {firstChild} = Parser.parse('<p>');
assert.equal(firstChild, '<p>');
assert.deepStrictEqual(firstChild.cloneNode(), firstChild);

replaceTag

Expand

param: string new tag name
Change the tag name.

// replaceTag (main)
var {firstChild} = Parser.parse('<b>');
assert.equal(firstChild, '<b>');
firstChild.replaceTag('i');
assert.equal(firstChild, '<i>');

fix

Expand

Fix invalid self-closing tags.

// fix (main)
var {lastChild} = Parser.parse('<b><b/>');
assert.equal(lastChild, '<b/>');
lastChild.fix();
assert.equal(lastChild, '</b>');

toHtml

Expand

version added: 1.10.0

returns: string
Convert to HTML.

// toHtml (main)
var {firstChild} = Parser.parse('</wbr id=a>');
assert.strictEqual(firstChild.toHtml(), '');
({firstChild} = Parser.parse('</br id=a>'));
assert.strictEqual(firstChild.toHtml(), '<br>');
({firstChild} = Parser.parse('<p id=a />'));
assert.strictEqual(firstChild.toHtml(), '<p id="a">');
({firstChild} = Parser.parse('<li id=a />'));
assert.strictEqual(firstChild.toHtml(), '<li id="a"></li>');