sweet-alert 在文本中显示 HTML 代码答案

【问题标题】：sweet-alert display HTML code in textsweet-alert 在文本中显示 HTML 代码
【发布时间】：2014-11-10 07:42:57
【问题描述】：

我正在使用 sweet-alert 插件来显示警报。使用经典配置（默认），一切正常。但是当我想在 TEXT 中添加一个 HTML 标记时，它会显示 ... 而不会加粗。搜索完答案，好像我没有正确的搜索词...

如何让甜蜜的警报也用 HTML 代码显示文本？

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

【问题讨论】：

听起来插件使用text()插入内容，因此HTML被编码。除非可以选择更改此行为，否则您很可能必须找到不同的插件。
感谢您的建议和帮助。我研究了 sweet-alert.js 的代码，在其中发现了这一行： $text.innerHTML = escapeHtml(params.text || '').split("\n").join("
");我删除了更改的 $text.innerHTML。现在它可以工作了： $text.innerHTML = params.text;
如果您所做的只是更改字体，那么您应该使用 CSS 进行更改（例如，更改标题的 h2 类）。我想说不担心 XSS 攻击也是一个错误（请参阅@teamjamieson）。

标签： javascript sweetalert

【解决方案1】：

SweetAlert 存储库似乎无人维护。有一堆 Pull Requests 没有任何回复，最后一个合并的 pull request 是在 2014 年 11 月 9 日。

我创建了SweetAlert2，在模态中支持 HTML，并提供了一些用于自定义模态窗口的其他选项 - 宽度、填充、Esc 按钮行为等。

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

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"&gt;&lt;/script&gt;

【讨论】：

只是提到您在与文件链接相关的代码中存在一些错误。替换为（你可能知道）跨度>
你好@limonte，我看到你的回答，我有一个问题，如何禁用警报，我使用 sweetalert 在 Ajax 请求启动时显示“加载”消息，我使用 jquery (.ajaxStart ) 我需要在 ajax 请求完成时隐藏警报。
向后兼容 sweetalert 吗？
@pinkpanther 主要是，这里是简短的migration guide。
见下面@GavinR 的回答。

【解决方案2】：

最近在 GitHub https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d 上合并到主分支中添加了允许 HTML 用于标题和文本参数的功能

只需使用 JSON 配置并将 'html' 设置为 true，例如：

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

这是在不到一周前合并的，并在 README.md 中有所暗示（其中一个示例中的 html 设置为 false，尽管没有明确描述）但是尚未在营销页面 http://tristanedwards.me/sweetalert

【讨论】：

啊，使用未合并的 requirejs P/R 或 html-ized master。决定，决定。
截至 2017 年，SweetAlert guide 明确表示不再使用 html。请改用content object。认为它可能会对某人有所帮助，因为这个答案有很多赞成票。
Swal 有很多版本，但这个解决方案适用于我的版本 (sweetalert.js.org/guides/#advanced-examples) 谢谢！

【解决方案3】：

我正在从旧的 sweetalert 升级，并发现如何在新版本中进行升级 (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" 
});

【讨论】：

【解决方案4】：

Sweet alerts 也有一个 'html' 选项，将其设置为 true。

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

【讨论】：

对我有用的是将要显示的 HTML 片段分配给 html 属性，而不是将 html 设置为 true。

【解决方案5】：

截至 2018 年，接受的答案已过时：

Sweetalert 得到维护，您可以使用 content 选项解决原始问题的问题。

【讨论】：

这个答案和 SweetAlert 上的文档都同样有用 - 这对于您如何使用“内容选项”来呈现 HTML 字符串并没有多大帮助。此答案与此处的 SweetAlert 文档一致：sweetalert.js.org/guides/#upgrading-from-1x（倒数第 3 个），但都没有向我展示如何呈现 HTML 字符串（不是文本框或滑块，只是具有   标记的字符串）
我同意@Tommy 我只是想拥有一个带有一个参数hello ${world} 的es6 字符串模板，示例很奇怪
文档“string”中的示例没有按我的预期工作。你不能这样说。内容：my es6 string template 我如何解决这个问题： const template = (my es6 string <strong'>${variable});内容：{元素：'p'，属性：{innerHTML：${template}，}，}

【解决方案6】：

我只是为此苦苦挣扎。我从 sweetalert 1 -> 2 升级。这个库：https://sweetalert.js.org/guides/

文档“字符串”中的示例没有按我的预期工作。你不能这样说。

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

我是如何解决的：

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

没有关于如何做到这一点的文档，这是纯粹的反复试验，但至少似乎有效。

【讨论】：

【解决方案7】：

使用 SweetAlert 的 html 设置。

您可以将输出html直接设置为该选项：

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

或者

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

【讨论】：

【解决方案8】：

有甜蜜的警报版本 1 和 2。实际版本 2 适用于 HTML 节点。

我有一个 Sweet Alert 2，其数据表单如下所示：

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

【讨论】：

【解决方案9】：

我知道我的答案可能来得太晚了，但我找到了一个适合我的修复方法。

创建一个对象以保存在您的 html 内容中

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

然后继续创建您的甜蜜警报元素

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

使用 javascript setTimeout 函数将您的 html 附加到甜蜜警报中。我发现将超时设置为 210 效果很好
```
setTimeout(function(){
     $('.sweet-alert p:eq(0)').html(html_element)
},210);
```

你已经做到了！

【讨论】：

【解决方案10】：

您所要做的就是将 html 变量设置为 true。我遇到了同样的问题，我所要做的就是 html : true ，

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

注意： html : "Testno sporocilo za objekt " + hh + "",
可能无法正常工作，因为 html 属性仅用于通过指定 激活此功能SweetAlert 中的 true / false 值。
此html : "Testno sporocilo za objekt " + hh + "", 用于 SweetAlert2

【讨论】：

【解决方案11】：

我刚刚应用了上面的补丁，它开始工作了。

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

【讨论】：

【解决方案12】：

我假设字符串中不接受</。

尝试通过在正斜杠“/”前面加上反斜杠“\”来转义它，例如：

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

【讨论】：

你在发帖之前试过这个吗？...我试过了，但它根本没有用。