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

Changing the color of the first letter of some text in JavaScript

本文关键字：第一个 颜色 文本 JavaScript      更新时间：2023-09-26

我有以下字符串：">*用户名"。

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

我决定使用适当的 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<9，请填充它。

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

这是一个你可以玩的JSFiddle。

你必须把它包装在一个包含元素中，一个真正基本的例子可能是：

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

js小提琴

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;

js小提琴在这里

仅限 CSS 的方式

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

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

js小提琴在这里

相关文章：