HtmlToken

目录

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

Other Languages

• English

简介

HTML标签，未进行匹配。这个类同时混合了 AttributesToken 类的方法。

✅ 在 Mini 和 Browser 版本中可用。

Properties

name

✅ 展开

type: string
小写的标签名。

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

closing

✅ 展开

type: boolean
是否是闭合标签。

// 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

✅ 展开

type: boolean
是否自封闭。

// 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

✅ 展开

returns: LintError[]
报告潜在语法错误。

// lint
var {childNodes: [h1, br, i, big]} = Parser.parse(`<h1/></br/><i></big>`);
assert.equal(h1, '<h1/>');
assert.equal(br, '</br/>');
assert.equal(i, '<i>');
assert.equal(big, '</big>');
assert.deepStrictEqual(h1.lint(), [
	{
		rule: 'h1',
		severity: 'error',
		message: '<h1>',
		startLine: 0,
		startCol: 0,
		startIndex: 0,
		endLine: 0,
		endCol: 5,
		endIndex: 5,
	},
	{
		rule: 'unmatched-tag',
		severity: 'error',
		message: 'invalid self-closing tag',
		startLine: 0,
		startCol: 0,
		startIndex: 0,
		endLine: 0,
		endCol: 5,
		endIndex: 5,
	},
]);
assert.deepStrictEqual(br.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,
		fix: {
			range: [6, 7],
			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,
	},
]);

findMatchingTag

✅ 展开

returns: this
搜索匹配的标签。

// 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

展开

returns: this
深拷贝节点。

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

replaceTag

展开

param: string 标签名
更换标签名。

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

fix

展开

修复无效自封闭标签。

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

toHtml

展开

加入的版本: 1.10.0

returns: string
转换为 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>');