AttributeToken

目录

• 简介
• Properties
  • name ✅
  • tag ✅
  • balanced ✅
  • value
• Methods
  • lint ✅
  • getValue
  • cloneNode
  • escape
  • close
  • setValue
  • rename
  • toHtml
  • css

Other Languages

• English

简介

扩展和 HTML 标签及表格的单项属性。这个类继承了 Token 类的全部属性和方法，这里不再列出。

✅ 在 Mini 和 Browser 版本中可用。

Properties

name

✅ 展开

type: string
小写的属性名，只读。

// name
var attr = Parser.parse('<REF name=a/>').querySelector('ext-attr');
assert.equal(attr, 'name=a');
assert.strictEqual(attr.name, 'name');

tag

✅ 展开

type: string
小写的标签名，只读。

// tag
var attr = Parser.parse('<REF name=a/>').querySelector('ext-attr');
assert.equal(attr, 'name=a');
assert.strictEqual(attr.tag, 'ref');

balanced

✅ 展开

type: boolean
引号是否匹配。

// balanced
var attr = Parser.parse('<p id="a>').querySelector('html-attr');
assert.equal(attr, 'id="a');
assert(!attr.balanced);

// balanced (main)
var attr = Parser.parse('<p id="a>').querySelector('html-attr');
attr.balanced = true;
assert.equal(attr, 'id="a"');

value

展开

type: string | true
见 getValue 和 setValue 方法。

Methods

lint

✅ 展开

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

// lint
var [lang, tabindex, align, style] = Parser.parse(`<p
xml:lang=zh
tabindex="1"
align=center
style="cursor:url('cursor.png')>`)
	.querySelectorAll('html-attr');
assert.equal(lang, 'xml:lang=zh');
assert.equal(tabindex, 'tabindex="1"');
assert.equal(align, 'align=center');
assert.equal(style, `style="cursor:url('cursor.png')`);
assert.deepStrictEqual(lang.lint(), [
	{
		rule: 'illegal-attr',
		severity: 'error',
		message: 'illegal attribute name',
		startLine: 1,
		startCol: 0,
		startIndex: 3,
		endLine: 1,
		endCol: 8,
		endIndex: 11,
		suggestions: [
			{
				desc: 'remove',
				range: [3, 14],
				text: '',
			},
		],
	},
]);
assert.deepStrictEqual(tabindex.lint(), [
	{
		rule: 'illegal-attr',
		severity: 'error',
		message: 'nonzero tabindex',
		startLine: 2,
		startCol: 10,
		startIndex: 25,
		endLine: 2,
		endCol: 11,
		endIndex: 26,
		suggestions: [
			{
				desc: 'remove',
				range: [15, 27],
				text: '',
			},
			{
				desc: '0 tabindex',
				range: [25, 26],
				text: '0',
			},
		],
	},
]);
assert.deepStrictEqual(align.lint(), [
	{
		rule: 'obsolete-attr',
		severity: 'warning',
		message: 'obsolete attribute',
		startLine: 3,
		startCol: 0,
		startIndex: 28,
		endLine: 3,
		endCol: 5,
		endIndex: 33,
	},
]);
assert.deepStrictEqual(style.lint(), [
	{
		rule: 'unclosed-quote',
		severity: 'warning',
		message: 'unclosed quotes',
		startLine: 4,
		startCol: 6,
		startIndex: 47,
		endLine: 4,
		endCol: 31,
		endIndex: 72,
		suggestions: [
			{
				range: [72, 72],
				text: '"',
				desc: 'close',
			},
		],
	},
	{
		rule: 'insecure-style',
		severity: 'error',
		message: 'insecure style',
		startLine: 4,
		startCol: 7,
		startIndex: 48,
		endLine: 4,
		endCol: 31,
		endIndex: 72,
	},
]);

getValue

✅ 展开

returns: string | true
获取属性值。

// getValue (main)
var attr = Parser.parse('<p id=a>').querySelector('html-attr');
assert.equal(attr, 'id=a');
assert.strictEqual(attr.getValue(), 'a');

cloneNode

展开

returns: this
深拷贝节点。

// cloneNode (main)
var [ext, html, table] = Parser.parse('<ref name=a/><p id=b>\n{|id=c\n|}')
	.querySelectorAll('ext-attr, html-attr, table-attr');
assert.equal(ext, 'name=a');
assert.equal(html, 'id=b');
assert.equal(table, 'id=c');
assert.deepStrictEqual(ext.cloneNode(), ext);
assert.deepStrictEqual(html.cloneNode(), html);
assert.deepStrictEqual(table.cloneNode(), table);

escape

展开

转义等号。用于模板内。

// escape (main)
var attr = Parser.parse('<p id=a>').querySelector('html-attr');
assert.equal(attr, 'id=a');
attr.escape();
assert.equal(attr, 'id{{=}}a');

close

展开

闭合引号。

// close (main)
var attr = Parser.parse('<p id="a>').querySelector('html-attr');
assert.equal(attr, 'id="a');
attr.close();
assert.equal(attr, 'id="a"');

setValue

展开

param: string | boolean 属性值
设置属性值。

// setValue (main)
var attr = Parser.parse('<p id=a>').querySelector('html-attr');
assert.equal(attr, 'id=a');
attr.setValue('b');
assert.equal(attr, 'id="b"');
attr.setValue(false);
assert.strictEqual(attr.parentNode, undefined);

rename

展开

param: string 新属性名
修改属性名。

// rename (main)
var attr = Parser.parse('<p id=a>').querySelector('html-attr');
assert.equal(attr, 'id=a');
attr.rename('class');
assert.equal(attr, 'class=a');

toHtml

展开

加入的版本：1.10.0

returns: string
转换为 HTML。

// toHtml (main)
var root = Parser.parse(
		`<p foo style="cursor:url(a.cur)" tabindex=1 id=" a  b " title='c\n"'>`,
	),
	[foo, style, tabindex, id, title] = root.querySelectorAll('html-attr');
assert.strictEqual(foo.toHtml(), '');
assert.strictEqual(style.toHtml(), '');
assert.strictEqual(tabindex.toHtml(), '');
assert.strictEqual(id.toHtml(), 'id="a_b"');
assert.strictEqual(title.toHtml(), 'title="c &quot;"');

css

展开

加入的版本：1.17.1

param: string 属性名
param: string | undefined 属性值（可选）
returns: string | undefined
获取某一样式属性的值。

// css (main)
var root = Parser.parse(`<p style=margin:0;padding:0>`),
	style = root.querySelector('html-attr');
assert.equal(style, 'style=margin:0;padding:0');
assert.strictEqual(style.css('margin'), '0');
style.css('margin', '0 0');
assert.equal(style, 'style="margin:0 0;padding:0"');
style.css('margin', '');
assert.equal(style, 'style="padding:0"');
style.css('left', '0');
assert.equal(style, 'style="padding:0; left: 0"');