Question

我有一个无法直接更改的HTML代码。

<span class="class1 class2 class3 "> First name*: </span>

我需要在开头或文本处移动*。最终结果应该是：

<span class="class1 class2 class3 "> *First name: </span>

我还需要将*设为红色（我只需为此字符添加一个类）。

有什么想法吗？

Answer 1

如果问题是您提供的非常具体的方案，

$(".class1.class2.class3").each(function() {
   var inner = $(this).html();
   $(this).html("*" + inner.replace("*",""));
}

Answer 2

我建议：

$('span.class1.class2.class3').text(function(i, t){
    /* i is in the index of the current element among those returned,
       t is the text of the current element.
       We return the new text, which is an asterisk, followed by the original text,
       with the asterisk removed (using replace to replace the asterisk with an empty string):
    */
    return '*' + t.replace(/\*/,'');
});

JS Fiddle demo

但是，如果您需要更通用的方法（例如，如果您有多个具有相同/相似选择器的元素）：

// selects all the span elements, and filters:
$('span').filter(function(){
    // discards the elements that *don't* have '*:' in their text:
    return $(this).text().indexOf('*:') > -1;
// iterates over those elements (as above):
}).text(function(i, t) {
    return '*' + t.replace(/\*/,'');
});

JS Fiddle demo

为了“让它变红”，你必须操纵元素的HTML，而不仅仅是文本：

$('span').filter(function(){
    return $(this).text().indexOf('*:') > -1;
// Using 'html()' to set the HTML of the 'span' element:
}).html(function(i, h) {
    // creating a span and prepending to the current element
    return '<span class="required">*</span>' + h.replace(/\*/,'');
});

加上CSS：

.required {
    color: red;
}

JS Fiddle demo

此外，为简单起见，假设您希望使用类名将*作为目标（并将其包装在元素节点中），则可以避免字符串操作，只需{{1} }：

float

使用CSS：

$('span').html(function(i,h){
    // simply wrapping the `*` in a span (using html() again):
    return h.replace(/(\*)/,'<span class="required">*</span>');
});

JS Fiddle demo

参考文献：

Answer 3

var span = $('span.class1.class2.class3');
var new_text = span.text().replace(/\*/, '').replace(/^(\s*)/, '\1<span style="color:red;">*</span>');
span.html(new_text);

Demo

jQuery：如何在字母之前移动字符

3 个答案: