sweet-alert display HTML code in text

JavascriptSweetalert

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

The SweetAlert repo seems to be unmaintained. There's a bunch of Pull Requests without any replies, the last merged pull request was on Nov 9, 2014.

I created SweetAlert2 with HTML support in modal and some other options for customization modal window - width, padding, Esc button behavior, etc.

Swal.fire({
  title: "<i>Title</i>", 
  html: "Testno  sporocilo za objekt: <b>test</b>",  
  confirmButtonText: "V <u>redu</u>", 
});


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Solution 2 - Javascript

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

Solution 3 - Javascript

I was upgrading from old sweetalert and found out how to do it in the new Version (official Docs):

// this is a Node object    
var span = document.createElement("span");
span.innerHTML = "Testno  sporocilo za objekt <b>test</b>";

swal({
    title: "" + txt + "", 
    content: span,
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

Solution 4 - Javascript

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

Solution 5 - Javascript

As of 2018, the accepted answer is out-of-date:

Sweetalert is maintained, and you can solve the original question's issue with use of the content option.

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

Solution 8 - Javascript

There's sweet Alert version 1 and 2. Actual version 2 works with HTML nodes.

I have a Sweet Alert 2 with a data form that looks this way:

<script>
 var form = document.createElement("div");
      form.innerHTML = `
      <span id="tfHours">0</span> hours<br>
      <input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
      onchange="window.changeHours(this.value)"
      oninput="window.changeHours(this.value)"
      ><br>
      <span id="tfMinutes">0</span> min<br>
      <input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
      onchange="window.changeMinutes(this.value)"
      oninput="window.changeMinutes(this.value)"
      >`;

      swal({
        title: 'Request time to XXX',
        text: 'Select time to send / request',
        content: form,
        buttons: {
          cancel: "Cancel",
          catch: {
            text: "Create",
            value: 5,
          },
        }
      }).then((value) => {
        console.log(value);
      });

 window.changeHours = function (value){
   var tfHours = document.getElementById("tfHours");
   tfHours.innerHTML = value;
 }
 window.changeMinutes = function (value){
   var tfMinutes = document.getElementById("tfMinutes");
   tfMinutes.innerHTML = value;
 }

Have a go to the Codepen Example!

Solution 9 - Javascript

I know that my answer may come in too late, but i found a fix that works for me.

  1. Create an object to hold in your html content

> var html_element = '<p><code>This</code> is an error</p>';

  1. Then proceed on to create your sweet alert element

> swal({ > title: "My Title", > text: "",
> html: true,
> confirmButtonText: "Okay" > });

  1. Use javascript setTimeout function to append your html into the sweet alert. I found that setting the timeout to 210 works well

    > setTimeout(function(){ > $('.sweet-alert p:eq(0)').html(html_element) > },210);

And You have done it!

Solution 10 - Javascript

All you have to do is enable the html variable to true.. I had same issue, all i had to do was html : true ,

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

Note: html : "Testno sporocilo za objekt " + hh + "",
may not work as html porperty is only use to active this feature by assign true / false value in the Sweetalert.
this html : "Testno sporocilo za objekt " + hh + "", is used in SweetAlert2

Solution 11 - Javascript

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

Solution 12 - Javascript

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>";
Categories
Recommended Javascript Solutions
Recommended Sweetalert Solutions

Previous Solution:

How to implement a material design circular progress bar in android

AndroidMaterial DesignAndroid Progressbar

Next Solution:

Is it correct to return 404 when a REST resource is not found?

RestHttp Status-Codes

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPeterView Question on Stackoverflow
Solution 1 - JavascriptLimon MonteView Answer on Stackoverflow
Solution 2 - JavascriptjitmoView Answer on Stackoverflow
Solution 3 - JavascriptVyctoryaView Answer on Stackoverflow
Solution 4 - JavascriptMichael McHaneyView Answer on Stackoverflow
Solution 5 - JavascriptGavinRView Answer on Stackoverflow
Solution 6 - JavascriptShnigiView Answer on Stackoverflow
Solution 7 - JavascriptSilvio DelgadoView Answer on Stackoverflow
Solution 8 - JavascriptgtamboreroView Answer on Stackoverflow
Solution 9 - JavascriptKario KevoView Answer on Stackoverflow
Solution 10 - JavascriptAd KahnView Answer on Stackoverflow
Solution 11 - JavascriptBruno SoaresView Answer on Stackoverflow
Solution 12 - JavascriptGrammar NinjaView Answer on Stackoverflow