javascript - 使用Javascript 修改HTML 代码中的mso 注释？

Question

我目前正在尝试开发一个小工具来更改 html 文件中的某些元素 - 其中一个元素是用于电子邮件的“防弹 CSS 按钮”，如下页所示:

Campaign Monitor

注释的代码块如下所示:

<!--[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]-->

现在，如您所见，此类代码包含一个 mso 注释，我想知道是否有任何方法可以使用 Javascript 来定位此元素并更改 href 属性，我尝试使用以下代码:

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

到目前为止，这只会提醒 native HTML 注释，而不是我想更改的特定 mso 注释。

还有其他方法可以针对此评论吗？任何帮助将不胜感激!

Answer 1

我写了一些各种场景下的简单代码，你可以使用其中一个你想要的基本女巫。 ;)

我用 IE 11 测试了它们

在这些示例中，我们有一些 HREF 值:

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

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

现在代码:

HTML

这个:

<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>

或者这个:

<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>

运行任何脚本前的代码状态:

.

---

.

A) Javascript(只是改变 v:roundrect 标签的 HREF 属性)

$("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;
}

运行脚本 A 后的结果

.

---

.

B) Javascript(同时更改 v:roundrect 标记和 A 标记的 HREF 属性)

$(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;
}

运行脚本 B 后的结果

.

---

.

C) Javascript(只需更改 HREF 属性 A 标记)

在这种情况下，您可以简单地使用下面的 jquery 代码:

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

运行脚本 C 后的结果