Question

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

注释的代码块如下所示：

<!--[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);
    });
});

到目前为止，这仅提醒本机HTML注释，而不是我想要更改的特定mso注释。

还有其他方法来定位此评论吗？任何帮助将不胜感激！

Answer 1

我在各种场景中写了一些简单代码，你可以使用其中一个你想要的基础巫婆。 ;）

我通过 IE 11

测试了它们

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

<强> www.mysite。 com ＆lt;＆lt;这是默认值

www.example.com ＆lt;＆lt;这是我们的新值

现在代码：

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

代码在运行任何脚本之前说明： enter image description here

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后的结果 enter image description here

B）Javascript （一起更改 v：roundrect 标记＆amp; 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后的结果 enter image description here

C）Javascript （只需更改HREF属性 A 标记）

在这种情况下，您只需使用以下jquery代码：

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

运行脚本C后的结果 enter image description here

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

1 个答案: