AttributeToken - bhsd-harry/wikiparser-node GitHub Wiki

目录

Other Languages

简介

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

✅ 在 MiniBrowser 版本中可用。
🌐 在 Browser 版本中可用。

Properties

balanced

✅ 展开

type: boolean
引号是否匹配。在 MiniBrowser 版本中为只读属性。

// balanced
var attr = Parser.parse('<poem compact/>').querySelector('ext-attr');
assert.equal(attr, 'compact');
assert.ok(attr.balanced);

attr = Parser.parse('<br id=a/>').querySelector('html-attr');
assert.equal(attr, 'id=a');
assert.ok(attr.balanced);

attr = Parser.parse('{|class="wikitable').querySelector('table-attr');
assert.equal(attr, 'class="wikitable');
assert.ok(!attr.balanced);
// balanced (main)
var attr = Parser.parse('<p id="a>').querySelector('html-attr');
attr.balanced = true;
assert.equal(attr, 'id="a"');
attr.balanced = false; // 不能设置为 false
assert.equal(attr, 'id="a"');

name

✅ 展开

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

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

attr = Parser.parse('<br data-a = a/>').querySelector('html-attr');
assert.equal(attr, 'data-a = a');
assert.strictEqual(attr.name, 'data-a');

attr = Parser.parse('{|cla<!-- -->ss="wikitable"').querySelector('table-attr');
assert.equal(attr, 'cla<!-- -->ss="wikitable"');
assert.strictEqual(attr.name, 'class');

tag

✅ 展开

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

// tag
var attr = Parser.parse('<POEM compact/>').querySelector('ext-attr');
assert.equal(attr, 'compact');
assert.strictEqual(attr.tag, 'poem');

attr = Parser.parse('<br id=a/>').querySelector('html-attr');
assert.equal(attr, 'id=a');
assert.strictEqual(attr.tag, 'br');

attr = Parser.parse('{|\n!class="b"|').querySelector('td')
	.querySelector('table-attr');
assert.equal(attr, 'class="b"');
assert.strictEqual(attr.tag, 'th');

type

✅ 展开

type: string
节点类型。

// type
var attr = Parser.parse('<poem compact/>').querySelector('ext-attr');
assert.equal(attr, 'compact');
assert.strictEqual(attr.type, 'ext-attr');

attr = Parser.parse('<br id=a/>').querySelector('html-attr');
assert.equal(attr, 'id=a');
assert.strictEqual(attr.type, 'html-attr');

attr = Parser.parse('{|class="wikitable"').querySelector('table-attr');
assert.equal(attr, 'class="wikitable"');
assert.strictEqual(attr.type, 'table-attr');

value

展开

type: string | true
getValuesetValue 方法。

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

Methods

cloneNode

展开

returns: this
深拷贝节点。

// cloneNode (main)
var attr = Parser.parse('<ref name=a/>').querySelector('ext-attr');
assert.equal(attr, 'name=a');
assert.deepStrictEqual(attr.cloneNode(), attr);

attr = Parser.parse('<p id=b>').querySelector('html-attr');
assert.equal(attr, 'id=b');
assert.deepStrictEqual(attr.cloneNode(), attr);

attr = Parser.parse('{|id=c').querySelector('table-attr');
assert.equal(attr, 'id=c');
assert.deepStrictEqual(attr.cloneNode(), attr);

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"');

css

展开

加入的版本:1.17.1

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

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

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');

attr = Parser.parse('<pre id=b/>').querySelector('ext-attr');
assert.equal(attr, 'id=b');
attr.escape();
assert.equal(attr, 'id=b');

getValue

✅ 展开

returns: string | true
获取属性值。

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

attr = Parser.parse('<poem compact/>').querySelector('ext-attr');
assert.equal(attr, 'compact');
assert.strictEqual(attr.getValue(), true);

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

json

🌐 展开

将语法树保存为 JSON。

// json (print)
var attr = Parser.parse('<p id=a>').querySelector('html-attr');
assert.equal(attr, 'id=a');
assert.deepStrictEqual(attr.json(), {
	range: [3, 7],
	type: 'html-attr',
	name: 'id',
	tag: 'p',
	childNodes: [
		{
			range: [3, 5],
			type: 'attr-key',
			childNodes: [
				{
					range: [3, 5],
					data: 'id',
				},
			],
		},
		{
			range: [6, 7],
			type: 'attr-value',
			childNodes: [
				{
					range: [6, 7],
					data: 'a',
				},
			],
		},
	],
});

lint

✅ 展开

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

// lint
var attr = Parser.parse('<p xml:lang=zh>').querySelector('html-attr');
assert.equal(attr, 'xml:lang=zh');
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'illegal-attr',
		severity: 'error',
		message: 'invalid attribute name',
		startLine: 0,
		startCol: 3,
		startIndex: 3,
		endLine: 0,
		endCol: 11,
		endIndex: 11,
		suggestions: [
			{
				desc: 'remove',
				range: [3, 14],
				text: '',
			},
		],
	},
]);

attr = Parser.parse(`<p style="cursor:url('cursor.png')">`)
	.querySelector('html-attr');
assert.equal(attr, `style="cursor:url('cursor.png')"`);
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'insecure-style',
		severity: 'error',
		message: 'insecure style',
		startLine: 0,
		startCol: 10,
		startIndex: 10,
		endLine: 0,
		endCol: 34,
		endIndex: 34,
	},
]);

attr = Parser.parse('<p tabindex="1">').querySelector('html-attr');
assert.equal(attr, 'tabindex="1"');
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'illegal-attr',
		severity: 'error',
		message: 'nonzero tabindex',
		startLine: 0,
		startCol: 13,
		startIndex: 13,
		endLine: 0,
		endCol: 14,
		endIndex: 14,
		suggestions: [
			{
				desc: 'remove',
				range: [3, 15],
				text: '',
			},
			{
				desc: '0 tabindex',
				range: [13, 14],
				text: '0',
			},
		],
	},
]);

attr = Parser.parse('<p dir=unknown>').querySelector('html-attr');
assert.equal(attr, 'dir=unknown');
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'illegal-attr',
		severity: 'error',
		message: 'invalid attribute value',
		startLine: 0,
		startCol: 7,
		startIndex: 7,
		endLine: 0,
		endCol: 14,
		endIndex: 14,
	},
]);

attr = Parser.parse('<p id="a>').querySelector('html-attr');
assert.equal(attr, 'id="a');
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'unclosed-quote',
		severity: 'warning',
		message: 'unclosed quotes',
		startLine: 0,
		startCol: 6,
		startIndex: 6,
		endLine: 0,
		endCol: 8,
		endIndex: 8,
		suggestions: [
			{
				range: [8, 8],
				text: '"',
				desc: 'close',
			},
		],
	},
]);

attr = Parser.parse('<p align=center>').querySelector('html-attr');
assert.equal(attr, 'align=center');
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'obsolete-attr',
		severity: 'warning',
		message: 'obsolete attribute',
		startLine: 0,
		startCol: 3,
		startIndex: 3,
		endLine: 0,
		endCol: 8,
		endIndex: 8,
	},
]);
// lint (Node.js)
var attr = Parser.parse('<br style="foo">').querySelector('html-attr');
assert.equal(attr, 'style="foo"');
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'invalid-css',
		code: 'css-semicolonexpected',
		severity: 'error',
		message: 'semi-colon expected',
		startLine: 0,
		startCol: 14,
		startIndex: 14,
		endLine: 0,
		endCol: 14,
		endIndex: 14,
	},
	{
		rule: 'invalid-css',
		code: 'css-colonexpected',
		severity: 'error',
		message: 'colon expected',
		startLine: 0,
		startCol: 14,
		startIndex: 14,
		endLine: 0,
		endCol: 14,
		endIndex: 14,
	},
]);

attr = Parser.parse('<br style="-moz-border-radius: 0">')
	.querySelector('html-attr');
assert.equal(attr, 'style="-moz-border-radius: 0"');
assert.deepStrictEqual(attr.lint(), [
	{
		rule: 'invalid-css',
		code: 'vendorPrefix',
		severity: 'warning',
		message:
		"Also define the standard property 'border-radius' for compatibility",
		startLine: 0,
		startCol: 11,
		startIndex: 11,
		endLine: 0,
		endCol: 29,
		endIndex: 29,
	},
]);

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');
attr.rename('{{{1}}}');
assert.equal(attr, '{{{1}}}=a');

setValue

展开

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

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

attr = Parser.parse('{{template|<p id>}}').querySelector('html-attr');
assert.equal(attr, 'id');
attr.setValue('a');
assert.equal(attr, 'id{{=}}"a"');

toHtml

展开

加入的版本:1.10.0

returns: string
转换为 HTML。

// toHtml (main)
var attr = Parser.parse('<poem compact/>').querySelector('ext-attr');
assert.equal(attr, 'compact');
assert.strictEqual(attr.toHtml(), '');

attr = Parser.parse('<p dir=unknown>').querySelector('html-attr');
assert.equal(attr, 'dir=unknown');
assert.strictEqual(attr.toHtml(), '');

attr = Parser.parse('<p id=" ">').querySelector('html-attr');
assert.equal(attr, 'id=" "');
assert.strictEqual(attr.toHtml(), '');

attr = Parser.parse('<p aria-describedby=" a  b ">')
	.querySelector('html-attr');
assert.equal(attr, 'aria-describedby=" a  b "');
assert.strictEqual(attr.toHtml(), 'aria-describedby="a b"');

attr = Parser.parse('<p id=" a  b ">').querySelector('html-attr');
assert.equal(attr, 'id=" a  b "');
assert.strictEqual(attr.toHtml(), 'id="a_b"');

attr = Parser.parse(`<p title=' a\n\n" '>`).querySelector('html-attr');
assert.equal(attr, `title=' a\n\n" '`);
assert.strictEqual(attr.toHtml(), 'title="a &quot;"');
⚠️ **GitHub.com Fallback** ⚠️