javascript - 在 JavaScript 中更改某些文本的第一个字母的颜色

Question

我有以下字符串："*Username"。

有没有办法在保持 “用户名”部分不变的同时改变星号的颜色？

Answer 1

我决定使用适当的 DOM 方法来写一个答案，它不是最短的，但我不使用正则表达式或字符串连接和操作。

该算法非常简单。

• 您必须选择包含要突出显示的文本的所有元素。
• 创建一个突出显示的星号。
• 用第一个字符是星号的新内容替换旧内容。

这是 JavaScript 部分。

// Create the span containing the highlighted asterisk
var asterisk = document.createElement('span');
asterisk.className = 'highlight';
asterisk.appendChild(document.createTextNode('*'));


/*
 * users is a NodeList in my case.
 * Walk the users (teehee) and check if the first characer is an asterisk
 */
for (var i = 0; i < users.length; ++i) {
    var user = users[i];
    var text = user.textContent;

    if (text.charAt(0) == '*') {
        user.removeChild(user.firstChild);
        user.appendChild(asterisk);
        user.appendChild(document.createTextNode(text.slice(1)));
    }
}

^{注意：我知道 using 的含义 .textContent，如果您想支持 IE<9，请对其进行填充。}

您还需要一个 CSS 类来定义突出显示的星号跨度的外观。

这是一个您可以使用的JSFiddle 。

Answer 2

您必须将其包装在包含元素中，一个非常基本的示例可能是：

var str = '*Username';
str = str.replace(/^\*(.*)/, '<span style="color:red">*</span>$1');

jsFiddle

Answer 3

JavaScript 方式

您可以使用.charAt()and.slice()方法重新着色第一个字符（无论第一个字符是什么，也不管有多少个星号）：

var oldString = document.getElementById('element').innerHTML;
var newString = "<span style='color:red'>"
    + oldString.charAt(0)
    + "</span>"
    + "<span style='color:white'>"
    + oldString.slice(1)
    + "</span>";
document.getElementById('element').innerHTML = newString;

jsFiddle在这里

---

只有 CSS 的方式

如果您不想使用 JavaScript 或者 JavaScript 方式对您来说似乎很长，那么根本不需要 JavaScript。但是，此方法要求星号 ( *) 未写入 HTML 标记中。以下代码将在所有内容之前添加一个红色星号class='required'

.required:before
{
    color: red;
    content: "* ";
}

jsFiddle在这里