AttributeToken (EN) - bhsd-harry/wikiparser-node GitHub Wiki
Table of Contents
A single attribute of extension tags, HTML tags and tables. This class 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.
✅ Expand
type: boolean
Whether the quotes are matched. Read-only in the Mini and Browser versions.
// 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; // cannot set to false
assert.equal(attr, 'id="a"');✅ Expand
type: string
The name of the attribute in lowercase, read-only.
// 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');✅ Expand
type: string
The name of the tag in lowercase, read-only.
// 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');✅ Expand
type: string
Type of the token.
// 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');Expand
type: string | true
See getValue and setValue methods.
// 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 >');Expand
returns: this
Deep clone the node.
// 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);Expand
Close the quotes.
// close (main)
var attr = Parser.parse('<p id="a>').querySelector('html-attr');
assert.equal(attr, 'id="a');
attr.close();
assert.equal(attr, 'id="a"');Expand
version added: 1.17.1
param: string property name
param: string | number | undefined property value (optional)
returns: string | undefined
Get the value of a style property.
// 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"');Expand
Escape equal signs. Used inside templates.
// 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');✅ Expand
returns: string | true
Get the value of the attribute.
// 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(), '');🌐 Expand
Save the syntax tree as 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',
},
],
},
],
});✅ Expand
returns: LintError[]
Report potential grammar errors.
// 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,
},
]);Expand
param: string Attribute name
Rename the attribute.
// 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');Expand
param: string | boolean Attribute value
Set the value of the attribute.
// 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"');Expand
version added: 1.10.0
returns: string
Convert to 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 ""');