I use the following code to automatically grab/set the latest page title every 30 seconds:

<script type="text/javascript">
   setInterval(function() {
      var data = ".php";
      $.get(document.location.toString()).then(function (data){
      //find and set the title of the page
      document.title = data.match(/<title>(.+)<\/title>/)[1];
        });
    }, 30000);
</script>  

It works great, except for titles which include an ampersand. These load normally, and then after 30 seconds are replaced with:

&

So if the page title is:

Fun & Games

After 30 seconds, it bees:

Fun & Games

Thanks

I use the following code to automatically grab/set the latest page title every 30 seconds:

<script type="text/javascript">
   setInterval(function() {
      var data = "http://mysite./mypage.php";
      $.get(document.location.toString()).then(function (data){
      //find and set the title of the page
      document.title = data.match(/<title>(.+)<\/title>/)[1];
        });
    }, 30000);
</script>  

It works great, except for titles which include an ampersand. These load normally, and then after 30 seconds are replaced with:

&

So if the page title is:

Fun & Games

After 30 seconds, it bees:

Fun & Games

Thanks

• javascript
• setinterval

• Are you re-requesting the full page just to get the title? – James Montagne Commented May 16, 2013 at 20:44
• Yes, that was the only solution we could e up with. Are there better ways? – PF Billing Commented May 16, 2013 at 20:45
• The raw html between the <title> tags should have html entities escaped (i.e. & is &, < is <, etc). You'll need to decode these entities before setting document.title. – zzzzBov Commented May 16, 2013 at 20:49
• Wait. I just noticed you are querying document.location. Isn't that the current page? Why are you loading the current page in to get its title? – gen_Eric Commented May 16, 2013 at 20:51
• 2 @RocketHazmat, because when all you have is AJAX, everything looks like an HTTP Request. – zzzzBov Commented May 16, 2013 at 21:15

4 Answers 4

Instead of using a regex to extract the title, try asking the DOM what the title of the returned page is. The problem is, in your file, it's &, but once it's parsed it bees &.

$.get(document.location.toString()).then(function (data){
    //find and set the title of the page
    document.title = $(data).filter('title').text();
});

I'm assuming your raw HTML source has something like <title>Fun &amp; Games</title>, which is what it should have to be valid.

This is fine when it's processed by the browser, as it will understand the & as an ampersand.

However, in the context of JavaScript, setting document.title is a plain string, not one parsed by HTML. Therefore, the & is not interpreted, and is left as is.

Personally, I have a function called unHTMLref in my "toolbox", defined as so:

window.unHTMLref = function(str) {
    if( !str) return str;
    var d = document.getElementById('__unHTMLref');
    if( !d) {
        d = document.createElement('div');
        d.id = '__unHTMLref';
        d.style.display = "none";
        document.body.appendChild(d);
    }
    d.innerHTML = str.replace(/</g,'&lt;');
    return d.firstChild.nodeValue;
};

This will decode all HTML entities, and return the parsed string.

The problem with '&' is that it is in '&amp'. You should inspect the element with developer tools to see if it is actually Fun & Games, in which case, this is a problem with the replace function you are using, since it isn't checking to see if there is an 'amp;' after it finds '&'.

In that case, use indexOf and some if statements to make sure you aren't fixing something that isn't broken.

If that isn't the problem, make sure you are using the .html() function, and not the .text() function.

<script type="text/javascript">
   setInterval(function() {
      var data = "http://mysite./mypage.php";
      $.get(document.location.toString()).then(function (data){
      //find and set the title of the page
      document.title = data.match(/<title>(.+)<\/title>/)[1].split("&amp;").join("&");
        });
    }, 30000);
</script>  

// BONUS: generic de-html escaping in JS:
o=document.createElement("div");
o.innerHTML=(" this &amp; that");
o.textContent // ===  "this & that"