sweet-alert display HTML code in text

Question

I am using sweet-alert plugin to display an alert. With a classical config (defaults), everything goes OK. But when I want to add a HTML tag into the TEXT, it display <b>...</b> without making it bold. After searching for the answer, it looks like I don't have the right search word...

How to make sweet alert display the text also with HTML code?

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    text: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

Answer 1

I just applied the patch above and it starts working.

diff --git a/sweet-alert.js b/sweet-alert.js
index ab6e1f1..d7eafaa 100755
--- a/sweet-alert.js
+++ b/sweet-alert.js
@@ -200,7 +200,8 @@
       confirmButtonColor: '#AEDEF4',
       cancelButtonText: 'Cancel',
       imageUrl: null,
-      imageSize: null
+      imageSize: null,
+      html: false
     };
 
     if (arguments[0] === undefined) {
@@ -224,6 +225,7 @@
           return false;
         }
 
+        params.html               = arguments[0].html;
         params.title              = arguments[0].title;
         params.text               = arguments[0].text || params.text;
         params.type               = arguments[0].type || params.type;
@@ -477,11 +479,18 @@
         $cancelBtn = modal.querySelector('button.cancel'),
         $confirmBtn = modal.querySelector('button.confirm');
 
+      console.log(params.html);
     // Title
-    $title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
+    if(params.html)
+      $title.innerHTML = params.title.split("\n").join("<br>");
+    else
+      $title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
 
     // Text
-    $text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
+    if(params.html)
+      $text.innerHTML = params.text.split("\n").join("<br>");
+    else
+      $text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
     if (params.text) {
       show($text);
     }

Answer 2

Sweet alerts also has an 'html' option, set it to true.

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    html: true,
    text: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

Answer 3

A feature to allow HTML for title and text parameters has been added with a recent merge into the master branch on GitHub https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d

Simply use JSON configuration and set 'html' to true, eg:

swal({ html:true, title:'<i>TITLE</i>', text:'<b>TEXT</b>'});

This was merged less than a week ago and is hinted at in the README.md (html is set to false in one of the examples although not explicitly described) however it is not yet documented on the marketing page http://tristanedwards.me/sweetalert

Answer 4

I just struggled with this. I upgraded from sweetalert 1 -> 2. This library: https://sweetalert.js.org/guides/

The example from documentation "string" doesn't work as I expected. You just can't put it like this.

content: `my es6 string <strong>template</strong>` 

How I solved it:

const template = (`my es6 string <strong'>${variable}</strong>`);
content: {
      element: 'p',
      attributes: {
        innerHTML: `${template}`,
      },
    }

There is no documentation how to do this, it was pure trial and error, but at least seems to work.

Answer 5

Use SweetAlert's html setting.

You can set output html direct to this option:

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    html: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

Or

swal({
    title: "" + txt + "", 
    html: "Testno  sporocilo za objekt <b>teste</b>",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

Answer 6

I assume that </ is not accepted inside the string.

Try to escape the forward slash "/" by preceding it with a backward slash "\" for example:

var hh = "<b>test<\/b>";