HTML の左山括弧と右山括弧をエンティティにエスケープする 2 つの方法 form_javascript スキル

フロントエンド開発作業では、多くの場合、HTML の左山括弧と右山括弧をエンティティ形式にエスケープする必要があります。 <、>、& などを最終的な Web ページに直接表示することはできません。 Web ページに表示するには、エスケープする必要があります。

エスケープ シーケンスは文字エンティティとも呼ばれます。エスケープ文字列を定義する主な理由は、

、「<」、「>」などの記号は HTML タグを表すために使用されているため、テキスト内の記号として直接使用できないためです。ただし、HTML ページでこれらのシンボルを使用する必要がある場合があるため、そのエスケープ文字列を定義する必要があります。
一部の文字は ASCII 文字セットで定義されていません (著作権記号「©」など)。したがって、エスケープ文字を使用する必要があります (「©」に対応するエスケープ文字は「©」です)。

ここでは、HTML をエンティティにそれぞれエスケープおよび反転するための 2 つの関数エスケープとアンエスケープが提供されています。

方法 1、マッピング テーブルへの定期的な置換

コードをコピーします コードは次のとおりです。

var key = Object.keys || function(obj) {
obj = Object(obj)
var arr = []
for (obj の var a) arr.push (a)
return arr
}
var invert = function(obj) {
obj = Object(obj)
var result = {}
for (var a in obj) result[obj[a ]] = a
return result
}
varentityMap = {
escape: {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}
}
entityMap.unescape = invert (entityMap.escape)
varentityReg = {
escape: RegExp('[' Keys(entityMap.escape).join('') ']', 'g'),
unescape: RegExp( '('keys(entityMap.unescape).join('|') ')', 'g')
}

// HTML をエンティティにエスケープ
関数エスケープ(html) {
if (typeof html !== 'string') return ''
return html.replace(entityReg.escape, function(match) {
returnentityMap.escape[match]
})
}
// エンティティを HTML に変換します
function unescape(str) {
if (typeof str !== 'string') return ''
return str.replace (entityReg .unescape, function(match) {
returnentityMap.unescape[match]
})
}

方法 2. ブラウザ DOM API を使用する

コードをコピー コードは次のとおりです:

// HTML をエンティティにエスケープ
functionエスケープ(html) {
var elem = document.createElement('div')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML
} / / エンティティを HTML に変換します。
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str
return elem.innerText || textContent
}

欠点の 1 つは、エスケープできるのは「< > &」だけであることです。さらに、一部の非 ASCII 文字はエスケープできません。選ぶときは注意してください。

比較:

方法 1 のコード量は多くなりますが、その柔軟性と完全性は方法 2 よりも優れています。マッピング テーブルentityMapは、必要に応じて追加または削減でき、任意のJS環境で実行できます。

方法 2 は、コードがはるかに少ないハック方法で、ブラウザの内部 API を使用してエスケープとリバースを行うことができます (すべての主要なブラウザでサポートされています)。これは完全ではなく、明らかにブラウザ環境でのみ使用できます (たとえば、Node.js では実行できません)。