เข้ารหัสเอนทิตี html ในจาวาสคริปต์

ฉันทำงานใน CMS ซึ่งอนุญาตให้ผู้ใช้ป้อนเนื้อหาได้ ปัญหาคือเมื่อเพิ่มสัญลักษณ์®อาจแสดงผลได้ไม่ดีในทุกเบราว์เซอร์ ฉันต้องการตั้งค่ารายการสัญลักษณ์ที่ต้องค้นหาจากนั้นแปลงเป็นเอนทิตี html ที่เกี่ยวข้อง ตัวอย่างเช่น

® => ®
& => &
© => ©
™ =>™

หลังจากการแปลงจะต้องมีการรวม<sup>แท็กซึ่งทำให้เกิดสิ่งนี้:

® => <sup>&reg;</sup>

เนื่องจากจำเป็นต้องมีขนาดตัวอักษรและรูปแบบการขยายที่เฉพาะเจาะจง:

sup { font-size: 0.6em; padding-top: 0.2em; }

JavaScript จะเป็นแบบนี้หรือไม่?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

โดยที่ "[?]" หมายความว่ามีบางอย่างที่ฉันไม่แน่ใจ

รายละเอียดเพิ่มเติม:

• ฉันต้องการทำสิ่งนี้ด้วย JavaScript บริสุทธิ์ไม่ใช่สิ่งที่ต้องใช้ไลบรารีเช่น jQuery ขอบคุณ
• แบ็กเอนด์คือ Ruby
• ใช้ RefineryCMS ซึ่งสร้างด้วย Ruby on Rails

คุณสามารถใช้ regex เพื่อแทนที่อักขระใด ๆ ในช่วงยูนิโค้ดที่กำหนดด้วยเอนทิตี html ที่เทียบเท่า รหัสจะมีลักษณะดังนี้:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

รหัสนี้จะแทนที่ตัวอักษรทั้งหมดในช่วงที่กำหนด (Unicode 00A0 - 9999 เช่นเดียวกับเครื่องหมายมากขึ้นและน้อยกว่า) กับ HTML เทียบเท่านิติบุคคลของพวกเขาซึ่งเป็นเพียง&#nnn;ที่nnnเป็นค่า Unicode charCodeAtที่เราได้รับจาก

ดูการใช้งานจริงที่นี่: http://jsfiddle.net/E3EqX/13/ (ตัวอย่างนี้ใช้ jQuery สำหรับตัวเลือกองค์ประกอบที่ใช้ในตัวอย่างโค้ดฐานด้านบนไม่ใช้ jQuery)

การแปลงเหล่านี้ไม่ได้ช่วยแก้ปัญหาทั้งหมด - ตรวจสอบให้แน่ใจว่าคุณใช้การเข้ารหัสอักขระ UTF8 ตรวจสอบให้แน่ใจว่าฐานข้อมูลของคุณจัดเก็บสตริงใน UTF8 คุณยังอาจเห็นกรณีที่อักขระแสดงไม่ถูกต้องทั้งนี้ขึ้นอยู่กับการกำหนดค่าแบบอักษรของระบบและปัญหาอื่น ๆ ที่ไม่สามารถควบคุมได้

เอกสารประกอบ

• String.charCodeAt- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• เอนทิตีอักขระ HTML - http://www.chucke.com/entities.html

คำตอบที่ยอมรับในปัจจุบันมีหลายประเด็น โพสต์นี้อธิบายถึงพวกเขาและนำเสนอโซลูชันที่มีประสิทธิภาพมากขึ้น โซลูชันที่แนะนำในคำตอบนั้นก่อนหน้านี้มี:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

iธงซ้ำซ้อนเนื่องจากไม่มีสัญลักษณ์ Unicode ในช่วงจาก U + 00A0 เพื่อ U + 9999 มีพิมพ์ใหญ่ / พิมพ์เล็กตัวแปรที่อยู่นอกช่วงเดียวกันกับที่

mธงซ้ำซ้อนเพราะ^หรือ$ไม่ได้ใช้ในการแสดงออกปกติ

ทำไมช่วง U + 00A0 ถึง U + 9999 ดูเหมือนตามอำเภอใจ

อย่างไรก็ตามสำหรับโซลูชันที่เข้ารหัสทั้งหมดอย่างถูกต้องยกเว้นสัญลักษณ์ ASCII ที่ปลอดภัยและพิมพ์ได้ในอินพุต (รวมถึงสัญลักษณ์ดาว!) และใช้การอ้างอิงอักขระที่มีชื่อทั้งหมด (ไม่ใช่เฉพาะใน HTML4) ให้ใช้ไลบรารีhe (ข้อจำกัดความรับผิดชอบ: ไลบรารีนี้เป็นของฉัน ). จาก README:

เขา (สำหรับ“ เอนทิตี HTML”) เป็นตัวเข้ารหัส / ตัวถอดรหัสเอนทิตี HTML ที่มีประสิทธิภาพซึ่งเขียนด้วย JavaScript สนับสนุนการอ้างอิงอักขระที่มีชื่อมาตรฐานทั้งหมดตาม HTMLจัดการเครื่องหมายแอมเพอร์แซนด์ที่ไม่ชัดเจนและกรณีขอบอื่น ๆเช่นเดียวกับเบราว์เซอร์มีชุดทดสอบที่กว้างขวางและ - ตรงกันข้ามกับโซลูชัน JavaScript อื่น ๆ อีกมากมาย - เขาจัดการสัญลักษณ์ Astral Unicode ได้ดี มีการสาธิตออนไลน์

ดูคำตอบ Stack Overflow ที่เกี่ยวข้องด้วย

ฉันมีปัญหาเดียวกันและสร้าง 2 ฟังก์ชันเพื่อสร้างเอนทิตีและแปลกลับเป็นอักขระปกติ วิธีการต่อไปนี้จะแปลสตริงใด ๆ เป็นเอนทิตี HTML และกลับมาที่ String ต้นแบบ

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        // return "&#" + s.charCodeAt(0) + ";";
        return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
    });
};

/**
 * Create string from HTML entities
 */
String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#\d+;/gm,function(s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
    })
};

จากนั้นคุณสามารถใช้งานได้ดังต่อไปนี้:

var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

เอาต์พุตในคอนโซล:

Entities: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést 

หากไม่มีไลบรารีใด ๆ หากคุณไม่จำเป็นต้องรองรับ IE <9 คุณสามารถสร้างองค์ประกอบ html และตั้งค่าเนื้อหาด้วยNode.textContent :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

นี่คือตัวอย่าง: https://jsfiddle.net/1erdhehv/

คุณสามารถใช้สิ่งนี้

var escapeChars = {
  '¢' : 'cent',
  '£' : 'pound',
  '¥' : 'yen',
  '€': 'euro',
  '©' :'copy',
  '®' : 'reg',
  '<' : 'lt',
  '>' : 'gt',
  '"' : 'quot',
  '&' : 'amp',
  '\'' : '#39'
};

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

var htmlEntities = {
    nbsp: ' ',
    cent: '¢',
    pound: '£',
    yen: '¥',
    euro: '€',
    copy: '©',
    reg: '®',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '\''
};

function unescapeHTML(str) {
    return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
        var match;

        if (entityCode in htmlEntities) {
            return htmlEntities[entityCode];
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
            return String.fromCharCode(parseInt(match[1], 16));
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#(\d+)$/)) {
            return String.fromCharCode(~~match[1]);
        } else {
            return entity;
        }
    });
};

หากคุณต้องการหลีกเลี่ยงการเข้ารหัสเอนทิตี html มากกว่าหนึ่งครั้ง

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';

        return '&#' + char.charCodeAt(0) + ';' + next;
      }

      return full;
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# ตัวอย่าง

var text = "<a>Content &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

อักขระพิเศษ HTML และ ESCAPE CODES

อักขระที่สงวนไว้จะต้องหลีกเลี่ยงโดย HTML: เราสามารถใช้อักขระ Escape เพื่อแสดงอักขระ Unicode [เช่น & - U + 00026] ใน HTML, XHTML หรือ XML โดยใช้อักขระ ASCII เท่านั้น อักขระตัวเลขการอ้างอิง [ Ex: ampersand (&) - &] และชื่ออ้างอิงตัว [Ex: &] character escape used in markupเป็นประเภทของ

เอนทิตีที่กำหนดไว้ล่วงหน้า

    Original Character     XML entity replacement    XML numeric replacement  
                  <                                    &lt;                                           &#60;                    
                  >                                     &gt;                                         &#62;                    
                  "                                     &quot;                                      &#34;                    
                  &                                   &amp;                                       &#38;                    
                   '                                    &apos;                                      &#39;                    

หากต้องการแสดงแท็ก HTML เป็นรูปแบบปกติในหน้าเว็บของเราใช้<pre>, <code>แท็กหรือเราสามารถหลบหนีพวกเขา หนีสตริงโดยการแทนที่ด้วยการเกิดขึ้นใด ๆ ของ"&"ตัวละครโดยสตริง"&"และเหตุการณ์ใด ๆ ของตัวละครโดยสตริง">" ">"เช่น:stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

var htmlEntities = [
            {regex:/&/g,entity:'&'},
            {regex:/>/g,entity:'>'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

โซลูชันอาร์เรย์

หากคุณใช้ jQuery html()ลอง

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

โหนดข้อความในหน่วยความจำถูกสร้างอินสแตนซ์และhtml()ถูกเรียกใช้

มันน่าเกลียดมันเสียหน่วยความจำไปหน่อยและฉันไม่รู้ว่ามันละเอียดพอ ๆ กับheไลบรารีหรือไม่ แต่ถ้าคุณใช้ jQuery อยู่แล้วนี่อาจเป็นตัวเลือกสำหรับคุณ

นำมาจากบล็อกโพสต์เข้ารหัสเอนทิตี HTML ด้วย jQueryโดย Felix Geisendörfer

บางครั้งคุณแค่ต้องการเข้ารหัสอักขระทุกตัว ... ฟังก์ชันนี้จะแทนที่ "ทุกอย่างยกเว้นไม่มีอะไร" ใน regxp

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

function encode(w) {
  return w.replace(/[^]/g, function(w) {
    return "&#" + w.charCodeAt(0) + ";";
  });
}

test.value=encode(document.body.innerHTML.trim());

<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>

ชำระเงินบทช่วยสอนจาก Ourcodeworld Ourcodeworld - เข้ารหัสและถอดรหัสเอนทิตี html ด้วยจาวาสคริปต์

สิ่งสำคัญที่สุดคือตัวอย่างห้องสมุดเขา

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo © bar ≠ baz 𝌆 qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo © bar ≠ baz 𝌆 qux');
// → 'foo © bar ≠ baz ???? qux'

ไลบรารีนี้อาจทำให้การเข้ารหัสของคุณง่ายขึ้นและจัดการได้ดีขึ้น เป็นที่นิยมอัปเดตเป็นประจำและเป็นไปตามข้อกำหนด HTML ตัวมันเองไม่มีการอ้างอิงดังที่เห็นในpackage.json

นี่คือวิธีที่ฉันใช้การเข้ารหัส ฉันได้รับแรงบันดาลใจจากคำตอบที่ให้ไว้ข้างต้น

function encodeHTML(str) {
  const code = {
      ' ' : ' ',
      '¢' : '¢',
      '£' : '£',
      '¥' : '¥',
      '€' : '€', 
      '©' : '©',
      '®' : '®',
      '<' : '&lt;', 
      '>' : '&gt;',  
      '"' : '&quot;', 
      '&' : '&amp;',
      '\'' : '&apos;'
  };
  return str.replace(/[\u00A0-\u9999<>\&''""]/gm, (i)=>code[i]);
}

// TEST
console.log(encodeHTML("Dolce & Gabbana"));
console.log(encodeHTML("Hamburgers < Pizza < Tacos"));
console.log(encodeHTML("Sixty > twelve"));
console.log(encodeHTML('Stuff in "quotation marks"'));
console.log(encodeHTML("Schindler's List"));
console.log(encodeHTML("<>"));

คุณสามารถใช้charCodeAt()วิธีการตรวจสอบว่าอักขระที่ระบุมีค่าสูงกว่า 127 toString(16)และแปลงเป็นตัวอักษรตัวเลขอ้างอิงใช้

replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  var newtext = text;
  for (var tag in tagsToReplace) {
    if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
      var regex = new RegExp(tag, 'g');
      newtext = newtext.replace(regex, tagsToReplace[tag]);
    }
  }
  return newtext;
}