Using jQuery (or JavaScript) to find and replace HTML special characters

I've been banging my head against a wall here for hours.

Long story short, I have a webpage that spits out the following HTML:

™ 

That HTML, of course, does not display properly so I need to dynamically convert to the following to get a proper trademark symbol:

™ 

I'm trying to achieve this either through JavaScript or jQuery.

I found one solution that works locally on a test webpage I set up:

$('body').html($('body').html().replace('™','™'));

But the problem is when I add that to the actual website it needs to go on, it does not work and instead seems to have some kind of conflict the the other jQuery methods being used.

I'm at my wit's end. Any help would be greatly appreciated. Thanks!

---

EDIT: Sorry everyone... To be more specific, this is a WordPress website and the problem appears on a page that is generated via this sitemap plugin: http://wordpress.org/extend/plugins/sitemap-generator/.

The problem is not with that plugin necessarily, but in how that plugin interprets WordPress page titles with special characters.

There is a page that I created in WordPress which needs to have a title with the ™ symbol at the end, so in the WordPress page title area I added

™

to the end of the title text. This totally works in all aspects of the website, except that when this plugin reads the title it converts it to

™

I suppose I could try to edit the plugin and how it handles HTML special characters in WordPress page titles, but I knowledge of php is not incredibly strong so I thought an easier fix would be to manipulate the output using js since there is only 1 instance that needs to be fixed.

I am going to try the solution presented below and I will report back with the findings.

Thanks again!

---

ADDITIONAL EDIT:

Ok using the solution posted below I got it to work. However the placement of the new code is important. When I put it at the end of my JavaScript the dropdown menus in my navigation bar would not work. When I put the new code before my JS menu call, everything seemed to work fine.

Perhaps someone on here can shed some light as to why I need to put this new line of code before the call to the navigation method (superfish).

Here is the new JS that's included in the header. Note the new line near the top that starts with "document.body.innerHTML"

<script>
   $(document).ready(function(){ 

        document.body.innerHTML = document.body.innerHTML.replace(/&amp;trade;/g, "&trade;");

        $("ul.sf-menu").supersubs({ 
            minWidth:    12,   // minimum width of sub-开发者_StackOverflow社区menus in em units 
            maxWidth:    27,   // maximum width of sub-menus in em units 
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over 
                               // due to slight rounding differences and font-family 
        }).superfish();  // call supersubs first, then superfish, so that subs are 
                         // not display:none when measuring. Call before initialising 
                         // containing tabs for same reason. 


        // hide #back-top first
        $("#back-top").hide();

        // fade in #back-top
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('#back-top').fadeIn();
                } else {
                    $('#back-top').fadeOut();
                }
            });

            // scroll body to 0px on click
            $('#back-top a').click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 400);
                return false;
            });
        });


        $('.slideshow').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            cleartypeNoBg: false // This fix is needed to prevent black pixels from disapeparing during transitions in IE. Must use jquery.cycle.min for this attribute to be supported.
        });



        $(".section_page_list li:last").css({borderBottom: 'none'});

        $(".striped_table td:even").addClass("make_divider");
        $(".striped_table tr:even").addClass("alternate");
        $(".homepage_article_table td:odd").addClass("alternate");
        $(".homepage_article_table tr:last td").css({borderBottom: 'none'});
        $(".striped_table tr:first-child").addClass("first");
        $(".report_table tr:first-child").addClass("first");


        $(".press_table tr:even").addClass("alternate");
        $(".press_table tr:first-child").addClass("first");
        $(".press_table tr td:first-child").addClass("no_border");

    });
</script>

---

If its due to jQuery conflict the below should solve it. Its plain JavaScript code.

document.body.innerHTML = document.body.innerHTML.replace(/™/g, "™");

Don't you have access to the server side code of the page? If you have it then you would be better changing that code to spit the required thing instead of using JS.

---

For Brackets like characters

---

If you want to replace characters like ( or ) etc. you can make use of \ before that character.

e.g. If I want to replace () with word 'Hidden'

return x.replace(/\(\)/g, 'Hidden'); 

---

What does your source say? If the source has '™' then you probably have a javascript error before ever hitting this line.

I'd suggest it's also possible that your live server is further encoding your output - so that '™' becomes '™'