Chuyển đổi các ký tự đặc biệt sang HTML trong Javascript

Có ai biết cách chuyển đổi các ký tự đặc biệt sang HTMLin Javascriptkhông?

Thí dụ:

• &(dấu và) trở thành &amp.
• "(dấu ngoặc kép) trở thành &quotkhi ENT_NOQUOTESkhông được đặt.
• '(trích dẫn đơn) &#039chỉ trở thành khi ENT_QUOTESđược đặt.
• <(nhỏ hơn) trở thành &lt.
• >(lớn hơn) trở thành &gt.

Bạn cần một chức năng có chức năng như

return mystring.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

Nhưng có tính đến mong muốn của bạn để xử lý các dấu ngoặc kép / đơn.

Cách tốt nhất theo tôi là sử dụng chức năng thoát HTML có sẵn của trình duyệt để xử lý nhiều trường hợp. Để làm điều này, chỉ cần tạo một phần tử trong cây DOM và đặt innerTextphần tử đó thành chuỗi của bạn. Sau đó, truy xuất innerHTMLphần tử. Trình duyệt sẽ trả về một chuỗi được mã hóa HTML.

function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}

Chạy thử nghiệm:

alert(HtmlEncode('&;\'><"'));

Đầu ra:

&;'><"

Phương pháp thoát HTML này cũng được sử dụng bởi thư viện JS Prototype mặc dù khác với mẫu đơn giản mà tôi đã đưa ra.

Lưu ý: Bạn vẫn cần tự thoát khỏi các dấu ngoặc kép (kép và đơn). Bạn có thể sử dụng bất kỳ phương pháp nào được nêu bởi những người khác ở đây.

Hàm chung này mã hóa mọi ký tự không phải chữ cái thành mã html (số) của nó:

function HTMLEncode(str) {
    var i = str.length,
        aRet = [];

    while (i--) {
        var iC = str[i].charCodeAt();
        if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
            aRet[i] = '&#'+iC+';';
        } else {
            aRet[i] = str[i];
        }
    }
    return aRet.join('');
}

Từ Mozilla ...

Lưu ý rằng charCodeAt sẽ luôn trả về giá trị nhỏ hơn 65,536. Điều này là do các điểm mã cao hơn được biểu thị bằng một cặp ký tự giả "thay thế" (có giá trị thấp hơn) được sử dụng để bao gồm ký tự thực. Do đó, để kiểm tra hoặc tái tạo ký tự đầy đủ cho các ký tự riêng lẻ có giá trị 65,536 trở lên, đối với các ký tự như vậy, cần phải truy xuất không chỉ charCodeAt (i), mà còn cả charCodeAt (i + 1) (như thể kiểm tra / tái tạo một chuỗi có hai chữ cái>).

Giải pháp tốt nhất

/**
 * (c) 2012 Steven Levithan <http://slevithan.com/>
 * MIT license
 */
if (!String.prototype.codePointAt) {
    String.prototype.codePointAt = function (pos) {
        pos = isNaN(pos) ? 0 : pos;
        var str = String(this),
            code = str.charCodeAt(pos),
            next = str.charCodeAt(pos + 1);
        // If a surrogate pair
        if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
            return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
        }
        return code;
    };
}

/**
 * Encodes special html characters
 * @param string
 * @return {*}
 */
function html_encode(string) {
    var ret_val = '';
    for (var i = 0; i < string.length; i++) { 
        if (string.codePointAt(i) > 127) {
            ret_val += '&#' + string.codePointAt(i) + ';';
        } else {
            ret_val += string.charAt(i);
        }
    }
    return ret_val;
}

Ví dụ sử dụng:

html_encode("✈");

Tạo một hàm sử dụng chuỗi replace

function convert(str)
{
  str = str.replace(/&/g, "&");
  str = str.replace(/>/g, ">");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#039;");
  return str;
}

Đối với những người muốn giải mã một mã char số nguyên như &#xxx;bên trong một chuỗi, hãy sử dụng hàm này:

function decodeHtmlCharCodes(str) { 
  return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
    return String.fromCharCode(charCode);
  });
}

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

ES6

const decodeHtmlCharCodes = str => 
  str.replace(/(&#(\d+);)/g, (match, capture, charCode) => 
    String.fromCharCode(charCode));

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

function char_convert() {

    var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"]; 
    var codes = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","&#252","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"];

    for(x=0; x<chars.length; x++){
        for (i=0; i<arguments.length; i++){
            arguments[i].value = arguments[i].value.replace(chars[x], codes[x]);
        }
    }
 }

char_convert(this);

Như đã được đề cập bởi cách dragonsạch sẽ nhất để làm điều đó là jQuery:

function HtmlEncode(s) {
    return $('<div>').text(s).html();
}

function HtmlDecode(s) {
    return $('<div>').html(s).text();
}

function ConvChar (str) {
  c = {'<': '& lt;', '>': '& gt;', '&': '& amp;', '"': '& quot;'," '":' & # 039; ',
       '#': '& # 035;' };
  return str.replace (/ [<&> '"#] / g, function (s) {return c [s];});
}

alert (ConvChar ('<- "- & -" -> - <- \' - # - \ '->'));

Kết quả:

& lt; - & quot; - & amp; - & quot; - & gt; - & lt; - & # 039; - & # 035; - & # 039; - & gt;

Trong thẻ testarea:

<- "- & -" -> - <-'- # -'->

Nếu bạn chỉ thay đổi một chút ký tự trong mã dài ...

Trong một PREthẻ -và trong hầu hết các thẻ HTML khác- văn bản thuần túy cho một tệp loạt sử dụng các ký tự chuyển hướng đầu ra (<và>) sẽ phá vỡ HTML, nhưng đây là mẹo của tôi : bất cứ thứ gì đi trong một TEXTAREAphần tử-nó sẽ không phá vỡ HTML, chủ yếu là vì chúng ta đang ở bên trong một điều khiển được cài đặt và xử lý bởi Hệ điều hành, và do đó nội dung của nó không được phân tích cú pháp bởi công cụ HTML.

Ví dụ: giả sử tôi muốn làm nổi bật cú pháp của tệp hàng loạt bằng javascript. Tôi chỉ cần dán mã vào một vùng văn bản mà không cần lo lắng về các ký tự dành riêng cho HTML và quy trình tập lệnhinnerHTML tính của vùng văn bản, đánh giá văn bản với các ký tự dành riêng cho HTML được thay thế bằng các thực thể ISO-8859-1 tương ứng của chúng.

Trình duyệt sẽ tự động thoát các ký tự đặc biệt khi bạn truy xuất thuộc tính innerHTML(và outerHTML) của một phần tử. Sử dụng một vùng văn bản (và ai biết được, có thể là đầu vào của loại văn bản) chỉ giúp bạn không phải thực hiện chuyển đổi (theo cách thủ công hoặc thông qua mã).

Tôi sử dụng thủ thuật này để kiểm tra công cụ đánh dấu cú pháp của mình và khi tôi hoàn thành việc tạo và kiểm tra, tôi chỉ cần ẩn vùng văn bản khỏi chế độ xem.

Nếu bạn cần hỗ trợ cho tất cả các tham chiếu ký tự được đặt tên được chuẩn hóa , ký hiệu unicode và ký hiệu không rõ ràng , thì thư viện he là giải pháp đáng tin cậy 100% duy nhất mà tôi biết!

Ví dụ sử dụng

he.encode('foo © bar ≠ baz 𝌆 qux'); 
// Output : 'foo © bar ≠ baz 𝌆 qux'

he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'

một cách giải quyết:

var temp = $("div").text("<");
var afterEscape = temp.html(); // afterEscape == "&lt;"

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "©", "•", "•", "•");

var TextCheck = {
    doCWBind:function(div){
        $(div).bind({
            bind:function(){
                TextCheck.cleanWord(div);
            },
            focus:function(){
                TextCheck.cleanWord(div);
            },
            paste:function(){
                TextCheck.cleanWord(div);
            }
        }); 
    },
    cleanWord:function(div){
        var output = $(div).val();
        for (i = 0; i < swapCodes.length; i++) {
            var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g");
            output = output.replace(swapper, swapStrings[i]);
        }
        $(div).val(output);
    }
}

Một cái khác mà chúng tôi sử dụng bây giờ đã hoạt động. Ở trên, tôi có nó gọi một tập lệnh thay thế và trả về mã đã chuyển đổi. Chỉ tốt trên các textareas nhỏ (có nghĩa là không phải là một bài báo / blog đầy đủ ...)

Đối với trên. Hoạt động trên hầu hết các ký tự.

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607,161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

Tôi tạo một tệp javascript có rất nhiều chức năng bao gồm cả những chức năng trên. http://www.neotropicsolutions.com/JSChars.zip

Tất cả các tệp cần thiết đều được bao gồm. Tôi đã thêm jQuery 1.4.4. Đơn giản vì tôi đã thấy các vấn đề trong các phiên bản khác, nhưng vẫn chưa dùng thử.

Requires: jQuery & jQuery Impromptu from: http://trentrichardson.com/Impromptu/index.php

1. Word Count
2. Character Conversion
3. Checks to ensure this is not passed: "notsomeverylongstringmissingspaces"
4. Checks to make sure ALL IS NOT ALL UPPERCASE.
5. Strip HTML

    // Word Counter
    $.getScript('js/characters.js',function(){
            $('#adtxt').bind("keyup click blur focus change paste",
                function(event){
                    TextCheck.wordCount(30, "#adtxt", "#adtxt_count", event);
            });
            $('#adtxt').blur(
                function(event){
                    TextCheck.check_length('#adtxt'); // unsures properly spaces-not one long word
                    TextCheck.doCWBind('#adtxt');// char conversion
            });

            TextCheck.wordCount(30, "#adtxt", "#adtxt_count", false);
        });

    //HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" class="wordCount"></textarea>
<div id="adtxt_count" class="clear"></div>

    // Just Character Conversions:
    TextCheck.doCWBind('#myfield');

    // Run through form fields in a form for case checking.
    // Alerts user when field is blur'd.
    var labels = new Array("Brief Description","Website URL","Contact Name","Website","Email","Linkback URL");
    var checking = new Array("descr","title","fname","website","email","linkback");
    TextCheck.check_it(checking,labels);

    // Extra security to check again, make sure form is not submitted
    var pass = TextCheck.validate(checking,labels);
    if(pass){
        //do form actions
    }


    //Strip HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" onblur="TextCheck.stripHTML(this);"></textarea>

 <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>html</title>  
      <script>
      $(function() {   
      document.getElementById('test').innerHTML = "&amp;";
      });

      </script>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

bạn chỉ cần chuyển đổi các ký tự đặc biệt sang html bằng cách sử dụng mã trên.

Đây là một thư viện tốt mà tôi thấy rất hữu ích trong bối cảnh này.

https://github.com/mathiasbynens/he

Theo tác giả của nó:

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ó 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 rất tốt

Dưới đây là một số phương pháp tôi sử dụng mà không cần Jquery:

Bạn có thể mã hóa mọi ký tự trong chuỗi của mình:

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

Hoặc chỉ nhắm mục tiêu các ký tự mã hóa an toàn chính cần lo lắng về (&, inebreaks, <,>, "và ') như:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

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

function escape (text)
{
  return text.replace(/[<>\&\"\']/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
  });
}

alert(escape("<>&'\""));

Điều này không trả lời rõ ràng câu hỏi của bạn, nhưng nếu bạn đang sử dụng innerHTMLđể viết văn bản trong một phần tử và bạn gặp phải sự cố mã hóa, chỉ cần sử dụng textContent, tức là:

var s = "Foo 'bar' baz <qux>";

var element = document.getElementById('foo');
element.textContent = s;

// <div id="foo">Foo 'bar' baz <qux></div>

Chúng ta có thể sử dụng javascript DOMParserđể chuyển đổi các ký tự đặc biệt.

const parser = new DOMParser();
const convertedValue = (parser.parseFromString("&#039 &amp &#039 &lt &gt", "application/xml").body.innerText;

Sau đây là hàm đơn giản để mã hóa các ký tự thoát xml trong JS

Encoder.htmlEncode (Văn bản không an toàn);

Bạn có thể sửa nó bằng cách thay thế hàm .text () thành .html (). nó làm việc cho tôi.

<html>
<body>
<script type="text/javascript">
var str= "&\"'<>";
alert('B4 Change:\n' + str);
str= str.replace(/\&/g,'&amp;');
str= str.replace(/</g,'&lt;');
str= str.replace(/>/g,'&gt;');
str= str.replace(/\"/g,'&quot;');
str= str.replace(/\'/g,'&#039;');
alert('After change:\n' + str);
</script>
</body>
</html>      

sử dụng cái này để kiểm tra: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Có, nhưng nếu bạn cần chèn chuỗi kết quả vào đâu đó mà nó không được chuyển đổi trở lại, bạn cần phải làm:

str.replace(/'/g,"'"); // and so on

Xem htmlentities JavaScript http://phpjs.org/functions/htmlentities:425

Sử dụng hàm javaScript thoát () , cho phép bạn mã hóa các chuỗi.

ví dụ,

escape("yourString");

public static string HtmlEncode (string text)
{
    string result;
    using (StringWriter sw = new StringWriter())
    {
        var x = new HtmlTextWriter(sw);
        x.WriteEncodedText(text);
        result = sw.ToString();
    }
    return result;

}