Как можно преобразовать пробелы в & nbsp, не нарушая теги HTML?

Question

Я унаследовал довольно сложный код для веб-форума, и одна из функций, которые я пытаюсь реализовать, - это возможность не усекать пробелы только в один. Это происходит главным образом потому, что наши пользователи часто хотят включать в свои сообщения изображения ASCII, таблицы и т. Д.

Сначала я сделал это с помощью простого поиска и замены в javascript, который имел побочный эффект, заключающийся в разрыве тегов HTML (например, <a href=....> стало <a&nbsp;href=.....>).

Затем я попытался сделать это на стороне сервера, когда извлекаются строки, путем преобразования пробелов перед тем, как вставленные ссылки и код, преобразованные людьми, преобразуются в HTML. Это работает до некоторой степени, но вызывает некоторые проблемы с другими частями кода, например, когда сообщение обрезается для отображения на домашней странице, оно может оставить часть пробела, например

Вот сообщение & nb

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

Первоначально я использовал скрипт message = message.replace(/\s/g, " ").

Спасибо за любую помощь, которую вы можете оказать с этим.

Answer 1

Вы можете использовать элемент pre для включения предварительно отформатированного текста, который отображает пробелы как есть.См. http://www.w3.org/TR/html5-author/the-pre-element.html

В этих документах специально сказано, что одним из лучших вариантов использования элемента pre является «Отображение ASCII-рисунка».

Пример: http://jsbin.com/owuruz/edit#preview

<code><pre>
         /\_/\
    ____/ o o \
  /~____  =ø= /
 (______)__m_m)

В вашем случае просто поместите ваш message внутри тега pre.

Answer 2

Одним из способов является использование тегов

для упаковки сообщений пользователей, чтобы сохранить их ASCII-изображение. Но почему бы не использовать Markdown (как это делает Stackoverflow). Есть несколько разных портов Markdown для Javascript: 


 Showdown 
 WMD 
 uedit 

Answer 3

Да, но вам нужно обрабатывать текстовое содержимое элементов, а не все содержимое документа HTML.Кроме того, вам необходимо исключить style и script содержимое элемента.Поскольку вы можете ограничиться вещами внутри элемента body, вы можете использовать рекурсивную функцию, например следующую, вызывая ее с помощью process(document.body), чтобы применить ее ко всему документу (но вы, вероятно, захотите применить ее только к определенному элементу).:

function process(element) { 
  var children = element.childNodes; 
  for(var i = 0; i < children.length; i++) { 
    var child = children[i]; 
    if(child.nodeType === 3) { 
      if(child.data) { 
        child.data = child.data.replace(/[ ]/g, "\xa0"); 
      } 
    } else if(child.tagName != "SCRIPT") { 
      process(child); 
    } 
  } 
}

(здесь нет смысла использовать ссылку на сущность  ; вы можете использовать сам символ пробела U + 00A0, ссылаясь на него как "\xa0" в JavaScript.)