Отображать HTML-разметку в браузере без ее визуализации - PullRequest
Новая
       27

Отображать HTML-разметку в браузере без ее визуализации

5 голосов
/ 03 июня 2011

Начиная реализацию Javascript, мне нужно устранить неполадки и я хотел бы выводить HTML на экран без его рендеринга. Я могу получить доступ к элементу (в IE) по 

document.getElementById("test").outerHTML

Я думаю, но я не могу доказать, в чем я уверен.

Так что же мне сделать, чтобы document.write показывал весь элемент, включая теги?

Ответы [ 6 ]

10 голосов
/ 03 июня 2011

Вы имеете в виду, что вы хотите, чтобы литерал, например, <b>Hello</b> вместо Hello?

Если это так, просто сделайте быстрый: 

myHTML = myHTML.replace(/[<>&\n]/g, function(x) {
    return {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
       '\n': '<br />'
    }[x];
});

Перед выводом.Вы можете применить это ко многим другим символам, например, если вы хотите вывести пробел буквально.

8 голосов
/ 03 июня 2011

Сделайте две вещи (все, а не только одну):

  1. Замените HTML-разметку сущностями: HTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') достаточно.
  2. Оберните его в теги , чтобы не было пробелов и оно отображалось моноширинным шрифтом.

Вы также можете alert(HTML). В IE в Windows (по крайней мере) вы можете нажать Ctrl-C и вставить текстовое содержимое диалогового окна в другое место, чтобы его было видно.

Две последовательные замены выполняются быстрее, чем использование функции в качестве второго аргумента replace(). Три последовательных замены также быстрее, когда строка очень длинная, как можно ожидать от полного HTML-документа.

Кроме того, использование document.write, вероятно, не лучший способ. Если у вас есть div с идентификатором output, вы можете получить к нему доступ таким образом: 

<code>document.getElementById('output').innerHTML = '<pre>' + document.body.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '
';

Приведенный выше код работает, я тестировал его в IE, а также в Firefox, используя FireBug. Обратите внимание, что outerHTML не поддерживается в Firefox.

2 голосов
/ 03 июня 2011

Если вы начинаете с javascript, сейчас лучшее время, чтобы научиться не трогать ненадежные свойства; externalHTML - один из них; в то время как поддерживаемый IE, Chrome и Opera, Firefox не поддерживает его.

Принимая оригинальный код, это будет работать: 

var content = document.getElementById("test").outerHTML;
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
docuemnt.write(safe);

Но использование «externalHTML» - это плохая идея, равно как и «document.write ()». Гораздо лучше иметь div с идентификатором на вашей странице и указывать там текст, а не «где бы ни находился ваш код, когда вызывается document.write ()»: 

<html>
  <head>...</head>
  <body>
    ...
    <div id="mylog"></div>
    ...
 <body>
</html>

И затем заполняя это либо: 

// set the content for div 'mylog'
document.getElementById("mylog").innerHTML = content;

или используя что-то вроде jQuery, которое дает вам API, который скрывает все сумасшедшие вещи, которые могут или не могут быть поддержаны, и гарантирует, что если вы вызовете это, это будет работать: 

// get html content
var content = $("#test").html();
// make it print safe
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
// add it to the log as text
$("mylog").append(safe);
1 голос
/ 16 июня 2013

Вот быстрый и простой способ, который я нашел

1. Загрузите и установите Adobe DreamWeaver, вы получите 30-дневную пробную версию.

2. Просто напишите код, который вы хотитепоместите на свой веб-сайт как таковой на экране «Дизайн» Dream weaver

3. На экране кода вы получите код для размещения HTML-кода без перевода на свой веб-сайт.

Например:Когда я помещаю код: 

<p>This is a paragraph</p>

в окно дизайна DreamWeaver. В окне кода пишется следующий код. 

<p>&lt;p&gt;This is a paragraph&lt;/p&gt;</p>

Это можно сделать для любого кода, который вы хотитесделать так, чтобы в браузере не отображалось изображение.

1 голос
/ 03 июня 2011

Если это только для тестирования и вы хотите быстро перебрать его, вы можете преобразовать каждый символ в строке в его & # x;эквивалент: 

var a = "<div>hello</div>";

var b = a.replace(/./g, function(e){
    return "&#"+e.charCodeAt(0)+";";
});

document.write(b);

Живой пример: http://jsfiddle.net/J89wh/

1 голос
/ 03 июня 2011

Если проблема не ограничивается IE, используйте firefox и используйте firebug . console.log очень удобно. Вы всегда можете использовать alert(myString), но очень скоро становится очень раздражающим.

...