Заменить на RegEx и JavaScript - PullRequest
Новая
       10

Заменить на RegEx и JavaScript

1 голос
/ 23 марта 2012

Я пытаюсь сделать быструю замену 'innerHTML' элемента 'code'.Я подумал, что это может сработать: 

function codeDisplay ( ) {
    var code = document.getElementsByTagName('code').innerHTML;

    var codeExam1 = new RegExp('<', 'gm');
    var codeExam2 = new RegExp('>', 'gm');

    code.replace(codeExam1, '&lt;');
    code.replace(codeExam2, '&gt;');
      }

Нужно ли выполнять какие-либо дополнительные шаги для отправки информации обратно в браузер или преобразования типов данных?Или я совершенно не прав в том, как работают RegEx и innerHTML?Я ценю обратную связь заранее.

Ответы [ 4 ]

2 голосов
/ 23 марта 2012

Итак, сначала для всех: 

var code = document.getElementsByTagName('code').innerHTML;

document.getElementsByTagName возвращает список элементов , а не только один.Итак, если ваша цель - экранировать все теги code, которые есть на странице, вам нужно их итерировать.Во-вторых, я считаю, что вы можете избежать регулярных выражений, просто используя textContent (если поддерживается) или innerText. 

var codes = document.getElementsByTagName("code");

for (var i = 0, code; code = codes[i++];) {
    if ("textContent" in code)
        code.textContent = code.innerHTML;
    else if ("innerText" in code)
        code.innerText = code.innerHTML;
}

или создав новый текстовый узел: 

var codes = document.getElementsByTagName("code");

for (var i = 0, code, html; code = codes[i++];) {
    html = code.innerHTML;

    code.innerHTML = "";

    code.appendChild(document.createTextNode(html));
}

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

var escapeEntities = (function(){
    var entities = {"<" : "lt", ">" : "gt", "&" : "amp" };
    var re = new RegExp("[" + Object.keys(entities).join("") + "]", "g");

    function replaceEntities(match) {
        return match in entities ? "&" + entities[match] + ";" : match;
    }

    return function(value) {
        return value.replace(re, replaceEntities);
    }
})()

А затем в своем коде: 

code.innerHTML = escapeEntities(code.innerHTML);

Обратите внимание, что если Object.keys не поддерживается, вы можете легко использовать прокладки (как указано в ссылке);или просто замените вручную список объектов, которые вы поддерживаете: 

 var entities = {"<" : "lt", ">" : "gt", "&" : "amp" };
 var re = /[<>&]/g;

В этом случае вам нужно не забыть добавить в переменные entities и re новую сущность, которую вы хотите поддерживать в будущем;Object.keys просто поможет вам в обслуживании.

1 голос
/ 23 марта 2012

Использовать назначение: 

code = code.replace(codeExam1, '&lt;');
code = code.replace(codeExam2, '&gt;');

И измените ваш код следующим образом: 

function codeDisplay ( ) {
    var codeArray = document.getElementsByTagName('code');
    var codeExam1 = new RegExp('<', 'gm');
    var codeExam2 = new RegExp('>', 'gm');

    for ( var i = 0 ; i < codeArray.length ; ++i ){
        var code = codeArray[i].innerHTML;
        code.replace(codeExam1, '&lt;');
        code.replace(codeExam2, '&gt;');
        codeArray[i].innerHTML = code; 
    }
}
0 голосов
/ 23 марта 2012

Попробуйте это: 

function codeDisplay ( ) {
  var s = document.getElementsByTagName('code').innerHTML;
  s = s.replace(/\</g,'&lt;');
  s = s.replace(/\>/g,'&gt;');
  document.getElementsByTagName('code').innerHTML = s;
}
0 голосов
/ 23 марта 2012

Replace возвращает новую строку, содержащую результат. См. Например, MDN . Чтобы фактически заменить содержимое code ваш код должен выглядеть следующим образом: 

function codeDisplay ( ) {
  var code = document.getElementsByTagName('code').innerHTML;

  var codeExam1 = new RegExp('<', 'gm');
  var codeExam2 = new RegExp('>', 'gm');

  code = code.replace( codeExam1, '&lt;');
  code = code.replace(codeExam2, '&gt;');

  document.getElementsByTagName('code').innerHTML = code;
}

Или более короткая версия (может быть даже короче, но, на мой взгляд, просто за счет читабельности): 

function codeDisplay ( ) {
  var code = document.getElementsByTagName('code').innerHTML;

  code = code.replace( /</gm , '&lt;' )
             .replace( />/gm, '&gt;' );

  document.getElementsByTagName('code').innerHTML = code;
}
...