Управлять элементом 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, я боюсь, что, по крайней мере, некоторые браузеры будут вести себя странно, если это вообще сработает.

Итак, я хочу извлечь параметр конфигурациии вызов lib, так что я могу вызвать их только один раз и извлечь конфигурацию кнопок, чтобы я мог разместить ее на странице столько раз, сколько захочу.

Я уже сделал это:

    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();