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

我必须创建:

1 <input type="text">

1 <textarea>

1 <div>

1 <button>

我必须用div的内容填充textarea，但是如果内容包含input的字符串，则必须用<span>对其进行着色。

例如:

如果input包含“is”，而textarea包含“这是美好的一天”，则每次在“is”字符串出现时，我都应在div“这是美好的一天”中添加以下文本并上色。

我应该使用indexOf()和一个循环。

我有这个:

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

var x = b.indexOf(a);
    if (x > -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/