How can I add hover-over text to an existing web page in Javascript without using ID tags?

Question

I am building a Chrome extension which I would like to eventually have several features to add enhancements to an existing web application. The first of those features will be to add some hover-over (aka tooltip or mouse over) text to certain elements of certain pages within an existing website. Unfortunately the places on the page where I want to add the text to don't have any specific ID tags to reference, so I figured I would replace unique parts of the text on the page.

So here is an example of the code of the original webpage:

<html>
<table>
<tr>
  <td>First Name</td>
  <td>Last Name</td>
</tr>
<tr>
  <td>John</td>
  <td>Smith</td>
</tr>
</table>
</html>

And this is what I want it to look like after Javascript adds in the hover-over text (I am open to the way the hover-over text is applied, as long as it has hover-over text...I know applying span title tags works in Chrome):

<html>
<table>
<tr>
  <td><span title="First Name of the student">First Name</span></td>
  <td><span title="Last Name of the student">Last Name</span></td>
</tr>
<tr>
  <td>John</td>
  <td>Smith</td>
</tr>
</table>
</html>

This is the Javascript that I have so far. It works, but is there a way to make it more efficient, or is there a better way to do this?

document.body.innerHTML = document.body.innerHTML
  .replace(/>First Name</g, '><span title="First Name of the student">First Name</span><')
  .replace(/>Last Name</g, '><span title="Last Name of the student">Last Name</span><');

Thank you in advance for your help, an thank you for the opportunity to rewrite my question for clarity.

Don't do this Repeat after me. The DOM is not a string. The DOM is not a string. I will not manipulate the DOM as if it were a string. I will not manipulate the DOM as if it were a string. — , Mar 25 '16 at 04:28
What are `tagName`s of elements which contain text to be replaced at `js` at Question ? — guest271314, Mar 25 '16 at 04:47
Show us the actual HTML you're operating on so we can see the actual tags and propose DOM manipulations instead of string manipulations. — jfriend00, Mar 25 '16 at 04:50
This could be useful: http://stackoverflow.com/questions/36001242/regex-word-boundary-for-only-whitespace/36002323#36002323 — , Mar 25 '16 at 06:18
There are no tagNames in the webpage that I want to manipulate. I reworded my question above for clarity. Thank you. — user3513237, Mar 26 '16 at 04:09

score -1 · Answer 1 · answered Mar 25 '16 at 05:01

You can create an object having properties that match current element text to be replaced, values containing text to set at title attribute; use .forEach() or for loop to iterate document.body.childNodes; Object.hasOwnProperty() to check for matched text content of node, Node.replaceChild() to replace the node

var re = {
  "Stu#": "Student Number",
  "Last Name": "Student Last Name",
  "First Name": "First Name of the student"
};

document.body.childNodes
.forEach(function(el) {
  var text = (el.nodeValue || el.textContent).trim();
  if(re.hasOwnProperty(text)) {
    var span = document.createElement("span");
    span.textContent = text;
    span.setAttribute("title", re[text]);
    el.parentNode.replaceChild(span, el);
  }
});

<i>Stu#</i>
<i>Last Name</i>
<i>First Name</i>

See http://stackoverflow.com/questions/36108712/foreach-method-of-node-childnodes — guest271314, Mar 26 '16 at 23:40

How can I add hover-over text to an existing web page in Javascript without using ID tags?

1 Answers1