Question

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

Answer 1

而不是使用input元素，使用按钮元素：
适用于所有现代浏览器。
作为按钮的子节点，您可以使用任何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/

Javascript - Bolding部分按钮

2 个答案: