2018年如何使用sweetalert将文本设置为粗体？

Question

我看到你可以使用内容选项，但我不太确定现在该怎么做，我有这样的东西：

swal({title: 'hello', text: 'hello ${<strong>{name}</strong>}', icon: 'success' })

Answer 1

从 GitHub Issues 中，您应该设置内容并在其中插入文本：

var name = "Stack Overflow";
var content = document.createElement('div');
    content.innerHTML = 'Hello <strong>'+ name +'</strong>';

    swal({
        title: 'Hello',
        content: content,
        icon: "success",
    })

Answer 2

或者，您可以使用 SweetAlert2 - 原始 SweetAlert 支持的分支：

Swal.fire({
  html: 'Overengineering is <strong>a bad thing</strong>'
})

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

PS。请注意，SweetAlert2 与 SweetAlert 略有不同，请查看简单的迁移指南：https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2

Answer 3

如果您想在 SweetAlert 中将文本设置为粗体，您可以使用 HTML 标签。 2018年，这很简单。只需使用 SweetAlert 中 html 参数内的标签即可。

SweetAlert 示例：

swal({
  title: "Bold Text Example",
  html: "<strong>This text is bold in SweetAlert</strong>",
  type: "info"
});

在此示例中，html 选项允许您使用标签将文本设为粗体。

粗体文本生成器： 您还可以使用粗体文本生成器。该工具可将普通文本转换为粗体 Unicode 文本，您可以将其复制并粘贴到 SweetAlert 或任何其他文本字段中，而无需 HTML 标签。

这两种方法都是真实的。一种使用 HTML 标签，另一种使用 Unicode 字符。