Как отобразить специальные символы, такие как табуляция (\ t), как текст на веб-странице, не отображая их? - PullRequest
Новая
       11

Как отобразить специальные символы, такие как табуляция (\ t), как текст на веб-странице, не отображая их?

0 голосов
/ 24 ноября 2018

Невозможно отобразить "\ t" на веб-странице, когда она была вставлена ​​с использованием JavaScript в div.

Посмотрите на фрагмент кода ниже.Первый div показывает «\ t» как текст, но когда они вставляются в div с использованием javascript, они отображаются браузером и не отображают его как текст в пользовательском интерфейсе.

Мне нужно вставить текст в div с использованием javascript, текст содержит символ "\ t", и мне нужно показать их как есть, без их рендеринга.

Я посмотрел много похожих вопросов по stackoverflow, но ни один из них действительно не сработал.Пожалуйста, сообщите. 

function callme() {
      document.getElementById('div2').innerHTML = "I am div 2, tab char 1:\t , tab char 2: \t";
    }
<!DOCTYPE html>
<html>
<body>
  <span id='div1'>I am div 1, tab char 1: \t , tab char 2: \t</span>
  <br />  <br />  <br />
  <button onclick="callme()">Click me to Insert tab characters in below div</button>
  <br />  <br />
  <span id='div2'>I am div 2, click above button insert tab characters</span>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 24 ноября 2018

Просто экранируйте символ \ с помощью \\.

Кстати (к вашему сведению):

  • Не беспокойтесь о самозавершающихся тегах (<br />).Они ничего не получают и могут привести к ошибкам в коде.Вы можете прочитать больше об этом здесь .

  • <br> не следует использовать для вставки пустого пространства в макет документа.Его следует использовать только для размещения части некоторого контента на следующей строке.Все макеты должны обрабатываться CSS.

  • Не используйте встроенные атрибуты событий HTML (onclick), так как есть много причин , чтобы не использовать этот 25+летняя техника, которая просто не умрет смертью, которую она заслужила.Вместо этого следуйте современному стандартизированному element.addEventListener() API. 

let output = document.getElementById('div2');
document.querySelector("button").addEventListener("click", callme);

function callme() {
  output.innerHTML = "I am div 2, tab char 1:\\t , tab char 2: \\t";
}
/* All layout should be done with CSS */
div { margin:2em 0; }
<div id='div1'>I am div 1, tab char 1: \t , tab char 2: \t</div>
<button>Click me to Insert tab characters in below div</button>
<div id='div2'>I am div 2, click above button insert tab characters</div>
0 голосов
/ 24 ноября 2018

Добавьте еще один \ для экранирования символа \.Кроме того, вы можете использовать предварительно тег для этой цели.Вот решение. 

function callme() {
      document.getElementById('div2').innerHTML = "I am div 2, tab char 1:\\t , tab char 2: \\t";
    }
<!DOCTYPE html>
<html>
<body>
  <span id='div1'>I am div 1, tab char 1: \t , tab char 2: \t</span>
  <br />  <br />  <br />
  <button onclick="callme()">Click me to Insert tab characters in below div</button>
  <br />  <br />
  <span id='div2'>I am div 2, click above button insert tab characters</span>
</body>

</html>
0 голосов
/ 24 ноября 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...