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

Author: TKDev7

src/rules/no-html.js

@@ -24,7 +24,7 @@ import { findOffsets } from "../util.js";
 // Helpers
 //-----------------------------------------------------------------------------
 
-const htmlTagPattern = /<([a-z0-9]+(?:-[a-z0-9]+)*)/giu;
+const htmlTagPattern = /<([a-z0-9]+(?:-[a-z0-9]+)*)[^>]*>/giu;
 
 //-----------------------------------------------------------------------------
 // Rule Definition
@@ -75,6 +75,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,
@@ -84,9 +85,16 @@ export default {
 						line: node.position.start.line + lineOffset,
 						column: node.position.start.column + columnOffset,
 					};
+
+					const firstLineEnd = fullMatch.indexOf("\n");
+					const endColumn =
+						firstLineEnd === -1
+							? start.column + fullMatch.length
+							: start.column + firstLineEnd;
+
 					const end = {
 						line: start.line,
-						column: start.column + match[0].length + 1,
+						column: endColumn,
 					};
 
 					if (allowed.size === 0 || !allowed.has(tagName)) {

tests/rules/no-html.test.js

@@ -130,5 +130,112 @@ 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: '<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" },
+				},
+			],
+		},
 	],
 });