javascript - Javascript - 按钮的粗体部分

Question

有没有办法在javascript中只加粗按钮的一部分？我的程序使用 javascript 生成按钮，这些按钮的值包含用户搜索的关键字。我想加粗按钮中的关键字而不加粗任何其他单词。我在整个互联网上搜索了一个解决方案，但找不到一个。我知道如何加粗整个按钮中的文本，但我不知道如何只加粗按钮中的关键字。提前感谢您的帮助！

Answer 1

不要使用输入元素，而是使用按钮元素：
适用于所有现代浏览器。
作为按钮的子节点，您可以使用任何 html，甚至是图像！

<button name="buttonName">hello <b>baby</b></button>  

请注意，按钮不会自动提交表单。您必须像这样将表单的提交处理程序附加到按钮（假设它是文档中的第一个表单）：

<button name="buttonName" onclick="document.forms[0].submit();">hello <b>baby</b></button>

Answer 2

由于您的关键字是动态的，我可以建议使用 JS 来专门突出显示按钮元素中的关键字吗？在我的示例中，我选择使用 jQuery。假设您想在下面的按钮中突出显示一个关键字，例如“fox”：

<button>The quick brown fox jumps over the lazy dog</button>

我们可以用：

$(function() {
        // The keyword can be determined by user input or by other means
        var keyword = "fox",
            re = new RegExp(keyword, "gi");
        $("button").html($("button").html().replace(re, "<span>"+keyword+"</span>"));
});

<span>上面的函数将用元素包装关键字。假设我们要将关键字的权重设置为粗体：

button span {
    font-weight: bold;
}

这是一个小提琴：http: //jsfiddle.net/teddyrised/HuDKq/