Javascript 甜蜜警报在文本中显示 HTML 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26838965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
sweet-alert display HTML code in text
提问by Peter
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...
我正在使用 sweet-alert 插件来显示警报。使用经典配置（默认值），一切正常。但是当我想在 TEXT 中添加一个 HTML 标签时，它会显示<b>...</b>而不加粗。搜索答案后，好像我没有正确的搜索词...
How to make sweet alert display the text also with HTML code?
如何使甜蜜警报也用 HTML 代码显示文本？
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
text: "Testno sporocilo za objekt " + hh + "",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
回答by Limon Monte
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.
SweetAlert 存储库似乎没有维护。有一堆拉请求没有任何回复，最后一次合并拉请求是在 2014 年 11 月 9 日。
I created SweetAlert2with HTML support in modal and some other options for customization modal window - width, padding, Esc button behavior, etc.
我创建了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@9"></script>回答by jitmo
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
添加了允许 HTML 用于标题和文本参数的功能，最近合并到 GitHub https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d
Simply use JSON configuration and set 'html' to true, eg:
只需使用 JSON 配置并将 'html' 设置为 true，例如：
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
这是在不到一周前合并的，并在 README.md 中暗示（在其中一个示例中将 html 设置为 false，尽管没有明确描述）但是它尚未在营销页面http://tristanedwards.me 上记录/甜甜的
回答by Vyctorya
I was upgrading from old sweetalert and found out how to do it in the new Version (official Docs):
我正在从旧的 Sweetalert 升级，并在新版本（官方文档）中找到了如何进行升级：
// 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"
});
回答by GavinR
回答by Shnigi
I just struggled with this. I upgraded from sweetalert 1 -> 2. This library: https://sweetalert.js.org/guides/
我只是为此而挣扎。我从sweetalert 1 -> 2 升级。这个库：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.
没有如何做到这一点的文档，这纯粹是反复试验，但至少似乎有效。
回答by Michael McHaney
Sweet alerts also has an 'html' option, set it to true.
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"
});
回答by Silvio Delgado
Use SweetAlert's htmlsetting.
使用 SweetAlert 的html设置。
You can set output html direct to this option:
您可以将输出 html 直接设置为此选项：
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"
});
回答by Bruno Soares
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);
}回答by Grammar Ninja
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>";
