Как визуализировать только части строки как HTML

Question

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

Так как это вход, обрабатываются соответствующим образом:

<p>render as HTML here</p> 
[code]<p>keep tags visible here</p>[/code] 
<p>more unescaped text</p> 

Я regexed всех кодовых тегов, но я понятия не имею, как правильно установить текст элемента после этого. Если я использую jQuery's text() метод ничего не ускользнул, если я установил его с помощью метода html(), все получилось, и я ничего не получил. Может ли кто-нибудь дать мне подсказку здесь?

Answer 1

[code] Попытка замены с <xmp> и [/code] с </xmp> использованием регулярных выражений или одинаково, а затем использовать функцию JQuery html().

Отметьте, что <xmp> технически устарел в HTML5, но он по-прежнему работает в большинстве браузеров. Для получения дополнительной информации см. How to display raw html code in PRE or something like it but without escaping it.

Answer 2

Вы могли бы заменить [code] и [/code] тегов на <pre> и </pre> тегов соответственно, а затем заменить < в пределах <pre> тегов на & ЛТ;
Программное решение, основанное на JavaScript, заключается в следующем

function myfunction(){ 
    //the string 's' probably would be passed as a parameter 

    var s = "<p>render as HTML here</p>\ 
    [code]<p>keep tags visible here</p>[/code]\ 
    <p>more unescaped text</p>"; 

    //keep everything before [code] as it is 
    var pre = s.substring(0, s.indexOf('[code]')); 

    //replace < within code-tags by &lt; 
    pre += s.substring(s.indexOf('[code]'), s.indexOf('[/code]')) 
      .replace(new RegExp('<', 'g'),'&lt;'); 

    //concatenate the remaining text 
    pre += s.substring(s.indexOf('[/code]'), s.length); 

    pre = pre.replace('[code]', '<pre>'); 
    pre = pre.replace('[/code]', '</pre>'); 

    //pre can be set as some element's innerHTML 
    return pre; 
} 

Answer 3

Я бы НЕ рекомендовать принятый ответ на Andreas на всех, потому что <xmp> тег является устаревшим и поддержка браузеров полностью ненадежны.

Это гораздо лучше заменить [code] и [/code] тегов на <pre> и </pre> тегов соответственно, raghav710 предложил.

Он также прав насчет замены символа < на <, но на самом деле это не единственный персонаж, которого вы должны заменить. Фактически, вы должны заменить символ, который является особым символом в HTML с соответствующими объектами HTML.

Вот как заменить символ с соответствующим HTML сущности:

var chr = ['&#', chr.charCodeAt(), ';'].join('');