How to: capture text from a page with inline scripts using jQuery

[#1]

Scenario:

You have some HTML that looks like this, which triggers a download when you click the link:

<a href="#" id="download-button">
  <img src="book.png" id="book-image">
  <script language="JavaScript">
    if (window.picturefill) {window.picturefill();}
  </script>
  Download user guide
</a>

You want to record the text inside the <a> link tag in your web analytics reports. Typically it's ok to use something like this, either in a JavaScript Code extension, or using a jQuery onHandler extension:

// Capture clicks on the button and fire a link event
// Set page_name using jQuery.text()
jQuery("#download-button").on("click", function (event) {
  var link = jQuery(this);
  utag.link({
    interaction_event : "download",
    page_name : link.text()
  });
});

This code creates a "link" event with two fields in the data object: an event and a name for the button that was clicked, which should be the visible text on the link.

You can't use jQuery.text()

Unfortunately the method jQuery(node).text() doesn't just give you the text of the link. It also catches the content of the <script> block. So the page_name comes out as:

"if (window.picturefill) {window.picturefill();}  Download user guide"

You can't use innerText

One possibility is to use the browser's innerText property in Internet Explorer and Chrome. However this is not supported in Firefox, so you need to use a fallback method:

// Set page_name using textContent or innerText
jQuery("#download-button").on("click", function (event) {
  var link = jQuery(this);
  utag.link({
    interaction_event : "download",
    page_name : link.textContent || link.innerText
  });
});

And in Firefox, the textContent property also includes the content of the <script> node so that it gives the same content as above. This solution works in IE but not in Firefox.

Solution: use jQuery to strip scripts

So here is the cross-browser answer. Use jQuery to strip out the scripts, and then collect the text content from the inside.

// Full solution using jQuery to remove scripts
jQuery("#home-button").on("click", function (event) {
  var link = jQuery(this); 
  // clone the node, strip out scripts and get text
  var name = link.clone().find("script,noscript,style").remove().end().text();
  // remove whitespace and new lines
  name = name.replace(/\s+/g, " ");
  // remove any whitespace at the start and end 
  name = jQuery.trim(name);
  utag.link({
    interaction_event : "download",
    page_name : name
  }); 
});

And now, the page_name contains just the visible text as expected.

"Download user guide"

Conclusion

It's not common to put a script inline inside a HTML element that you would like to collect. But if you do run into this situation, I hope this solution helps you.