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

Question

我必须创建:

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

我必须填写 div与 textarea的内容，但如果内容包含 input的字符串，我必须用 <span> 给它上色.

例如:

如果input包含"is" 和textarea包含“这是美好的一天”，我应该将以下文本放入div “这是美好的一天” 并在每次出现 “is” 字符串时涂上颜色。

我应该使用 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 的 fiddle

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