操作 DOM 元素以提取一些节点并删除其他节点

Question

我需要操作 HTML 代码。具体来说，用户应该能够复制/粘贴代码以在文本区域中创建 AddThis 按钮，并且我想操作粘贴的代码。

典型的 AddThis 按钮如下所示：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-123456798"></script>
<!-- AddThis Button END -->

它由开始和结束注释、div 和/或一些链接组成，后跟 2 个脚本：一个配置设置和对其库的调用。

问题是，我们需要在页面上多次调用它；所以，如果我每次想放置 AddThis 按钮时都放置这个，我担心至少某些浏览器会出现奇怪的行为（如果它真的有效的话）。

所以，我想提取配置设置和库调用，这样我就可以只调用它们一次，并提取按钮配置，这样我可以在页面上放置任意多次。

我已经这样做了：

    var codeAT = $(this).val();
    if (codeAT.indexOf("AddThis Button BEGIN") >= 0) {
        codeAT = codeAT.replace("&lt;", "<");
        codeAT = codeAT.replace("&gt;", ">");

        codeAT = $(codeAT);

        // extract the call to the config var and the lib
        var scriptConfig = "";
        var scriptSRC = "";
        codeAT.each(function() {
            if ($(this).attr("nodeName") == "SCRIPT") {
                if ($(this).attr("src") && $(this).attr("src") != "") {
                    scriptSRC = $(this).attr("src");
                } else {
                    scriptConfig = $(this).text();
                }
            }
        });

        // extract the addthis identifier
        scriptSRC = scriptSRC.split("=")[1];
    }

现在，我可以使用 vars scriptConfig （使用 var addthis_config = {"data_track_clickback":true};）和 scriptSRC （使用 ra-123456789） ，并且它们具有正确的值。

我现在想要的是原始代码（在两个注释之间），没有注释，也没有脚本标签。

为了删除标签，我尝试使用 codeAT.remove($(this))，但它崩溃了（c.replace 不是一个函数）。

为了取回代码，我尝试了 codeAT.html()，但它只获取了标签。

Answer 1

我会这样做，而不是 .each() ：

//remove <script> tags and get required info
var scriptSRC = $('script[src]', codeAT).remove().attr('src');
var scriptConfig = $('script:not([src])', codeAT).remove().text();

//get the code (as string)
var code = $('<div>').append(codeAT).remove().html();