質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3461閲覧

特定の文字の背景色を変えたい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/02/28 08:01

編集2018/02/28 09:51

html

1<div id="message_contents_search_2250" class="message_contents fs14"> 2<span class="search_word"></span>かさたなはまやらわあかさたなはま 3</div> 4 5<div id="message_contents_search_2249" class="message_contents fs14"> 6<span class="search_word"></span>かさたなはまやらわあかさたなはたまやら 7</div> 8 9<div id="message_contents_search_2248" class="message_contents fs14"><span class="search_word"></span>かさたなはまゆらわあかさた 10</div>

typescript

1for (let search_message_id of message_id_array){ 2 $('#message_contents_search_' + search_message_id).each(function () { 3 var txt = $(this).text(); 4 $(this).html(txt.replace(vue.header.search_box, '<span class="search_word">' + vue.header.search_box + '</span>') 5 ); 6 }); 7 }

特定の文字の背景色を変えるために、特定の文字にだけ<span class="search_word">
を付与したいです。

typescriptの

message_id_array

には2250,2249,2248が入ってます。

vue.header.search_box

には特定の文字(この場合「あ」)が入ってます。
ぼくのやり方だとさい最初の一文字目にしかスタイルがあたらないです。
さらに付与したspanタグには連番のidも付与したいです...

追記

js

1 let i = 0 2 for (let search_message_id of vue.header.search_message_id_array) { 3 $('#message_contents_search_' + search_message_id).each(function () { 4 5 let txt = $(this).text(); 6 $(this).html(txt.replace(new RegExp(vue.header.search_box, "g"), '<span class="search_word" id="sw_' + (i++) + '">' + vue.header.search_box + '</span>')); 7 8 }); 9 }

html

1<div id="message_contents_search_2250" class="message_contents fs14"><span class="search_word" id="sw_0"></span>かさたなはまやらわ<span class="search_word" id="sw_0"></span>かさたなはま</div>

追記

js

1$('.search_word').each(function (i) { 2 $(this).attr('id', 'sw_' + (i)); 3 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

↓ここが参考になりそうです。

replaceに変数を使ってグローバルマッチさせる2つの方法 - Qiita

また連番のidは例えば以下のような感じにすればいいと思います。

- .each(function () {.each(function (i) {
- '<span class="search_word">''<span class="search_word" id="sw_' + i + '">'

js

1$(this).html(txt.replace(vue.header.search_box, '<span class="search_word">' + vue.header.search_box + '</span>')

↑これを、以下↓のように変更してみるといいと思います。

js

1$(this).html(txt.replace(vue.header.search_box, function(){ 2 return '<span class="search_word" id="sw_' + (i++) + '">' + vue.header.search_box + '</span>'; 3})

i.each()よりも外のスコープでvar i = 0;みたいに宣言してください。m(_ _)m

投稿2018/02/28 08:32

編集2018/02/28 09:24
namnium1125

総合スコア2043

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/28 08:38

で!き!ま!し!た! ありがとうございます。 ただ、後、各spanタグに異なるidを付与したいです...
namnium1125

2018/02/28 08:40

丁度今追記しました。(追記最中にコメントが来ていて、今読んだところです。)
退会済みユーザー

退会済みユーザー

2018/02/28 08:44

わあ!!!急かしてしまってすみません(>___<)ありがとうございます、試します!(>_<)
退会済みユーザー

退会済みユーザー

2018/02/28 08:52

すみません、これインクリメントとかどの辺でやればいんでしょうか... 全部0になってしまって(T_T)
namnium1125

2018/02/28 09:13 編集

『自動的にインデントされるはずですが…? http://js.studio-kingdom.com/jquery/traversing/each ちょっとコードを見てみないとなんとも言えないですね…』 ↑ごめんなさい私自身の誤りに気づきました。上記は無視してください。修正しますので少々お時間くださると幸いです。m(_ _)m
退会済みユーザー

退会済みユーザー

2018/02/28 09:16

わあ、すみません ありがとうございます...
namnium1125

2018/02/28 09:24

修正しました。よろしくお願いします。m(_ _)m
退会済みユーザー

退会済みユーザー

2018/02/28 09:38

すみません、コード追加しました。同じ階層にあるspanは同じidが付与されてしまいます...(T_T)
退会済みユーザー

退会済みユーザー

2018/02/28 09:39

同じ階層にある"あ"は同時にspanタグが与えられるから、連番のidを付与するのは難しいんですかね...
退会済みユーザー

退会済みユーザー

2018/02/28 09:52

別処理にしたらできました...(>___<) 本当にありがとうございました
namnium1125

2018/02/28 12:40 編集

> すみません、コード追加しました。同じ階層にあるspanは同じidが付与されてしまいます...(T_T) そうでしたか…また間違いを書いてしまったようですみません…m(_ _)m 質問者様の書いた通り横着せずに分けるべきでしたね。 私にとっても勉強になりました。こちらこそありがとうございましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問