替换为 RegEx 和 JavaScript答案

【问题标题】：Replace with RegEx and JavaScript替换为 RegEx 和 JavaScript
【发布时间】：2012-04-08 07:34:25
【问题描述】：

我正在尝试快速替换“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”的工作方式完全错误？提前感谢您的反馈。

【问题讨论】：

我是否遗漏了什么或者是正则表达式，比如在完成钉子上使用大锤？
您可能还想写code = code.replace(/&/g, '&amp;') -- 甚至在< 和> 步骤之前。
@BradChristie - 你会怎么做呢？字符串替换只找到第一个。你真的认为code.split('>').join('&gt;') 更好吗？

标签： javascript regex theory replace

【解决方案1】：

使用赋值：

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

【讨论】：

我尝试通过将其加载到正文的 onLoad 属性中来执行此操作，但它仍然不起作用。
我认为问题是'document.getElementsByTagName('code')'返回数组，所以你需要使用document.getElementsByTagName('code')[0]。
或者如果你有多个'code'元素，使用循环替换所有这些元素的内容。

【解决方案2】：

所以，首先：

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

document.getElementsByTagName 返回一个元素的列表，而不仅仅是一个。因此，如果您的目的是转义 all 页面中的 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只是帮你维护。

【讨论】：

您可以使用 CSS 设置整个块的样式。所以你可以拥有：code { background: silver; border: 1px solid gray } 等。
让我问你这个。如果我转换为文本，我还能用 css 设置它的样式吗？
我想我可以试试。非常感谢您的深入解释

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

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

【讨论】：