Проблема кодирования / декодирования строки в HTML5 - PullRequest
Новая
       27

Проблема кодирования / декодирования строки в HTML5

0 голосов
/ 24 октября 2019

Я пытаюсь отобразить приведенную ниже строку в браузере HTML, но в тот момент, когда браузер сталкивается с пользовательским тегом типа "" в строке, он просто пропускает это.

Я попробовал encodeURIComponent () и позже попытался декодировать UURIComponent в моем HTML-шаблоне, но не сработал.

Я даже пытался очистить HTML, создав PIPE, как показано ниже, но не повезло. 

transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }

каким-то образом, браузер пропускает элемент, как в строке.

следующая строка 

“The endpoint is browser-based, rather than RESTful. Therefore it could 
     result in the following different scenarios,↵1. SUCCESS 
    (response_type=code)↵> redirect_uri?code=<authorization-code>&scope= 
    <resource-owner-approved-scopes>[&state=<state-provided-by-the-client>]."

Image for jacob

1 Ответ

3 голосов
/ 24 октября 2019

Никогда не вставлять текст с innerHTML;только вставка HTML с innerHTML.

Браузеры в настоящее время имеют свойство textContent: 

yourDiv.textContent = stringFromServer;

Кроме того, просто чтобы очиститьОбщая ошибка, которую вы и многие другие разработчики совершаете, encodeURIComponent предназначена для кодирования строки для вставки в URL , а не вставки в HTML . То же самое относится и к encodeURI (который вы, вероятно, никогда не должны использовать).

Обновление :

Как указано в ваших комментариях, вы на самом деле хотите преобразуйте текст в HTML, используя некоторые правила вместо вставки простого текста в ваш HTML, что будет выполнять типичные правила нормализации пробелов.

Для этого есть много вариантов. Вот два:

  1. По-прежнему вставляйте только простой текст, но установите стиль CSS в контейнере на white-space: pre. Это изменяет способ отображения пробелов, поэтому новые строки вызывают разрывы строк.
  2. Разделите исходную строку, а затем добавьте в div текстовые узлы и <br/> элементы.

Код для последнего может выглядеть примерно так: 

function insertFormattedText(container, text) {
  const chunks = text.split('\n');
  chunks.forEach((chunk, i) => {
    container.appendChild(document.createTextNode(chunk));
    if (i < chunks.length - 1) {
      container.appendChild(document.createElement('br'));
      // Equivalent of `&nbsp;&nbsp;`
      container.appendChild(document.createTextNode('\u00A0\u00A0'));
    }
  });
}
...