Merge pull request taoqf#122 from lamplightdev/main

Fixes taoqf#62 - Escape double quotes in attribute values

Author: taoqf

src/nodes/html.ts

@@ -119,6 +119,20 @@ export default class HTMLElement extends Node {
 	 * Node Type declaration.
 	 */
 	public nodeType = NodeType.ELEMENT_NODE;
+
+	/**
+	 * Quote attribute values
+	 * @param attr attribute value
+	 * @returns {string} quoted value
+	 */
+
+	private quoteAttribute(attr: string) {
+		if (attr === null) {
+			return "null";
+		}
+
+		return JSON.stringify(attr.replace(/"/g, '"'));
+	}
 	/**
 	 * Creates an instance of HTMLElement.
 	 * @param keyAttrs	id and class attribute
@@ -708,7 +722,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 === 'null' || val === '""') {
 				return name;
 			}
@@ -739,7 +753,7 @@ export default class HTMLElement extends Node {
 			if (val === 'null' || val === '""') {
 				return name;
 			}
-			return `${name}=${JSON.stringify(String(val))}`;
+			return `${name}=${this.quoteAttribute(String(val))}`;
 
 		}).join(' ');
 	}

test/quoteattributes.js

@@ -0,0 +1,31 @@
+const { parse } = require('../dist');
+
+// https://github.com/taoqf/node-html-parser/issues/62
+describe('quote attributes', function () {
+  it('escapes double quotes when using setAttribute', function () {
+    const root = parse(`<div></div>`);
+    const div = root.firstChild;
+    div.setAttribute('foo', '[{"bar":"baz"}]');
+    div
+      .toString()
+      .should.eql('<div foo="[{&quot;bar&quot;:&quot;baz&quot;}]"></div>');
+  });
+
+  it('escapes double quotes when using setAttributes', function () {
+    const root = parse(`<div></div>`);
+    const div = root.firstChild;
+    div.setAttributes({ foo: '[{"bar":"baz"}]' });
+    div
+      .toString()
+      .should.eql('<div foo="[{&quot;bar&quot;:&quot;baz&quot;}]"></div>');
+  });
+
+  it('parses attributes containing &quot;', function () {
+    const root = parse('<div foo="[{&quot;bar&quot;:&quot;baz&quot;}]"></div>');
+    const div = root.firstChild;
+    div.getAttribute('foo').should.eql('[{"bar":"baz"}]');
+    div.attributes.should.eql({
+      foo: '[{"bar":"baz"}]',
+    });
+  });
+});