RegExとJavaScriptに置き換えてください

Question

私は 'code'要素の 'innerHTML'を素早く置き換えようとしています。私はこれがうまくいくと思いました：

情報をブラウザに戻したり、データタイプを変換したりするために追加の手順を実行する必要がありますか？あるいは、私は 'RegEx'と 'innerHTML'の仕組みが完全に間違っていますか？私は事前にフィードバックを感謝します。

Answer 1

、：

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がサポートされていない場合は、あなたができることシムを簡単に使用する（リンクに記載されているように）。あるいは単に手動でエンティティのリストを置き換えるあなたのサポート：あなたは両方entitiesとre変数にあなたが将来的にサポートする新しいエンティティを追加することを忘れないでくださいする必要があり、その場合には

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

。 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

が戻って結果を含む新しい文字列を交換してください。例えば、MDNを参照してください。 （しかし、私の意見では、単に読みやすさのコストで、さらに短くすることができる）

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

は実際にあなたのコードはこのように見えることがある codeの内容を置換するには

Answer 4

これを試してみてください：すべてのfoの最初だから、

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