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 в моем примере. Допустим, вы хотите, чтобы выделить ключевое слово, например, «лиса» в кнопке ниже:

<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/