fix: #218

taoqf · Aug 17, 2023 · 6f6c824 · 6f6c824
1 parent cdadb13
commit 6f6c824
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/src/nodes/html.ts b/src/nodes/html.ts
@@ -158,7 +158,7 @@ export default class HTMLElement extends Node {
 			return 'null';
 		}
 
-		return JSON.stringify(attr.replace(/"/g, '&quot;')).replace(/\\t/g, '\t').replace(/\\n/g, '\n').replace(/\\r/g, '\r');
+		return JSON.stringify(attr.replace(/"/g, '&quot;')).replace(/\\t/g, '\t').replace(/\\n/g, '\n').replace(/\\r/g, '\r').replace(/\\/g, '');
 	}
 
 	/**
@@ -713,7 +713,7 @@ export default class HTMLElement extends Node {
 		// Update rawString
 		this.rawAttrs = Object.keys(attrs)
 			.map((name) => {
-				const val = JSON.stringify(attrs[name]);
+				const val = this.quoteAttribute(attrs[name]);
 				if (val === undefined || val === 'null') {
 					return name;
 				}

diff --git a/test/tests/issues/218.js b/test/tests/issues/218.js
@@ -0,0 +1,46 @@
+const { parse } = require('@test/test-target');
+
+describe('issue 218', function () {
+	it('attribute value contains quote should be parsed correct', function () {
+		const html = `<html>
+  <div id="_" title='"world"' onClick='alert("hello")' color="red">nochange</div>
+  <div id="e" title='"world"' color="red">expected</div>
+  <div id="a" title='"world"' onClick='alert("hello")' color="red">actual</div>
+</html>`;
+		const root = parse(html);
+		root.toString().should.eql(`<html>
+  <div id="_" title='"world"' onClick='alert("hello")' color="red">nochange</div>
+  <div id="e" title='"world"' color="red">expected</div>
+  <div id="a" title='"world"' onClick='alert("hello")' color="red">actual</div>
+</html>`);
+		root.querySelector('#e').setAttribute('onClick', "alert('hello')");
+
+		root.toString().should.eql(`<html>
+  <div id="_" title='"world"' onClick='alert("hello")' color="red">nochange</div>
+  <div id="e" title="&quot;world&quot;" color="red" onClick="alert('hello')">expected</div>
+  <div id="a" title='"world"' onClick='alert("hello")' color="red">actual</div>
+</html>`);
+
+		// root.querySelector('#a').setAttribute('title', '"replaced"');
+		root.querySelector('#a').removeAttribute('color'); // FIXME
+
+		root.toString().should.eql(`<html>
+  <div id="_" title='"world"' onClick='alert("hello")' color="red">nochange</div>
+  <div id="e" title="&quot;world&quot;" color="red" onClick="alert('hello')">expected</div>
+  <div id="a" title="&quot;world&quot;" onClick="alert(&quot;hello&quot;)">actual</div>
+</html>`);
+		root.querySelector('#a').setAttribute('title', '"replaced"');
+		root.toString().should.eql(`<html>
+  <div id="_" title='"world"' onClick='alert("hello")' color="red">nochange</div>
+  <div id="e" title="&quot;world&quot;" color="red" onClick="alert('hello')">expected</div>
+  <div id="a" title="&quot;replaced&quot;" onClick="alert(&quot;hello&quot;)">actual</div>
+</html>`);
+	});
+	it('should escape newlines to html entities', function () {
+		const root = parse('<p></p>');
+		const p = root.firstChild;
+		p.setAttribute('a', '1\n2');
+		p.getAttribute('a').should.eql('1\n2');
+		p.toString().should.eql('<p a="1\n2"></p>');
+	});
+});