Стиль определенного символа в строке

Question

Я хочу стилизовать определенный символ в строке через jQuery, но понятия не имею, как к этому подойти. У меня следующая ситуация

<code><a href="" accesskey="i">Link</a>

Теперь я хочу подчеркнуть символ в accesskey (в данном случае 'i' ) в интерактивной ссылке. Таким образом, 'i' в 'Link' должно быть подчеркнуто

Кто-нибудь знает как?

Answer 1

Мой собственный подход будет следующим:

$('a[accesskey]').each( //selects only those a elements with an accesskey attribute
    function(){
        var aKey = $(this).attr('accesskey'); // finds the accesskey value of the current a
        var text = $(this).text(); // finds the text of the current a
        var newHTML = text.replace(aKey,'<span class="access">' + aKey + '</span>');
        // creates the new html having wrapped the accesskey character with a span
        $(this).html(newHTML); // sets the new html of the current link with the above newHTML variable
    });

Демонстрация JS Fiddle .

Ссылки:

• has-селектор атрибутов .
• attr().
• replace()
• html()

Answer 2

Я заменил «i» на динамический диапазон:

var jq = $('a');
var text = jq.text().replace(jq.attr('accessKey'), '<span style="text-decoration: underline;">i</span>');
jq.html(text);

http://jsfiddle.net/FishBasketGordo/QGEzA/

Answer 3

Есть плагин под названием «Подсветка», который будет подсвечивать биты текста на основе строки поиска. Плагин здесь .

Инструкции по использованию см. В этой статье .(Я написал для Smashing некоторое время назад)

Answer 4

Если это только для этого случая, я бы сделал это в HTML, а не в JQuery:

<a href="" accesskey="i" style="text-decoration:none">L<u>i</u>nk</a>

Примечание: «text-художественное оформление: нет» необходимо для удаления подчеркивания по умолчанию дляссылки, хотя вы, вероятно, должны установить это в CSS.

Здесь скрипка для этого метода.

Если вы все еще хотите сделать это с JQuery, вы можете просто изменить стиль ссылки и внутренний html на вышеуказанный.