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!

Tried in in Chrome, strangely it only outputs the native HTML comments like  — Ber B
– Ber B, Commented Oct 20, 2014 at 13:16
Note that .contents() will only return the child nodes of <body> it won't search recursively and in the example you gave the comments is in a <div>. Please post your HTML code you're using. — Luizgrs
– Luizgrs, Commented Oct 20, 2014 at 13:19

Ramin Bateni Parvar · Accepted Answer · 2014-10-22 20:23:56Z

4

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: enter image description here

.

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 enter image description here

.

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 enter image description here

.

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 enter image description here

edited Oct 22, 2014 at 20:23

answered Oct 20, 2014 at 18:44

Ramin Bateni Parvar

17.6k13 gold badges80 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ber B Over a year ago

Thanks for your answer, currently the button contains a  comment after the <a tag> the code provided changes the href inside the mso comment correclty, but it also modifies the comment at the bottom of the <a> tag - is there any way to avoid this?

Ramin Bateni Parvar Over a year ago

@BerB, i added some examples with various scenarios in my answer. you can select witch you want. if you have any question write here.

Ber B Over a year ago

Hello, I want to apply example B - it works fine but the HTML structure I have a is a bit different, please follow this link to see a screenshot of the image: Image; As you can see I have an extra <!--[if mso]> tag just underneath my a link, this comment also changes when I run the script Example. Is there any way to only modify the first comment and leave the second untouched? Thanks for your detailed answers!

Ramin Bateni Parvar Over a year ago

@BerB, reuse new example B... I changed the replaceHrefWithNew function and add a IF statement to prevent replace HREF when there is not any HREF property. Also i added an IF statement inside EACH section of jquery codes to avoid work on next <!--[if mso]> statements. BUT if you remove it, the codes will be work well yet, because i changed The replaceHrefWithNew Function in previous explained part of this comment. However better code is when you use both implicit IF statement to prevent useless loops in codes. ;)

Xahed Kamal Over a year ago

how can i change the MSO button's title/caption?

|

Collectives™ on Stack Overflow

Use Javascript to modify mso comment in HTML code?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related