Way to get HTML selector from string by search-CodePudding

is there a way how I could search for any string in HTML strcture and get its selector, (or xpath)?

Here is what I mean. This is basic html strucutre:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>

</body>
</html>

I would like to be able to search for "<p>My first paragraph.</p>"

And get something like:

body > div > p

Is there any way to achieve this - preferably by using javascript or python?

Edit: What I am trying to achieve is to create somehow user friendly solution for picking elements from HTML, something like browser devtools. User uploads URL into the system. The URLs HTML is then showed to user. Then I would like user to highlight certain part (preferably everything that is between two tags, tags included) of the HTML. User is then served the selector or xpath of seleceted element.

Regards, Haggerman

CodePudding user response：

Using parentNode and while loop to backtrack parent nodes. In brief:

let par = document.querySelector("p");
let path = "";

while ( par.parentNode && par.tagName && "HTML" !== par.tagName ) {
  path = par.tagName   (("" !== path)? " > "   path: "");
  par = par.parentNode;
}

An explanation: iterate over the parent nodes—reaching top will return undefined and exit the loop. If a parent is found, and it has a tagName value, and it is not the top element, HTML, then proceed with prepending the tagName to the path variable, including a child combinator as a separator. Don't include the separator on the first iteration because path is an empty string.

...and working example:

let par = document.querySelector("p");
let path = "";

// loop parent nodes of provided element, making sure each has a tagName, and is not the HTML tag
while ( par.parentNode && par.tagName && "HTML" !== par.tagName ) {

  // prepend the tagName to the path variable
                       // don't write the child combinator on first iteration
  path = par.tagName   (("" !== path)? " > "   path: "");

  // get next parent
  par = par.parentNode;
}
console.log(path);

<div>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>

CodePudding user response：

How about something like:

var j = document.getElementById("demo");
var res = "";

function getPath(Element) {
  if (Element.tagName === "BODY") {
    res = res.concat("BODY ");
    alert(res);
  } else {

    getPath(Element.parentElement);
    res = res.concat(" > ");
    res = res.concat(Element.tagName);
  }
}

<body>
  <div>
    <p id="demo"></p>
  </div>
</body>

Done with recursion. The result will be saved inside res variable.