Как мне избежать некоторых html в javascript?

Ответ 1

Это должно сработать для вас: http://blog.nickburwell.com/2011/02/escape-html-tags-in-javascript.html

function escapeHTML( string )
{
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}

Предупреждение о безопасности

Функция не избегает одиночных и двойных кавычек, которые, если они используются в неправильном контексте, все равно могут привести к XSS. Например:

 var userWebsite = '" onmouseover="alert(\'gotcha\')" "';
 var profileLink = '<a href="' + escapeHtml(userWebsite) + '">Bob</a>';
 var div = document.getElemenetById('target');
 div.innerHtml = profileLink;
 // <a href="" onmouseover="alert('gotcha')" "">Bob</a>

Благодаря buffer для указания этого случая. Отрывок из этот пост в блоге.

Ответ 2

Я закончил это:

function escapeHTML(s) { 
    return s.replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

Ответ 3

Мне нравится ответ @limc для ситуаций, когда доступен документ HTML DOM.

Мне нравятся ответы @Michele Bosi и @Paolo для среды документов DOM, отличной от HTML, такой как Node.js.

Ответ @Michael Bosi можно оптимизировать, устраняя необходимость вызывать замену 4 раза за один вызов замены в сочетании с умной функцией заменителя:

function escape(s) {
    let lookup = {
        '&': "&",
        '"': """,
        '<': "&lt;",
        '>': "&gt;"
    };
    return s.replace( /[&"<>]/g, (c) => lookup[c] );
}
console.log(escape("<b>This is some text.</b>"));

Ответ 4

Попробуйте htmlentities для javascript

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

Ответ 5

Здесь функция, которая заменяет угловые скобки своими объектами html. Возможно, вы захотите расширить его, включив другие символы.

function htmlEntities( html ) {
    html = html.replace( /[<>]/g, function( match ) {
        if( match === '<' ) return '&lt;';
        else return '&gt;';
    });
    return html;
}

console.log( htmlEntities( '<b>replaced</b>' ) ); // &lt;b&gt;replaced&lt;/b&gt;

Ответ 6

Традиционное экранирование

Если вы используете XHTML, вам нужно использовать раздел CDATA. Вы также можете использовать их в HTML, но HTML не такой строгий.

Я разделил строковые константы так, чтобы этот код работал внутри XHTML внутри блоков CDATA. Если вы используете JavaScript в качестве отдельных файлов, вам не нужно беспокоиться об этом. Обратите внимание, что если вы используете XHTML со встроенным JavaScript, вам необходимо заключить свой код в блок CDATA, или некоторые из них не будут работать. Вы столкнетесь с нечетными, тонкими ошибками.

function htmlentities(text) {
    var escaped = text.replace(/\]\]>/g, ']]' + '>]]&gt;<' + '![CDATA[');
    return '<' + '![CDATA[' + escaped + ']]' + '>';
}

Текст DOM Node

"Правильный" способ избежать текста - использовать функцию DOM document.createTextNode. Это фактически не ускользает от текста; он просто сообщает браузеру создать текстовый элемент, который по своей сути неанализирован. Однако вы должны использовать DOM для этого метода, то есть использовать методы, такие как appendChild, в отличие от свойства innerHTML и т.д. Это заполнило бы элемент с идентификатором an-element текстом, который не был бы проанализирован как (X) HTML:

var textNode = document.createTextNode("<strong>This won't be bold.  The tags " +
    "will be visible.</strong>");
document.getElementById('an-element').appendChild(textNode);

jQuery DOM Wrapper

jQuery предоставляет удобную оболочку для createTextNode с именем text. Это довольно удобно. Здесь же функциональность с помощью jQuery:

$('#an-element').text("<strong>This won't be bold.  The tags will be " +
    "visible.</strong>");

Ответ 7

Вы можете кодировать все символы в строке:

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Или просто нацелитесь на главных героев, чтобы беспокоиться (&, inebreaks, <, > , "and '), например:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML=test.value;

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55"></textarea>

<div id="testing">www.WHAK.com</div>

Ответ 8

Я использую следующую функцию, которая пропускает каждый символ с помощью знака & #nnn;, кроме az AZ 0-9 и пробела

function Escape( s )
{
    var h,
        i,
        n,
        c;

    n = s.length;
    h = '';

    for( i = 0; i < n; i++ )
    {
        c = s.charCodeAt( i );
        if( ( c >= 48 && c <= 57 ) 
          ||( c >= 65 && c <= 90 ) 
          ||( c >= 97 && c <=122 )
          ||( c == 32 ) )
        {
            h += String.fromCharCode( c );
        }
        else
        {
            h += '&#' + c + ';';
        }
    }

    return h;
}

Пример:

Escape('<b>This is some text</b>')

возвращает

<b>This is some text</b>

Функция - это проверка на наличие инъекций кода, доказательство unicode, чистый JavaScript.

Этот подход примерно в 50 раз медленнее, чем тот, который создает текст DOM node, но тем не менее функция ускользает за одну миллионную строку (1000000) в 100-150 миллисекунд.

(Протестировано в начале 2011 года MacBook Pro - Safari 9 - Mavericks)