替换为RegEx和JavaScript

Question

我试图快速替换'code'元素的'innerHTML'。 我认为这可行：

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”的工作方式完全错误？ 我提前感谢您的反馈。

Answer 1

所以，首先是：

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

document.getElementsByTagName返回的元素列表不仅仅是一个。 因此，如果您的目的是逃避页面中的所有 code标记，则需要迭代它们。 其次，我相信你可以使用textContent （支持的地方）或innerText来避免regexp。

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只是帮助您进行维护。

Answer 2

使用作业：

code = code.replace(codeExam1, '<');
code = code.replace(codeExam2, '>');

并像这样修改你的代码：

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; 
    }
}

Answer 3

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;
}

Answer 4

尝试这个：

function codeDisplay ( ) {
  var s = document.getElementsByTagName('code').innerHTML;
  s = s.replace(/\</g,'&lt;');
  s = s.replace(/\>/g,'&gt;');
  document.getElementsByTagName('code').innerHTML = s;
}