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

^{注: を使用することの意味を認識してい .textContentます。IE<9 をサポートしたい場合は、shim してください。}

ハイライトされたアスタリスク スパンがどのように見えるかを定義する CSS クラスも必要です。

これは、遊んでみることができるJSFiddleです。

Answer 2

それを含む要素でラップする必要があります。本当に基本的な例は次のようになります。

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

jsフィドル

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

---

CSSのみの方法

JavaScript を使用したくない場合、または JavaScript の方法が長いと思われる場合は、JavaScript はまったく必要ありません。ただし、この方法*では、HTML マークアップにアスタリスク ( ) が記述されていない必要があります。次のコードは、すべての前に赤いアスタリスクを追加しますclass='required'

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

ここでjsFiddle