fix: improve no-html rule's tag location reporting (#491)

* fix: improve no-html rule's tag location reporting

* use regex pattern instead of indexOf

* correctly handle > in HTML attribute values

* add test

* simplify regex for detecting line endings

Author: TKDev7

src/rules/no-html.js

@@ -24,7 +24,9 @@ import { findOffsets } from "../util.js";
 // Helpers
 //-----------------------------------------------------------------------------
 
-const htmlTagPattern = /<([a-z0-9]+(?:-[a-z0-9]+)*)/giu;
+const htmlTagPattern =
+	/<([a-z0-9]+(?:-[a-z0-9]+)*)(?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)?>/giu;
+const lineEndingPattern = /\r\n?|\n/u;
 
 //-----------------------------------------------------------------------------
 // Rule Definition
@@ -82,6 +84,7 @@ export default {
 				let match;
 
 				while ((match = htmlTagPattern.exec(node.value)) !== null) {
+					const fullMatch = match[0];
 					const tagName = match[1];
 					const { lineOffset, columnOffset } = findOffsets(
 						node.value,
@@ -91,9 +94,17 @@ export default {
 						line: node.position.start.line + lineOffset,
 						column: node.position.start.column + columnOffset,
 					};
+
+					const firstNewlineIndex =
+						fullMatch.search(lineEndingPattern);
+					const endColumn =
+						firstNewlineIndex === -1
+							? start.column + fullMatch.length
+							: start.column + firstNewlineIndex;
+
 					const end = {
 						line: start.line,
-						column: start.column + match[0].length + 1,
+						column: endColumn,
 					};
 
 					const tagToCheck = allowedIgnoreCase

tests/rules/no-html.test.js

@@ -222,5 +222,207 @@ ruleTester.run("no-html", rule, {
 				},
 			],
 		},
+		{
+			code: "<span >Content</span>",
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 8,
+					data: { name: "span" },
+				},
+			],
+		},
+		{
+			code: '<div id="foo">Some content</div>',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 15,
+					data: {
+						name: "div",
+					},
+				},
+			],
+		},
+		{
+			code: '<p class="text-center" data-attr="value">Content</p>',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 42,
+					data: {
+						name: "p",
+					},
+				},
+			],
+		},
+		{
+			code: '<span\nclass="highlight"\ndata-id="123">Text</span>',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 6,
+					data: {
+						name: "span",
+					},
+				},
+			],
+		},
+		{
+			code: '<span\rclass="highlight"\rdata-id="123">Text</span>',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 6,
+					data: {
+						name: "span",
+					},
+				},
+			],
+		},
+		{
+			code: '<span\r\nclass="highlight"\r\ndata-id="123">Text</span>',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 6,
+					data: {
+						name: "span",
+					},
+				},
+			],
+		},
+		{
+			code: '<div   class="test"   >Content</div>',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 24,
+					data: { name: "div" },
+				},
+			],
+		},
+		{
+			code: '<input type="text" placeholder="Enter text" />',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 47,
+					data: {
+						name: "input",
+					},
+				},
+			],
+		},
+		{
+			code: '<a href="#"><span class="highlight">Link</span></a>',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 13,
+					data: { name: "a" },
+				},
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 13,
+					endLine: 1,
+					endColumn: 37,
+					data: { name: "span" },
+				},
+			],
+		},
+		{
+			code: '<input placeholder=">" />',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 26,
+					data: {
+						name: "input",
+					},
+				},
+			],
+		},
+		{
+			code: "<input placeholder='>'></input>",
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 24,
+					data: {
+						name: "input",
+					},
+				},
+			],
+		},
+		{
+			code: '<input\nplaceholder=">" />',
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 7,
+					data: {
+						name: "input",
+					},
+				},
+			],
+		},
+		{
+			code: dedent`
+			<!-- comment -->
+			<input
+				placeholder="Enter name"
+         		name="First Name"
+		 	/>`,
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 2,
+					column: 1,
+					endLine: 2,
+					endColumn: 7,
+					data: {
+						name: "input",
+					},
+				},
+			],
+		},
 	],
 });