HtmlToken (EN) - bhsd-harry/wikiparser-node GitHub Wiki

Table of Contents

Other Languages

Introduction

HTML tags, not matched. This class mixes the properties and methods of the AttributesToken class, and inherits all the properties and methods of the Token class which are not repeated here.

✅ Available in the Mini and Browser versions.
🌐 Available in the Browser version.

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.ok(!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.ok(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: 'obsolete-tag',
		severity: 'warning',
		message: 'obsolete HTML tag',
		startLine: 0,
		startCol: 14,
		startIndex: 14,
		endLine: 0,
		endCol: 20,
		endIndex: 20,
	},
	{
		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: '',
			},
		],
	},
]);
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);

json

🌐 Expand

Save the syntax tree as JSON.

// json
var {lastChild} = Parser.parse(' <p>');
assert.deepStrictEqual(lastChild.json(), {
	range: [1, 4],
	type: 'html',
	name: 'p',
	closing: false,
	selfClosing: false,
	childNodes: [
		{
			range: [3, 3],
			type: 'html-attrs',
			name: 'p',
			childNodes: [],
		},
	],
});

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>');
⚠️ **GitHub.com Fallback** ⚠️