javascript - escribir - alerta dulce muestra el código HTML en el texto

innerhtml

Question

Estoy usando un complemento de alerta dulce para mostrar una alerta. Con una configuración clásica (valores predeterminados), todo va bien. Pero cuando deseo agregar una etiqueta HTML en el TEXTO, muestra <b>...</b> sin hacer que sea negrita. Después de buscar la respuesta, parece que no tengo la palabra de búsqueda correcta ...

¿Cómo hacer una alerta dulce mostrar el texto también con código HTML?

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

Answer 1

A partir de 2018, la respuesta aceptada está desactualizada:

Sweetalert se mantiene y puede resolver el problema de la pregunta original con el uso de la opción de contenido .

Answer 2

Acabo de aplicar el parche de arriba y comienza a funcionar.

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 3

El informe de SweetAlert parece no haber sido actualizado. Hay un montón de solicitudes de extracción sin respuestas, la última solicitud de extracción fusionada fue el 9 de noviembre de 2014.

SweetAlert2 con soporte HTML en modal y algunas otras opciones para la ventana modal de personalización: ancho, relleno, comportamiento del botón Esc, etc.

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

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

Answer 4

Estaba actualizando desde sweetalert antiguo y descubrí cómo hacerlo en la nueva versión ( offrail 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" 
});

Answer 5

Se ha agregado una característica para permitir HTML para los parámetros de título y texto con una fusión reciente en la rama principal en GitHub https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d

Simplemente use la configuración JSON y establezca ''html'' en verdadero, por ejemplo:

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

Esto se fusionó hace menos de una semana y se insinúa en README.md (html se establece en falso en uno de los ejemplos, aunque no se describe explícitamente) sin embargo, aún no está documentado en la página de marketing http://tristanedwards.me/sweetalert

Answer 6

Supongo que </ no se acepta dentro de la cadena.

Intenta escapar de la barra inclinada "/" precediéndola con una barra invertida "/", por ejemplo:

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