Question

我的任务是将数百个Word文档页面转换为知识库html应用程序。这意味着将word文档的HTML复制并粘贴到Notepad ++等编辑器中并进行清理。（因为它是我需要转换的内部文档，所以我不能使用在线转换器。）

我已经能够使用javascript函数完成我需要的大部分工作，该函数对body标签的“onload”起作用。然后我将生成的HTML复制到我的应用程序框架中。

以下是我编写的函数的一部分:(它仅显示删除div和p标记属性的代码，但适用于文档中的所有html标记）

    function removeatts() //this function will remove all attributes from all elements and also remove empty span elements

    {//for removing div  tag attributes
    var divs=document.getElementsByTagName('div'); //look at all div tags
    var divnum=divs.length; //number of div tags on the page

        for (var i=0; i<divnum; i++) //run through all the div tags
        {//remove attributes for each div tag

            divs[i].removeAttribute("class");
            divs[i].removeAttribute("id");
            divs[i].removeAttribute("name");    
            divs[i].removeAttribute("style");
            divs[i].removeAttribute("lang");

        }

        //for removing p  tag attributes
        var ps=document.getElementsByTagName('p'); //look at all p tags
        var pnum=ps.length; //number of p tags on the page

        for (var i=0; i<pnum; i++) //run through all the p tags
        {//remove attributes for each p tag
            var para=ps[i].innerHTML;
            if (para.length!==0) //ie if there is content inside the p tag
            {
                ps[i].removeAttribute("class");
                ps[i].removeAttribute("id");
                ps[i].removeAttribute("name");  
                ps[i].removeAttribute("style");
                ps[i].removeAttribute("lang");
            }
            else
            {//remove empty p tag

                ps[i].remove() ;
                                }

            if (para=="<o:p></o:p>" || para=="<o:p> </o:p>" || para=="<o:p>  </o:p>") 
            {
                ps[i].remove() ;

            }
        }

我遇到的第一个问题是，如果我将if (para=="<o:p></o:p>" || para=="<o:p> </o:p>" || para=="<o:p> </o:p>")部分包含在else if语句中，整个函数就会停止执行。

但是，如果没有if (para=="<o:p></o:p>" || para=="<o:p> </o:p>" || para=="<o:p> </o:p>")部分，该函数将完全按照预期执行。

但是，如果我按照它现在的方式保持它，它会做我希望它做的一些事情。

一些Word生成的html出现问题，如下所示：

      <p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; margin-
    left:.25in;text-align:justify;text-indent:-.25in;line-height:150%;
    mso-list:l0 level1 lfo1;tab-stops:list .75in'>
    <![if !supportLists]><span style='font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol;color:black'><span style='mso-list:Ignore'>·
    <span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </span></span></span>
    <![endif]><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:Calibri;color:black'>
    SOME TEXT.<span style='mso-spacerun:yes'>  </span>SOME MORE TEXT.<span style='mso-spacerun:yes'>  </span>EVEN MORE TEXT.
    <span style='mso-spacerun:yes'>  </span>BLAH BLAH BLAH.<o:p></o:p></span></p>
    <p><o:p></o:p></p>

注意最后两行中的<o:p></o:p> .....当被视为纯文本或者我在函数中为它编写代码时，它不会被删除，就像div和段落一样上面的功能。当我在这个上运行函数时，我得到了

    <p>
    <![if !supportLists]><span>·
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </span></span></span>
    <![endif]><span>
    SOME TEXT.<span>  </span>SOME MORE TEXT.<span>  </span>EVEN MORE TEXT.
    <span>  </span>BLAH BLAH BLAH.<o:p></o:p></span></p>
    <p><o:p></o:p></p>

我环顾四周但找不到有关javascript是否在已知的html标签上运行相同的信息以及类似的内容，这些信息遵循打开和关闭标签的原则，但与已知的HTML标签不匹配！

非常感谢有关变通方法的任何想法！

Answer 1

Javascript在javascript字符串中没有对HTML标记进行特殊处理。老实说它对字符串中的HTML一无所知。

您的问题更有可能是尝试将标记的.innerHTML与预定字符串进行比较。您不能也不应该这样做，因为.innerHTML的格式没有保证。由于有数百种方法可以格式化相同的HTML并且某些浏览器不记得原始HTML，但是当您要求.innerHTML时重新构建它，您根本无法进行这种类型的字符串比较。

为了确保你的比较，你必须实际解析HTML（至少使用某种粗糙的解析器，甚至可能是一个正则表达式）来查看它是否符合你想要的，因为你不能依赖直接字符串比较中的可选间距或可选的capitilization。

或者，甚至可能更好，因为您的HTML已经被解析，为什么不只是查看实际的HTML对象本身，看看你是否有你想要的东西。您甚至不必删除所有这些属性。

Answer 2

不是Javascript对未知标签不满意。它是浏览器。

对于JS来说，它只是一个字符串。因此，如果它是一个非常具体的案例，您根本不需要<o:p>，那么您可以通过使用正则表达式本身来删除它。

para.replace(/<[/]?o:p>/ig, "");

但如果还有更多，我强烈建议您熟悉XSLT转换。

Answer 3

我遇到的第一个问题是如果我加入了if (para=="<o:p></o:p>" || para=="<o:p> </o:p>" || para=="<o:p> </o:p>") 在else if语句中，整个函数停止执行。

这是因为else if之后您无法else。

注意最后两行中的<o:p></o:p> .....这不会被删除

我无法确认。当我运行你的函数时，它会删除<o:p>内的<p>，就像它应该的那样。 <o:p>中的<span>未经处理，因为您的功能不会这样做。

如果您要删除所有 <o:p>，请尝试

[].forEach.call(document.querySelectorAll('o\\:p'), function (el) {
    el.remove();
});

之后，您可能想要删除这样的空<p>

[].forEach.call(document.querySelectorAll('p'), function (el) {
    if (!el.childNodes.length) {
        el.remove();
    }
});

javascript是否考虑＆lt;＆gt;中包含的所有内容作为HTML标签？

3 个答案: