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

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

document.getElementById("test").outerHTML

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

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

Источник

6 ответов

Решение

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

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

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

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

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

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

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

Источник

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

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

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

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

Источник

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

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

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);
Источник

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

Источник

Если это только для тестирования и вы хотите быстро перебрать его, вы можете преобразовать каждый символ в строке в его & # 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. Загрузите и установите 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>

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

Источник
Другие вопросы по тегам