JS помогает выборочно экранировать HTML в области предварительного просмотра - PullRequest
Новая
       3

JS помогает выборочно экранировать HTML в области предварительного просмотра

1 голос
/ 15 марта 2011

У меня уже давно есть эта проблема, и никто не может ответить мне полностью ...

Я создаю форум с помощью простого текстового редактора и хотел бы обновить область предварительного просмотра.когда вы печатаете, как это происходит здесь в stackoverflow. 

    var text = $("#edit").val();
    $("#preview").html(text);

Как есть, приведенный выше код работает нормально, пока вы не начнете вводить html.Я хочу разрешить базовое форматирование, такое как жирный и курсив, а также поддержку добавления в tags.</p> <p>EVERTHING WITHIN the code tags needs to JUST be TEXT, but the jquery above is telling ALL of my output/preview text to be put through as html - so whether I put "<code>&lt; "или" < ".

Я пробовал .replace(/</,"&lt;") методы и методы RegEx, но ничего не кажетсячтобы сработало.

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

Большое спасибо

Ответы [ 4 ]

3 голосов
/ 16 марта 2011

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

Когда вы очень строги, ваша работа по форматированию очень проста. Например, вы можете принять только этот синтаксис [tag=parameter] и [/tag], где tag может быть u,i,b,c (c для цвета), а параметр может быть любым, кроме ] или / и использовать специальные символы, которые не должны часто появляться в обычный текст.

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

[код] предназначен для многострочных блоков (нельзя комбинировать с другими)
`для блоков встроенного кода (не может комбинироваться с другими)

* для жирного текста
** для курсивного текста

Теперь вам просто нужно найти теги в коде и соответствующим образом отформатировать текст: 

<code>function textify(text) { return $('<div/>').text(text).html(); }

function formatText(text)
{
    if (text == '') return '';

  var start = text.indexOf('[code]');
    var end = text.indexOf('[/code]', start);
    if ((end > start) && (start >= 0))
    {
        return formatText(text.substring(0, start))
            + '<pre>'
            + text.substring(start + 6, end)
            + '
+ formatText (text.substring (end + 7)); } text = text.replace (new RegExp ('(^ | \\ s |>) \\ * \\ * (\\ S. *? \\ S) \\ * \\ * ($ | \\ s | < ) ',' gim '),' $ 1 $ 2 $ 3 '); text = text.replace (new RegExp ('(^ | \\ s |>) \\ * (\\ S. *? \\ S) \\ * ($ | \\ s | <)', 'gim') ), $ 1 <em>$ 2 $ 3); вернуть текст; }

А в ваших обработчиках событий: 

$("#preview").html(formatText(textify(text)));
1 голос
/ 16 марта 2011

Взгляните на http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer для автономного HTML-дезинфицирующего средства, написанного на JavaScript.

0 голосов
/ 15 марта 2011

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

Вместо того, чтобы разрешать выборочный html, создайте свой собственный синтаксис, как bbcode , а затем преобразуйте его в разрешенные вами теги.

Это будет намного проще для вас.

0 голосов
/ 15 марта 2011

Посмотрите на свойства DOM innerText (IE) и textContent (w3c). Они устанавливают / получают только текст, а не теги и комментарии.

http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/

РЕДАКТИРОВАТЬ: Я только что заметил, что вы хотите немного HTML. В этом случае вам нужно гораздо более сложное решение, чем вы можете написать самостоятельно. Вам нужно будет изучить существующие решения, такие как ckeditor . Я полагаю, что тот, который используется здесь при переполнении стека, также с открытым исходным кодом, но я не уверен, как он называется и где вы найдете документацию. Я могу порекомендовать ckeditor, хотя он очень мощный и поддерживает выборочную фильтрацию разрешенных тегов.

...