Mã hóa các thực thể html trong javascript

Tôi đang làm việc trong CMS cho phép người dùng nhập nội dung. Vấn đề là khi họ thêm các biểu tượng ®, nó có thể không hiển thị tốt trong tất cả các trình duyệt. Tôi muốn thiết lập một danh sách các ký hiệu phải được tìm kiếm và sau đó được chuyển đổi sang thực thể html tương ứng. Ví dụ

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

Sau khi chuyển đổi, nó cần được bao bọc trong một <sup> thẻ, dẫn đến điều này:

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

Bởi vì kích thước phông chữ và kiểu đệm cụ thể là cần thiết:

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

JavaScript có giống như thế này không?

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

Ở đâu "[?]" Có nghĩa là có điều gì đó mà tôi không chắc chắn.

Chi tiết bổ sung:

• Tôi muốn làm điều này với JavaScript thuần túy, không phải thứ yêu cầu thư viện như jQuery, cảm ơn.
• Backend là Ruby
• Sử dụng RefineryCMS được xây dựng bằng Ruby on Rails

Bạn có thể sử dụng regex để thay thế bất kỳ ký tự nào trong một dải unicode nhất định bằng thực thể html tương đương của nó. Mã sẽ trông giống như sau:

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

Mã này sẽ thay thế tất cả các nhân vật trong phạm vi nhất định (unicode 00A0 - 9999, cũng như dấu và, hơn & ít hơn) với các khoản tương đương thực thể html của họ, mà chỉ đơn giản là &#nnn;nơi nnnđược giá trị unicode chúng tôi nhận được từcharCodeAt .

Xem nó hoạt động tại đây: http://jsfiddle.net/E3EqX/13/ (ví dụ này sử dụng jQuery cho các bộ chọn phần tử được sử dụng trong ví dụ. Bản thân mã cơ sở ở trên không sử dụng jQuery)

Thực hiện các chuyển đổi này không giải quyết được tất cả các vấn đề - hãy đảm bảo rằng bạn đang sử dụng mã hóa ký tự UTF8, đảm bảo rằng cơ sở dữ liệu của bạn đang lưu trữ các chuỗi trong UTF8. Bạn vẫn có thể thấy các trường hợp ký tự không hiển thị chính xác, tùy thuộc vào cấu hình phông chữ hệ thống và các vấn đề khác ngoài tầm kiểm soát của bạn.

Tài liệu

• String.charCodeAt- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• Các thực thể Ký tự HTML - http://www.chucke.com/entities.html

Câu trả lời hiện được chấp nhận có một số vấn đề. Bài đăng này giải thích chúng và cung cấp một giải pháp mạnh mẽ hơn. Giải pháp được đề xuất trong câu trả lời đó trước đây có:

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

Các i lá cờ là không cần thiết vì không có biểu tượng Unicode trong khoảng từ U + 00A0 đến U + 9999 có một chữ hoa / chữ thường biến thể đó nằm ngoài phạm vi đó tương tự.

Các mlá cờ là không cần thiết vì ^hay$ không được sử dụng trong các biểu thức chính quy.

Tại sao phạm vi U + 00A0 đến U + 9999? Nó có vẻ tùy tiện.

Dù sao, đối với một giải pháp mã hóa chính xác tất cả ngoại trừ các ký hiệu ASCII an toàn và có thể in được trong đầu vào (bao gồm cả ký hiệu astral!) Và triển khai tất cả các tham chiếu ký tự được đặt tên (không chỉ những ký tự trong HTML4), hãy sử dụng thư viện he (tuyên bố từ chối trách nhiệm: Thư viện này là của tôi ). Từ README của nó:

he (đối với “các thực thể HTML”) là một bộ mã hóa / giải mã thực thể HTML mạnh mẽ được viết bằng JavaScript. Nó hỗ trợ tất cả các tham chiếu ký tự được đặt tên được tiêu chuẩn hóa theo HTML , xử lý các ký hiệu và ký tự không rõ ràng và các trường hợp biên khác giống như trình duyệt , có một bộ thử nghiệm mở rộng và - trái với nhiều giải pháp JavaScript khác - anh ấy xử lý các ký hiệu Unicode thuần túy. Một bản demo trực tuyến có sẵn.

Cũng xem câu trả lời Stack Overflow có liên quan này .

Tôi đã gặp vấn đề tương tự và đã tạo 2 hàm để tạo thực thể và dịch chúng trở lại ký tự bình thường. Các phương pháp sau đây dịch bất kỳ chuỗi nào sang các thực thể HTML và quay lại nguyên mẫu chuỗi

/**
 * 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]);
    })
};

Sau đó, bạn có thể sử dụng nó như sau:

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

Đầu ra trong bảng điều khiển:

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

Không có bất kỳ thư viện nào, nếu bạn không cần hỗ trợ IE <9, bạn có thể tạo một phần tử html và đặt nội dung của nó bằng Node.textContent :

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

Đây là một ví dụ: https://jsfiddle.net/1erdhehv/

Bạn có thể sử dụng cái này.

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

Nếu bạn muốn tránh mã hóa các thực thể html nhiều lần

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

# Thí dụ

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>

Các ký tự đặc biệt trong HTML & nó ESCAPE CODES

Các ký tự dành riêng phải được thoát bằng HTML: Chúng ta có thể sử dụng lối thoát ký tự để đại diện cho bất kỳ ký tự Unicode nào [Ví dụ: & - U + 00026] trong HTML, XHTML hoặc XML chỉ sử dụng các ký tự ASCII. Tham chiếu ký tự số [ Ví dụ: dấu và (&) - &] & Tham chiếu ký tự được đặt tên [Ví dụ: &] là các loại character escape used in markup.

Thực thể được xác định trước

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

Để hiển thị Thẻ HTML ở dạng bình thường trong trang web chúng ta sử dụng <pre>, <code>các thẻ hoặc chúng ta có thể thoát khỏi chúng. Thoát khỏi chuỗi bằng cách thay thế bằng bất kỳ lần xuất hiện nào của "&"ký tự bằng chuỗi "&"và bất kỳ lần xuất hiện nào của ">"ký tự bằng chuỗi ">". Ví dụ: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);
}

Một giải pháp mảng

Nếu bạn đã sử dụng jQuery, hãy thử html().

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

Một nút văn bản trong bộ nhớ được khởi tạo và html()được gọi trên đó.

Nó xấu xí, lãng phí một chút bộ nhớ và tôi không biết liệu nó có kỹ lưỡng như hethư viện hay không nhưng nếu bạn đã sử dụng jQuery, có lẽ đây là một lựa chọn cho bạn.

Lấy từ bài đăng trên blog Mã hóa các thực thể HTML bằng jQuery của Felix Geisendörfer.

Đôi khi bạn chỉ muốn mã hóa mọi ký tự ... Hàm này thay thế "mọi thứ nhưng không có gì" trong 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>

Xem hướng dẫn từ Ourcodeworld Ourcodeworld - mã hóa và giải mã các thực thể html bằng javascript

Quan trọng nhất, ví dụ thư viện he

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'

Thư viện này có thể sẽ giúp việc viết mã của bạn dễ dàng hơn và được quản lý tốt hơn. Nó phổ biến, được cập nhật thường xuyên và tuân theo thông số kỹ thuật HTML. Bản thân nó không có phụ thuộc, như có thể thấy trong package.json

Đây là cách tôi triển khai mã hóa. Tôi lấy cảm hứng từ những câu trả lời được đưa ra ở trên.

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

Bạn có thể sử dụng charCodeAt()phương pháp để kiểm tra xem ký tự được chỉ định có giá trị cao hơn 127 hay không và chuyển đổi nó thành tham chiếu ký tự số bằng cách sử dụng 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;
}