แสดงตัวแปรเป็น HTML ใน EJS


99

ฉันใช้ไลบรารี Forms สำหรับ Node.js ( Forms ) ซึ่งจะสร้างแบบฟอร์มให้ฉันในแบ็กเอนด์ดังนี้:

var signup_form = forms.create({
    username: fields.string({required: true})
    , password: fields.password({required: true})
    , confirm:  fields.password({
        required: true
        , validators: [validators.matchField('password')]
    })
    , email: fields.email()
});
var signup_form_as_html = signup_form.toHTML();

บรรทัดสุดท้ายvar signup_var signup_form_as_html = signup_form.toHTML();สร้างบล็อก HTML ซึ่งมีลักษณะดังนี้:

<div class="field required"><label for="id_username">Username</label><input type="text" name="username" id="id_username" /></div><div class="field required"><label for="id_password">Password</label><input type="password" name="password" id="id_password" /></div><div class="field required"><label for="id_confirm">Confirm</label><input type="password" name="confirm" id="id_confirm" /></div><div class="field"><label for="id_email">Email</label><input type="text" name="email" id="id_email" /></div>

โดยทั่วไปเป็นสตริง HTML แบบยาว จากนั้นฉันพยายามแสดงผลโดยใช้ EJS และ Express โดยใช้รหัสต่อไปนี้:

res.render('signup.ejs', {
    session: loginStatus(req)
    , form: signup_form_as_html
});

แต่ในการแสดงผล HTML เป็นเพียงสตริงที่ฉันโพสต์ไว้ข้างต้นแทนที่จะเป็น HTML จริง (และเป็นรูปแบบตามที่ฉันต้องการ) มีวิธีใดบ้างที่จะทำให้สตริงนั้นแสดงผลเป็น HTML จริงโดยใช้ EJS หรือจะต้องใช้หยกอะไรสักอย่าง?

คำตอบ:


305

ด้วย EJS คุณสามารถมีหลายแท็ก:

    <% code %>

... ซึ่งเป็นรหัสที่ได้รับการประเมิน แต่ไม่ได้พิมพ์ออกมา

    <%= code %>

... ซึ่งเป็นรหัสที่ถูกประเมินและพิมพ์ออกมา (Escape)

    <%- code %>

... ซึ่งเป็นรหัสที่ได้รับการประเมินและพิมพ์ออกมา (ไม่ได้ใช้ Escape)

เนื่องจากคุณต้องการพิมพ์ตัวแปรของคุณและไม่หนีจากตัวแปรรหัสของคุณจะเป็นประเภทสุดท้าย (พร้อมด้วย<%-) ในกรณีของคุณ:

    <%- my_form_content %>

สำหรับแท็กเพิ่มเติมโปรดดูเอกสาร EJS ฉบับเต็ม


9
props dude bravo ที่แก้ไขปัญหาของฉันได้ทันที
cbsm1th

ใช้เวลาหลายชั่วโมงในการหาวิธีทำจนเจอโพสต์นี้ ขอบคุณมาก !!!
แซม

ดีคุณช่วยวันของฉัน
Afshin Mehrabani

กำลังใช้โมดูลที่แน่นอนถามที่นี่ โชคดีมาก :) ขอบคุณ
majidarif

สิ่งที่สามารถใช้เพื่อหลีกเลี่ยงอักขระ "(จุลภาคกลับด้าน)
วิกเตอร์

17

การอัปเดตประจำเดือนตุลาคม 2017

การพัฒนา ejs (v2, v2.5.7) ใหม่กำลังเกิดขึ้นที่นี่: https://github.com/mde/ejs ejs เก่า (v0.5.x, 0.8.5, v1.0.0) มีอยู่ที่นี่https: / /github.com/tj/ejs

ตอนนี้คุณสามารถทำสิ่งต่างๆได้มากขึ้นด้วย ejs คุณสามารถใช้ได้:

  • เอาท์พุตที่มี<%= %>ค่าEscape พร้อมด้วย(ฟังก์ชัน Escape ที่กำหนดค่าได้)
  • เอาต์พุตดิบที่ไม่ใช้ค่า Escape ด้วย <%- %>
  • Newline-trim mode ('newline slurping') พร้อม-%>แท็กปิดท้าย
  • โหมดตัดช่องว่าง (เบี่ยงช่องว่างทั้งหมด) สำหรับการควบคุมโฟลว์ด้วย <%_ _%>
  • ควบคุมกระแสด้วย <% %>

ดังนั้นในกรณีของคุณมันเป็นไปได้<%- variable %>ที่variableเป็นสิ่งที่ต้องการ

var variable = "text here <br> and some more text here";

ฉันหวังว่านี่จะช่วยใครบางคนได้ 🙂


3

ฉันมีปัญหาเดียวกันกับการแสดงผลอินพุต textarea จากตัวแก้ไข wysiwyg ที่บันทึกเป็น html ในฐานข้อมูลของฉัน เบราว์เซอร์จะไม่แสดงผล แต่แสดง html เป็นข้อความ หลังจากค้นหามาหลายชั่วโมงฉันก็ค้นพบ

<%= data %> ข้อมูลที่หลบหนีในขณะที่

<%- data %>เหลือข้อมูล 'ดิบ' (ไม่ใช้ค่า Escape) และเบราว์เซอร์สามารถแสดงผลได้แล้ว

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.