我正在使用sweet-alert插件来显示警报。使用经典配置（默认值），一切正常。但是，当我想在TEXT中添加HTML标记时，它会显示<b>...</b>而不会使其变为粗体。在搜索答案后，看起来我没有正确的搜索词......
如何使用HTML代码使甜蜜警报显示文本？
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
text: "Testno sporocilo za objekt " + hh + "",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
答案 0 :(得分：150)
SweetAlert回购似乎没有得到维护。有一堆Pull Requests没有任何回复，最后合并的拉取请求是在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>",
});<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
答案 1 :(得分：54)
添加了标题和文本参数HTML的功能，最近合并到GitHub上的主分支https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d
只需使用JSON配置并将'html'设置为true，例如：
swal({ html:true, title:'<i>TITLE</i>', text:'<b>TEXT</b>'});
这是在不到一周前合并的，并在README.md中暗示（虽然未明确描述，但其中一个示例中的html设置为false）但是营销页面上尚未记录{{3} }
答案 2 :(得分：20)
我正在从旧的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"
});
答案 3 :(得分：6)
截至2018年，接受的答案已过时：
维护Sweetalert，您可以使用content选项解决原始问题。
答案 4 :(得分：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.
答案 5 :(得分：3)
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"
});
答案 6 :(得分：0)
使用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"
});
答案 7 :(得分：0)
有不错的Alert版本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;
}
答案 8 :(得分：0)
所有您需要做的就是将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 porperty仅用于通过分配激活此功能 Sweetalert 中的 true / false 值。
此html : "Testno sporocilo za objekt " + hh + "",用于 SweetAlert2 < / strong>
答案 9 :(得分：0)
我知道我的回答可能为时已晚，但我找到了适合我的解决方法。
var html_element = '<p><code>This</code> is an error</p>';
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 :(得分：-3)
我刚应用上面的补丁并开始工作。
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);
}
答案 11 :(得分：-9)
我假设字符串中不接受</。
试图逃避正斜杠＆＃34; /＆＃34;在它前面加上反斜杠＆＃34; \＆＃34;例如：
var hh = "<b>test<\/b>";