替换为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

所以，首先FO所有：

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

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