Javascript - 按钮的粗体部分

Javascript - Bolding part of buttons

本文关键字：体部 按钮 Javascript      更新时间：2023-09-26

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

由于您的关键字是动态的，我可以建议使用 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/

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

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

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

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