4

私は1日ほどJSまたはjQueryで何かをする方法を探していて、いくつかの解決策を見つけましたが、まだしっかりしたものはありません.

私はこれを使いたい：

<code class="codeIt">

  <h2> This is an H2 </h2>

</code>

そして、出力を次のようにしたい：

<h2> This is an H2 </h2>

私はこれを行うことでこれを達成できることを知っています:

<code class="codeIt">

  &lt;h2&gt; This is an H2 &lt;/h2&gt;

</code>

...しかし、これらのブロック内のコードを手動で検索して置換するのではなく、ブラウザーでその場で実行したいと考えています。これは可能ですか？

私はjQueryにかなり慣れていないので、.replaceWithまたはJavaScriptを試しまし.replaceたが、これまでのところ、必要な場所に到達していません。タグ全体を置き換えるか、何か間違ったことをしています。

私の質問は、単純な jQuery (または通常の JS) をどのように記述して、 my<と my>をタグのような HTML エンティティ&lt;やタグ&gt;内に置き換えるのに役立つでしょうか<code>。

助けていただきありがとうございます。

アップデート：

@Prisonerが説明したようにうまく機能させることができましたが、それは非常に気の利いたものですが、私の特定のケースでは、.codeItクラスに複数のコードブロックがあるため、少し拡張する必要があったため、各要素と出力をチェックする必要がありました...そうでなければ、同じ出力を作り続けます（最初のブロックのように）

ここにフィドルがあります

皆さんの回答に感謝します。

4

6 に答える 6

6

すべての HTML をエスケープしたいだけだとします。

$(".codeIt").text($(".codeIt").html());
于 2013-07-31T09:10:29.700 に答える
5

code単一要素のプレーン JS

var myCode = document.getElementById('mycode');
myCode.innerHTML = myCode.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;')

code複数の要素のためのプレーン JS

var codeEls = document.getElementsByTagName('code');
for(var i in codeEls)
{
    if(parseInt(i)==i)
    {
        var codeEl = codeEls[i];
        if(codeEl.className.match(/\bcodeIt\b/)!==null) codeEl.innerHTML = codeEl.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;')
    }
}

またはjQuery

$(".codeIt").each(function() {
    $(this).html(
        $(this).html().replace(/</g,'&lt;').replace(/>/g,'&gt;')
    );
});
于 2013-07-31T09:09:49.287 に答える
1

jquery のテキスト関数を使用できます。

var myText = $('.codeIt').html();

var escapedText = $('.codeIt').text(myText).html();
于 2013-07-31T09:10:37.343 に答える
1 
var t = $('.codeIt').html();

$('.codeIt').text(t).html();

このフィドルを見てくださいhttp://jsfiddle.net/kU8bV/1/

于 2013-07-31T09:11:54.803 に答える
0 
$('code').html($('code').html().replace(/</g, '&lt;').replace(/>/g, '&gt;'));
于 2013-07-31T09:09:33.357 に答える
0

すべての html を codeIt クラスでコーディングするとします。

<script type="text/javascript">
        function htmlEncode(value){
            if (value) {
                return jQuery('<div />').text(value).html();
            } else {
                return '';
            }
        }

        function htmlDecode(value) {
            if (value) {
                return $('<div />').html(value).text();
            } else {
                return '';
            }
        }       
        $('.codeIt').each(function() {
            myEncodedString = htmlEncode($(this).html());
            $(this).html(myEncodedString);
        });
</script>
于 2013-07-31T09:15:44.680 に答える