Use Javascript to modify mso comment in HTML code?

Question

I am currently trying to develop a small tool that changes certain elements in an html file - one of those elements is a "bulletproof CSS button" for email as seen in the following page:

Campaign Monitor

The commented block of code looks like this:

<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="height:30px;v-text-anchor:middle;width:170px;" arcsize="9%" stroke="f" fillcolor="#34adb2"><w:anchorlock><center></center></w:anchorlock></v:roundrect><![endif]-->

Now, as you can see, such code contains an mso comment, I was wondering if there is any way to use Javascript to target this element and change the href attribute, I have tried alerting the commented elements on the page using the following code:

$(function() {
    $("body").contents().filter(function(){
        return this.nodeType == 8;
    }).each(function(i, e){
        alert(e.nodeValue);
    });
});

So far this only alerts the native HTML comments and not the specific mso comment I'd like to change.

Is there any other way to target this comment? Any help will be greatly appreciated!

Answer 1

I wrote some simple codes in various scenarios, you can use one of them base witch you want. ;)

I tested them by IE 11

In these examples we have some HREFs value:

www.mysite. com << this is the default value

www.example.com << this is our new value

Now codes:

HTML

This:

<div id="mybtn">
    <a href="http://www.mySite. com" style="background-color:#556270;background-image:url(http://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a>
    <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://http://www.mySite. com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
          <v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" />
          <w:anchorlock/>
          <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
     </v:roundrect><![endif]-->
</div>

Or this:

<div id="mybtn">
    <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://http://www.mySite. com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
          <v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" />
          <w:anchorlock/>
          <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
     </v:roundrect><![endif]-->
    <a href="http://www.mySite. com" style="background-color:#556270;background-image:url(http://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a>
</div>

The codes state before running any scripts:

.

---

.

A) Javascript (just Changing HREF property of v:roundrect tag)

$("div#mybtn").contents().filter(
    function(){
        return this.nodeType == 8;
        }).each(function(i,e){
            if(i==0)
            {
               $(this)[0].data = replaceHrefWithNew($(this)[0].data,"http://www.example.com");
               console.log($(this));
             }
        });

function replaceHrefWithNew(myMso,newHrefValue)
{
    var newMso=myMso;
    var indexOfStartHref=myMso.indexOf("href")+6;
    if(indexOfStartHref>=6)
    {
        var indexOfEndHref=myMso.indexOf("\"",indexOfStartHref);

        var part1=myMso.substring(0,indexOfStartHref);
        var part2=myMso.substring(indexOfStartHref,indexOfEndHref);
        var part3=myMso.substring(indexOfEndHref);

        newMso= part1 + newHrefValue + part3;
    }
    alert(newMso);
    return newMso;
}

Result after run Script A

.

---

.

B) Javascript (Changing HREF property of v:roundrect tag & A tag together)

$(document).ready(function(){
    var webAddress="http://www.example.com";
    $("div#mybtn").contents().filter(
    function(){
        return this.nodeType == 8;
        }).each(function(i,e){
            if(i==0)
            {
               $(this)[0].data = replaceHrefWithNew($(this)[0].data,webAddress);
               console.log($(this));
            }
        });
    $("div#mybtn").find('a:first').prop("href",webAddress);
});

function replaceHrefWithNew(myMso,newHrefValue)
{
    var newMso=myMso;
    var indexOfStartHref=myMso.indexOf("href")+6;
    if(indexOfStartHref>=6)
    {
        var indexOfEndHref=myMso.indexOf("\"",indexOfStartHref);

        var part1=myMso.substring(0,indexOfStartHref);
        var part2=myMso.substring(indexOfStartHref,indexOfEndHref);
        var part3=myMso.substring(indexOfEndHref);

        newMso= part1 + newHrefValue + part3;
    }
    alert(newMso);
    return newMso;
}

Result after run Script B

.

---

.

C) Javascript (Just changing HREF property A tag)

In this case you can simply use below jquery code:

$(document).ready(function(){
    var webAddress="http://www.example.com";
    $("div#mybtn").find('a:first').prop("href",webAddress);
});

Result after run Script C