Как получить исходный код innerHTML без содержимого, сгенерированного Javascript?

Я не думаю, что есть простое решение просто «захватить исходный код», так как это должно быть что-то, что предоставляется браузером. Но, если вы хотите сделать это только для части страницы, у меня есть для вас обходной путь.

Вы можете обернуть интересующий раздел внутри «замороженного» скрипта:

<script id="frozen" type="text/x-frozen-html">

Атрибут type я только что придумал, но он заставит браузер игнорировать все внутри него. Затем вы добавляете еще один тег сценария (на этот раз правильный javascript) сразу после этого — сценарий «оттаивания». Этот сценарий оттаивания получит замороженный сценарий по идентификатору, возьмет текст внутри него и выполнит document.write, чтобы добавить фактическое содержимое на страницу. Всякий раз, когда вам нужен исходный код, он по-прежнему фиксируется в виде текста внутри замороженного сценария.

И вот оно. Недостатком является то, что я бы не стал использовать это для всей страницы... (SEO, подсветка синтаксиса, производительность...), но это вполне приемлемо, если у вас есть особые требования к части страницы.

Изменить: вот пример кода. Кроме того, как правильно указал @FlashXSFX, любые теги сценария в замороженном сценарии необходимо экранировать. Итак, в этом простом примере я создам тег <x-script> для этой цели.

<script id="frozen" type="text/x-frozen-html">
   <div id="test">
      <x-script type="text/javascript">document.write("hello");</x-script>
   </div>
</script>
<script type="text/javascript">
   // Grab contents of frozen script and replace `x-script` with `script`
   function getSource() {
      return document.getElementById("frozen")
         .innerHTML.replace(/x-script/gi, "script");
   }
   // Write it to the document so it actually executes
   document.write(getSource());
</script>

Теперь, когда вам нужен источник:

alert(getSource());

См. демонстрацию: http://jsbin.com/uyica3/edit.

Простой способ — снова получить его с сервера. Скорее всего он будет в кеше. Вот мое решение с использованием jQuery.get(). Он берет исходный uri страницы и загружает данные с помощью вызова ajax:

$.get(document.location.href, function(data,status,jq) {console.log(data);})

Это напечатает исходный код без javascript. Он не выполняет никакой обработки ошибок!

Если вы не хотите использовать jQuery для получения исходного кода, обратитесь к ответу на этот вопрос: Как сделать вызов ajax без jquery?

Не могли бы вы отправить запрос Ajax на ту же страницу, на которой вы сейчас находитесь, и использовать результат в качестве исходного HTML? Это надежно при правильных условиях, поскольку вы буквально получаете исходный HTML-документ. Однако это не сработает, если страница меняется при каждом запросе (с динамическим содержимым) или если по какой-либо причине вы не можете сделать запрос на эту конкретную страницу.

Подход грубой силы

var orig = document.getElementById("test").innerHTML;
alert(orig.replace(/<\/script>[.\n\r]*.*/i,"</script>"));

РЕДАКТИРОВАТЬ:

Это может быть лучше

var orig = document.getElementById("test").innerHTML + "<<>>";
alert(orig.replace( /<\/script>[^(<<>>)]+<<>>/i, "<\/script>"));

Если вы переопределите document.write, чтобы добавить некоторые идентификаторы в начало и конец всего, что записывается в документ сценарием, вы сможете удалить эти записи с помощью регулярного выражения.

Вот что я придумал:

    <script type="text/javascript" language="javascript">
        var docWrite = document.write;
        document.write = myDocWrite;

        function myDocWrite(wrt) {
            docWrite.apply(document, ['<!--docwrite-->' + wrt + '<!--/docwrite-->']);
        }
    </script>

Добавил ваш пример где-то на странице после исходного скрипта:

    <div id="test">
        <script type="text/javascript">     document.write("hello");</script>
    </div>

Затем я использовал это, чтобы предупредить о том, что было внутри:

    var regEx = /<!--docwrite-->(.*?)<!--\/docwrite-->/gm;
    alert(document.getElementById('test').innerHTML.replace(regEx, ''));

Если вам нужен первоначальный документ, вам нужно будет получить его снова. Нет никакого способа обойти это. Если бы не document.write() (или аналогичный код, который будет выполняться во время процесса загрузки), вы могли бы загрузить innerHTML исходного документа в память при загрузке/domready, прежде чем изменять его.

Я не могу придумать решение, которое работало бы так, как вы спрашиваете. Единственный код, к которому у Javascript есть доступ, — это DOM, который содержит результат только после обработки страницы.

Самое близкое, что я могу придумать для достижения того, чего вы хотите, - это использовать Ajax для загрузки новой копии необработанного HTML для вашей страницы в строку Javascript, и в этот момент, поскольку это строка, вы можете делать с ней все, что хотите, включая отображение это в окне предупреждения.

Хитрый способ — использовать тег <style> для шаблона. Так что вам больше не нужно переименовывать x-script.

console.log(document.getElementById('test').innerHTML);

<style id="test" type="text/html+template">
    <script type="text/javascript">document.write("hello");</script>
</style>

Но мне не нравится это уродливое решение.

Я думаю, вы хотите пройти через узлы DOM:

var childNodes = document.getElementById('test').childNodes, i, output = [];

for (i = 0; i < childNodes.length; i++)
    if (childNodes[i].nodeName == "SCRIPT")
        output.push(childNodes[i].innerHTML);

return output.join('');