dfkaye/collect-comment-text-attribute-childnodes.js

## collect-comment-text-attribute-childnodes.js
// 21 September 2023
// Collect a node's Comment, Text, and Attribute child nodes

// should break this up into separate functions focused on node type
// then find items by their nodeValue

function collect(node) {
  var comments = [];
  var text = [];
  var attributes = [];

  function visit(node) {
    'attributes' in node && node.attributes.length
      ? attributes.push(node.attributes)
      : "";

    node.nodeType == node.ELEMENT_NODE
      ? node.childNodes.forEach(visit)
      : node.nodeType == node.COMMENT_NODE
        ? comments.push(node)
        : node.nodeType == node.TEXT_NODE
          ? text.push(node)
          : node.nodeType == node.ATTRIBUTE_NODE
            ? attributes.push(node)
            : "";
  }

  node.childNodes.forEach(visit);

  return { comments, text, attributes };
}

/* test it out */

var html = `
<head><title> * title * </title><!-- comment in head element --></head>
<body>
<h1>first</h1>
<main>
  <b>one</b> <a>main link one </a> <b>two.</b>
  <article>
    <b>three</b> <a>article link </a> <b>four.</b>
  </article>
  <!-- comment -->
  <!-- comment in main element -->
  <aside name="test" data-custom=" this is a custom attribute value ">
    <b>five</b> <a>aside link </a> <b>six.</b>
  </aside>
  <b>seven</b> <a>main link seven two </a> <b>eight.<!-- comment in bold --></b>
</main>
<b> b </b>
</body>
`;

var dom = (new DOMParser()).parseFromString(html.trim(), "text/html");

document.body.replaceChildren(...dom.body.childNodes);

var result = collect(document);

console.group("comments");
result.comments.forEach(function (comment) {
  var {nodeName, nodeType, nodeValue, parentElement} = comment;

  console.log({nodeName, nodeType, nodeValue, parentElement});
});
console.groupEnd("comments");

console.group("text");
result.text.forEach(function (text) {
  var {nodeName, nodeType, nodeValue, parentElement} = text;

  console.log({nodeName, nodeType, nodeValue, parentElement});
});
console.groupEnd("text");

console.group("attributes");
result.attributes.forEach(function (attribute) {
  Array.from(attribute).forEach(function (attribute) {
	  var {nodeName, nodeType, nodeValue, ownerElement} = attribute;

    console.log({nodeName, nodeType, nodeValue, ownerElement});
  });
});
console.groupEnd("attributes");


/*
result.attributes.forEach(function (attribute) {
  Array.from(attribute).forEach(function (attribute) {
	  var {nodeName, nodeType, nodeValue, ownerElement} = attribute;

		console.warn(attribute);
    console.log(ownerElement);
    console.log("starts with test:", nodeValue.trim().startsWith("test"));
    console.log(nodeValue.trim().endsWith("value"));
  });
});

result.comments.forEach(function (comment) {
	  var {nodeName, nodeType, nodeValue, parentElement} = comment;

    console.warn(comment);
    console.log(parentElement);
    console.log("starts with comment:", nodeValue.trim().startsWith("comment"));
    console.log(nodeValue.trim().endsWith("comment"));
});

result.text.forEach(function (text) {
  var {nodeName, nodeType, nodeValue, parentElement} = text;

  console.warn(text);
  console.log(parentElement);
  console.log("has text content?", /\S/.test(nodeValue));
//   console.log(nodeValue.trim());
});
*/
	// 21 September 2023
	// Collect a node's Comment, Text, and Attribute child nodes

	// should break this up into separate functions focused on node type
	// then find items by their nodeValue

	function collect(node) {
	var comments = [];
	var text = [];
	var attributes = [];

	function visit(node) {
	'attributes' in node && node.attributes.length
	? attributes.push(node.attributes)
	: "";

	node.nodeType == node.ELEMENT_NODE
	? node.childNodes.forEach(visit)
	: node.nodeType == node.COMMENT_NODE
	? comments.push(node)
	: node.nodeType == node.TEXT_NODE
	? text.push(node)
	: node.nodeType == node.ATTRIBUTE_NODE
	? attributes.push(node)
	: "";
	}

	node.childNodes.forEach(visit);

	return { comments, text, attributes };
	}

	/* test it out */

	var html = `
	<head><title> * title * </title><!-- comment in head element --></head>
	<body>
	<h1>first</h1>
	<main>
	<b>one</b> <a>main link one </a> <b>two.</b>
	<article>
	<b>three</b> <a>article link </a> <b>four.</b>
	</article>
	<!-- comment -->
	<!-- comment in main element -->
	<aside name="test" data-custom=" this is a custom attribute value ">
	<b>five</b> <a>aside link </a> <b>six.</b>
	</aside>
	<b>seven</b> <a>main link seven two </a> <b>eight.<!-- comment in bold --></b>
	</main>
	<b> b </b>
	</body>
	`;

	var dom = (new DOMParser()).parseFromString(html.trim(), "text/html");

	document.body.replaceChildren(...dom.body.childNodes);

	var result = collect(document);

	console.group("comments");
	result.comments.forEach(function (comment) {
	var {nodeName, nodeType, nodeValue, parentElement} = comment;

	console.log({nodeName, nodeType, nodeValue, parentElement});
	});
	console.groupEnd("comments");

	console.group("text");
	result.text.forEach(function (text) {
	var {nodeName, nodeType, nodeValue, parentElement} = text;

	console.log({nodeName, nodeType, nodeValue, parentElement});
	});
	console.groupEnd("text");

	console.group("attributes");
	result.attributes.forEach(function (attribute) {
	Array.from(attribute).forEach(function (attribute) {
	var {nodeName, nodeType, nodeValue, ownerElement} = attribute;

	console.log({nodeName, nodeType, nodeValue, ownerElement});
	});
	});
	console.groupEnd("attributes");


	/*
	result.attributes.forEach(function (attribute) {
	Array.from(attribute).forEach(function (attribute) {
	var {nodeName, nodeType, nodeValue, ownerElement} = attribute;

	console.warn(attribute);
	console.log(ownerElement);
	console.log("starts with test:", nodeValue.trim().startsWith("test"));
	console.log(nodeValue.trim().endsWith("value"));
	});
	});

	result.comments.forEach(function (comment) {
	var {nodeName, nodeType, nodeValue, parentElement} = comment;

	console.warn(comment);
	console.log(parentElement);
	console.log("starts with comment:", nodeValue.trim().startsWith("comment"));
	console.log(nodeValue.trim().endsWith("comment"));
	});

	result.text.forEach(function (text) {
	var {nodeName, nodeType, nodeValue, parentElement} = text;

	console.warn(text);
	console.log(parentElement);
	console.log("has text content?", /\S/.test(nodeValue));
	// console.log(nodeValue.trim());
	});
	*/