如何检查字符串是否包含子字符串并在javascript中为其着色？

Question

我必须创建:

• 1 <input type="text">
• 1 <textarea>
• 1 <div>
• 1 <button>

我必须填写div与textarea的内容,但如果内容中包含input的字符串,我有着色它<span>.

例如:

如果input包含"是"并且textarea包含"这是一个美好的一天",我应该在div "这是一个美好的一天"中添加以下文本并在每次出现"是"字符串时着色.

我应该使用indexOf()和循环.

我有这个:

var a = $("#inp1").val();
var b = $("#txt").val();

var x = b.indexOf(a);
    if (x > -1)

Answer 1

如果你绝对必须使用indexOf

while(b.indexOf(a) != -1) {
   b = b.replace(a, '[X]');
}
while(b.indexOf('[X]') != -1) {
   b = b.replace('[X]', '<span style="color:yellow;">' + a + '</span>');
}
$("#targetDiv").html(b);

您也可以使用 RegExp 来做到这一点

var a = $("#inp1").val();
var b = $("#txt").val();
var re = new RegExp(a, 'g');
var divContent = b.replace(re, '<span style="color:yellow;">' + a + '</span>');
$("#targetDiv").html(divContent);

这是一个关于indexOf的小提琴

http://jsfiddle.net/eva3ttuL/1/