แปลงอักขระพิเศษเป็น HTML ใน Javascript

มีใครรู้วิธีแปลงอักขระพิเศษเป็นHTMLin Javascriptหรือไม่?

ตัวอย่าง:

• &(เครื่องหมาย) &ampจะกลายเป็น
• "(เครื่องหมายคำพูดคู่) กลายเป็น&quotเมื่อENT_NOQUOTESไม่ได้ตั้งค่า
• '(เครื่องหมายคำพูดเดี่ยว) จะกลายเป็น&#039เฉพาะเมื่อENT_QUOTESมีการตั้งค่า
• <(น้อยกว่า) &ltจะกลายเป็น
• >(มากกว่า) &gtจะกลายเป็น

คุณต้องการฟังก์ชันที่ทำสิ่งที่ต้องการ

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

แต่คำนึงถึงความต้องการของคุณในการจัดการคำพูดเดี่ยว / คู่ที่แตกต่างกัน

วิธีที่ดีที่สุดในความคิดของฉันคือการใช้ฟังก์ชันหลบหนี HTML ในตัวของเบราว์เซอร์เพื่อจัดการกับหลาย ๆ กรณี ในการดำเนินการนี้เพียงสร้างองค์ประกอบในโครงสร้าง DOM และตั้งค่าinnerTextองค์ประกอบเป็นสตริงของคุณ จากนั้นดึงข้อมูลinnerHTMLขององค์ประกอบ เบราว์เซอร์จะส่งคืนสตริงที่เข้ารหัส HTML

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

ทดสอบการทำงาน:

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

เอาท์พุท:

&;'><"

วิธีการหลีกเลี่ยง HTML นี้ยังใช้โดยไลบรารี Prototype JSแม้ว่าจะแตกต่างจากตัวอย่างแบบง่ายที่ฉันให้ไว้

หมายเหตุ: คุณยังคงต้องหลีกเลี่ยงเครื่องหมายคำพูด (คู่และเดี่ยว) ด้วยตัวคุณเอง คุณสามารถใช้วิธีการใดก็ได้ที่ระบุไว้ที่นี่

ฟังก์ชันทั่วไปนี้เข้ารหัสอักขระที่ไม่ใช่ตัวอักษรทุกตัวเป็น htmlcode (ตัวเลข):

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

จาก Mozilla ...

โปรดทราบว่า charCodeAt จะส่งคืนค่าที่น้อยกว่า 65,536 เสมอ นี่เป็นเพราะจุดรหัสที่สูงกว่าจะแสดงด้วยอักขระหลอก "ตัวแทน" (ค่าต่ำกว่า) ซึ่งใช้เพื่อประกอบอักขระจริง ด้วยเหตุนี้ในการตรวจสอบหรือสร้างอักขระแบบเต็มสำหรับอักขระแต่ละตัวที่มีค่าตั้งแต่ 65,536 ขึ้นไปสำหรับอักขระดังกล่าวจึงจำเป็นต้องดึงข้อมูล charCodeAt (i) ไม่เพียง แต่ยังรวมถึง charCodeAt (i + 1) (ราวกับว่ากำลังตรวจสอบ / การสร้างสตริงที่มีสอง> ตัวอักษร)

ทางออกที่ดีที่สุด

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

ตัวอย่างการใช้งาน:

html_encode("✈");

สร้างฟังก์ชันที่ใช้สตริง 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;
}

สำหรับผู้ที่ต้องการถอดรหัสรหัสถ่านจำนวนเต็มเช่น&#xxx;ภายในสตริงให้ใช้ฟังก์ชันนี้:

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

ดังที่กล่าวไว้โดยdragonวิธีที่สะอาดที่สุดคือjQuery:

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

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

ฟังก์ชัน ConvChar (str) {
  c = {'<': '& lt;', '>': '& gt;', '&': '& amp;', '"': '& quot;'," '":' & # 039; ',
       '#': '& # 035; };
  กลับ str.replace (/ [<&> '"#] / g, function (s) {return c [s];});
}

การแจ้งเตือน (ConvChar ('<- "- & -" -> - <- \' - # - \ '->'));

ผลลัพธ์:

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

ในแท็ก testarea:

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

หากคุณจะเปลี่ยนอักขระเล็กน้อยในโค้ดยาว ...

ในPREแท็ก - และในแท็ก HTML อื่น ๆ ส่วนใหญ่ - ข้อความธรรมดาสำหรับไฟล์แบตช์ที่ใช้อักขระการเปลี่ยนทิศทางเอาต์พุต (<และ>) จะทำลาย HTML แต่นี่คือเคล็ดลับของฉัน : สิ่งใดก็ตามที่อยู่ในTEXTAREAองค์ประกอบ - มันจะไม่ทำลาย HTML ส่วนใหญ่เป็นเพราะเราอยู่ในการควบคุมที่ติดตั้งและจัดการโดย OS ดังนั้นเนื้อหาของมันจึงไม่ถูกแยกวิเคราะห์โดยเอ็นจิ้น HTML

ตัวอย่างเช่นสมมติว่าฉันต้องการเน้นไวยากรณ์ของไฟล์แบตช์ของฉันโดยใช้จาวาสคริปต์ ฉันเพียงแค่วางโค้ดใน textarea โดยไม่ต้องกังวลเกี่ยวกับอักขระที่สงวนไว้ HTML และให้สคริปต์ประมวลผลinnerHTMLคุณสมบัติของ textarea ซึ่งประเมินเป็นข้อความด้วยอักขระสงวน HTML ที่ถูกแทนที่ด้วยเอนทิตี ISO-8859-1 ที่สอดคล้องกัน

เบราว์เซอร์จะออกจากอักขระพิเศษโดยอัตโนมัติเมื่อคุณดึงข้อมูลคุณสมบัติinnerHTML(และouterHTML) ขององค์ประกอบ การใช้ textarea (และใครจะรู้ว่าอาจจะเป็นการป้อนข้อความประเภท) ช่วยให้คุณไม่ต้องทำการแปลง (ด้วยตนเองหรือผ่านรหัส)

ฉันใช้เคล็ดลับนี้เพื่อทดสอบปากกาเน้นข้อความไวยากรณ์ของฉันและเมื่อฉันเขียนและทดสอบเสร็จแล้วฉันก็ซ่อนพื้นที่ข้อความไม่ให้เห็น

หากคุณต้องการการสนับสนุนสำหรับทุกมาตรฐานชื่ออ้างอิงตัว , Unicodeและเครื่องหมายคลุมเครือที่เขาห้องสมุดเป็นทางออกที่น่าเชื่อถือเพียง 100% ฉันรู้!

ตัวอย่างการใช้งาน

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

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

วิธีแก้ปัญหา:

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

อีกอันที่เราใช้ตอนนี้ที่ใช้ได้ ด้านบนฉันเรียกสคริปต์แทนและส่งคืนรหัสที่แปลงแล้ว ใช้ได้ดีกับพื้นที่ข้อความขนาดเล็กเท่านั้น (หมายถึงบทความ / บล็อกไม่ครบถ้วน ... )

สำหรับด้านบน ใช้งานได้กับตัวอักษรส่วนใหญ่

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("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

ฉันสร้างไฟล์จาวาสคริปต์ที่มีฟังก์ชันมากมายรวมถึงข้างต้น http://www.neotropicsolutions.com/JSChars.zip

รวมไฟล์ทั้งหมดที่จำเป็น ฉันเพิ่ม jQuery 1.4.4 เพียงเพราะฉันพบปัญหาในเวอร์ชันอื่น แต่ยังไม่ได้ลองใช้

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>

คุณสามารถแปลงอักขระพิเศษเป็น html โดยใช้โค้ดด้านบน

นี่คือห้องสมุดที่ดีที่ฉันพบว่ามีประโยชน์มากในบริบทนี้

https://github.com/mathiasbynens/he

ตามที่ผู้เขียน:

สนับสนุนการอ้างอิงอักขระที่มีชื่อมาตรฐานทั้งหมดตาม HTML จัดการเครื่องหมายแอมเพอร์แซนด์ที่ไม่ชัดเจนและกรณีขอบอื่น ๆ เช่นเดียวกับเบราว์เซอร์มีชุดทดสอบที่กว้างขวางและ - ตรงกันข้ามกับโซลูชัน JavaScript อื่น ๆ อีกมากมาย - เขาจัดการสัญลักษณ์ Astral Unicode ได้ดี

นี่คือสองวิธีที่ฉันใช้โดยไม่จำเป็นต้องใช้ Jquery:

คุณสามารถเข้ารหัสอักขระทุกตัวในสตริงของคุณ:

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

หรือเพียงแค่กำหนดเป้าหมายไปยังอักขระเข้ารหัสที่ปลอดภัยหลักที่ต้องกังวลเกี่ยวกับ (&, Inbreaks, <,>, "and ') เช่น:

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

สิ่งนี้ไม่ได้ตอบคำถามของคุณอย่างตรงไปตรงมา แต่ถ้าคุณใช้innerHTMLเพื่อเขียนข้อความภายในองค์ประกอบและคุณพบปัญหาในการเข้ารหัสให้ใช้textContentเช่น:

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

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

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

เราสามารถใช้จาวาสคริปต์DOMParserสำหรับการแปลงอักขระพิเศษ

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

ต่อไปนี้เป็นฟังก์ชันง่ายๆในการเข้ารหัสอักขระหนี xml ใน JS

Encoder.htmlEncode (unsafeText);

คุณสามารถแก้ไขได้โดยแทนที่ฟังก์ชัน. text () เป็น. html () มันทำงานให้ฉัน

<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>      

ใช้สิ่งนี้เพื่อทดสอบ: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

ใช่ แต่ถ้าคุณต้องการแทรกสตริงผลลัพธ์ที่ใดที่หนึ่งโดยไม่ต้องแปลงกลับคุณต้องทำ:

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

ดู JavaScript htmlentities http://phpjs.org/functions/htmlentities:425

ใช้ javaScript Function escape ()ที่ให้คุณเข้ารหัสสตริง

เช่น,

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;

}