Javascript -按钮的粗体部分

Question

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

Answer 1

不使用input元素，而使用button元素：

适用于所有现代浏览器。

作为按钮的子节点，你可以使用任何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来特别突出显示button元素中的关键字？在我的示例中，我选择使用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/