0

Given HTML source code as a string, is it possible to find the start and end column + line number that a tag appears on given a CSS selector for that tag? For example, given this string:

<h1>test</h1><h1 class="cls">
<p>1234</p>456</h1><p>789

I want to know the start and end positions of the tag that matches the selector "h1.cls".

I know I can use https://developer.mozilla.org/en-US/docs/Web/API/DOMParser to parse the string into HTML and fetch tags with selectors but I can't see any way to get the line numbers the tags would be on e.g.:

const doc = new DOMParser().parseFromString(input, "text/html");
fstr
  • 900
  • 3
  • 10
  • 31
  • You could try converting your selector into a regular expression, but mixing HTML and regexes [has some known issues](https://stackoverflow.com/a/1732454/2059482). Any chance you could explain why you're trying to do this? It seems rather odd to be trying to map from the semi-abstract DOM tree *back* to the literal text of the document. – solarshado Dec 09 '18 at 06:42
  • @solarshado I'm trying to highlight errors in the HTML like a linter, problems unsupported tags and bad IDs. I use selectors to find elements with problems with jquery style code then want to display the errors found to the user. I'd rather not use regexes but they're not reliable. – fstr Dec 09 '18 at 08:09
  • In that case, you should probably avoid anything like DOMParser; I'm sure it's as lenient and forgiving as possible, like browsers are. You're going to need something that'll parse the text at a much lower level, and likely won't have support for anything as advanced as CSS selectors. A bit of googling turned up [this](https://github.com/chinchiheather/html-linter) existing linter which might make a decent starting point. – solarshado Dec 09 '18 at 08:30

0 Answers0