Question

我有以下标签元素，我希望星号为红色。

<label> Lastname * </label>

如何使用jQuery或其他方式完成？

Answer 1

var label = document.getElementById('labelId');
label.innerHTML = label.innerHTML.replace('*', '<span style="color:red;">*</span>');

不需要汇编（也称为jQuery）： - ）

Answer 2

如果你想要

，可以使用jQuery

$('#labelId').html( $('#labelId').text().replace('*', '<span style="color:red;">*</span>') );

Answer 3

如果您可以更改文字，CSS可能是更好的选择：http://jsfiddle.net/VwLQM/。

label:after {
    color: red;
    content: "*";
}

然后<label>test</label>会自动在其后面显示红色*。

:after执行not fully work on IE8，因此这可能是一件重要的事情。

Answer 4

虽然这可能有点复杂，但它确实给你一点摆动空间来标记元素中的红色星号，而不仅仅是文本内部的文字，并且可能会减少你在不同浏览器中的麻烦。

http://jsfiddle.net/QjJmT/

$(function(){

    var elements = $('label');
    var markup_element = $('<span class="red">*</span>');

    elements.each(function(){

        //wrap the element in a jquery object and get it's text string
            var element = $(this);    
            var element_text = element.text();

        //use regex to use the * as a delimeter
            var other_parts = element_text.split(/\*/);

        //empty the element re-add each part programmatically
            element.empty();
            for( var i = 0; i < other_parts.length; i++ ){
                element.append( other_parts[i] );
                if( i != other_parts.length - 1 ){
                    element.append( markup_element );
                }
            }

    });

});

希望有所帮助！

着色标签中的子字符串

4 个答案: