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

Question

我有以下字符串：＆＃34; *用户名＆＃34; 。

有没有办法在保持＆＃34;用户名＆＃34; 部分的同时改变星号的颜色？

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)));
    }
}

^{注意：我知道使用 .textContent 的含义，如果你想支持IE＆lt; 9请填充它。 < / SUP>}

您还需要一个CSS类来定义突出显示的星号范围的样子。

以下是您可以使用的JSFiddle。

Answer 2

你必须将它包装在一个包含元素中，一个非常基本的例子可能是：

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

jsFiddle

Answer 3

JavaScript方式

您可以使用 .charAt() 和 .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 here

---

仅限CSS的方式

如果您不想使用JavaScript或JavaScript方式似乎很长，那么根本不需要JavaScript。但是，此方法要求不在HTML标记中写入星号（*）。以下代码将在class='required'

的所有内容之前添加红色星号

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

jsFiddle here