替換爲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; 
}