Ersetzen durch RegEx und JavaScript

Question

Ich versuche, die 'innerHTML' des 'code' Elements schnell zu ersetzen. Ich dachte, dies funktionieren kann:

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

Muss ich zusätzliche Schritte ausführen müssen vielleicht die Informationen zurück an den Browser oder die Umwandlung von Datentypen zu schieben? Oder liege ich völlig falsch darin, wie "RegEx" und "innerHTML" funktionieren? Ich schätze das Feedback im Voraus.

Answer 1

Also, zuerst fo alle:

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

document.getElementsByTagName gibt eine Liste Elemente nicht nur eins zurück. Also, wenn Ihr Zweck alle die code Tags, die Sie in der Seite haben, zu entkommen, müssen Sie sie iterieren. Zweitens glaube ich, dass Sie regexp vermeiden können, nur mit textContent (wo unterstützt) oder 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; 
} 

oder einen neuen Textknoten erstellen:

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

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

    code.innerHTML = ""; 

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

Das ist sollte alle HTML-Entities entkommen. Wenn Sie immer noch den regulären Ausdruck, vielleicht als Ausweich verwenden möchten, können Sie diese Art von Funktion haben:

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

Und dann in Ihrem Code:

code.innerHTML = escapeEntities(code.innerHTML); 

Beachten Sie, dass, wenn Object.keys nicht unterstützt wird, kann verwenden Sie leicht eine Unterlegscheibe (wie im Link angegeben); oder einfach ersetzen manuell die Liste der Objekte, die Sie unterstützen:

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

In diesem Fall müssen Sie erinnern in beiden entities und re Variablen ein neues Objekt, das Sie in Zukunft unterstützen wollen hinzuzufügen; Object.keys helfen nur bei der Wartung.

Answer 2

Nutzungszuweisung:

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

Und der Code wie folgt ändern:

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

kehrt ersetzen eine neue Zeichenfolge mit dem Ergebnis enthält. Siehe zum Beispiel MDN. So ersetzen Sie tatsächlich den Inhalt code Sie Code wie folgt aussehen muss:

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

oder eine kürzere Version (könnte sogar noch kürzer, aber meiner Meinung nach nur auf Kosten der Lesbarkeit sein):

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

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

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

Answer 4

Versuchen Sie folgendes:

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