JavaScript内で文字色を変更して結果を返したいです

Question

JavaScript上で文字色を変更して結果を返すにはどのように記述すれば良いのでしょうか

具体的には以下のようなことをしたいです

～～～
testMethod({
template : "テスト"
})
～～～

結果のテンプレートである「テスト」のテの部分だけ文字色を変更したいです。
イメージとしては
templaete : <style=color:"red">"テ"</style> + "スト"
のような感じなのですが、、、

どのように記述したらよろしいのでしょうか。

Comments

[yamato_hikawa]

「テンプレートに書かれた文字列の、最初の一文字の文字色を変更する」と言う理解で問題無いですか？
文字色も自由に指定できるのなら、引数として色も指定する必要がありますが、赤で固定ですか？

[yadrop]

最初の文字ではなく文字の一部分を変更したいです。
上ではテの部分でしたが、厳密に言うと途中の文字列を変更したいので
この場合だと　ス　の部分です。

文字色は変更箇所は赤(#da0024)を、その他は黒(#333)を指定したいです。

[yamato_hikawa]

「途中の文字列」をもう少し具体的に教えて下さい。
・1文字だけですか？
・「◯文字目から●文字目まで」と指定できるようにしたいですか？
・テンプレートで渡された文字列の文字数から計算して、中央の1文字（あるいは数文字）を変換するようにしますか？

[yadrop]

template: ”検索結果○件”
ここの○に入る数字を赤色に、他を黒にしたいです。(数字は1~4桁程度)

Answer 1

文字列を渡して特定部分を変えるより、HTML上で変更したい箇所に特定のクラスをつけてタグで囲っておいた方が、処理としては簡単になります。

<p>検索結果<span class="search-result-num">999</span>件</p>

// 色を変更する関数の定義
var changeColor = function(){
  // search-result-num のクラス名を持つ要素を取得
  var resultNum = document.querySelector('.search-result-num'); 
  
  // 色変更
  resultNum.style.color = '#da0024';
}

// 実行
changeColor();

これでいいのであれば、そもそもCSSに数字用の色設定をしておけばいいだけではありますが…。

Comments

[yadrop]

ありがとうございます！

初期表示ではHTMLとCSSを設定して
<span>検索結果<span>○</span>件</span>
としているのですが、検索処理後の表示が上記のようなtemplateがそのまま返ってきてしまっている状態なのです...
そしてその原因を追究できていない為、templateで返却しているJSファイルのほうで色を変更できればと思っていたのですが、、やはり原因を探してHTMLで設定したほうがいいのですかね。。

[yamato_hikawa]

返却された文字列ですが、ソース上では<>の部分が文字列に置き換えた形になっていると思います（devツール等で確認してください）
<span>○</span> → &lt;span&gt;○&lt;/span&gt;
でないと、タグの文字列が直接表示されることはないので。
となると、結果の返却中にタグ文字列のエスケープがされているのではないかと思いますが、いかがでしょうか。