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

我必须创造：

• 1

• 1

• 1

• 1

我必须用

文本区域

的内容填充

div

，但是如果内容包含

输入

的字符串，我必须用

给它上色

例如：

如果

输入

包含“是”，而

文本区域

包含“这是一个美好的日子”，我应该将以下文本放入

div

“这是一个美好的日子”中，并在每次出现“是”字符串时使用颜色

我应该使用

indexOf（）

和一个循环

我有这个：

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

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

---

您可以使用IndexOfJavascript函数

var str1 = "ABCDEFGHIJK";
var str2 = "DEFG";
if(str1.indexOf(str2) != -1){
    alert(str2 + " found");
}

---

如果你一定要使用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);

while（b.indexOf（a）！=-1）{
b=b.替换（a，“[X]”）；
}
而（b.indexOf（'[X]'）！=-1）{
b=b.替换（“[X]”，“+a+”）；
}
$（“#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);

var a=$（“#inp1”）.val（）；
var b=$（“#txt”）.val（）；
var re=新的RegExp（a，'g'）；
var divContent=b.替换（re，+a+）；
$（“#targetDiv”）.html（divContent）；

这是一把小提琴的索引

---

使用JavaScript

子字符串

分割文本区域内的字符串，并用突出显示的文本形成一个

段落

HTML代码：

<input id="inp1" type="text"/><br>
<textarea id="txt" col="10" row="5"></textarea><br>
<div id="fillarea">
    click on check
</div>
<button id="check">check</button>

jQuery代码：

$('#check').on('click',function(){
    var a = $("#inp1").val();
    var b = $("#txt").val();
    var x = b.indexOf(a);
    var first = b.substring(0,x);
    var middle = b.substring(x,x+a.length);
    var last = b.substring(x+a.length,b.length);
    var to_print = '<p>' + first + '<span class="highlight">' + middle + '</span> ' + last + '</p>';
    $('#fillarea').empty();
    $('#fillarea').append(to_print);
});

$（'check'）。在（'click'，function（）上{
var a=$（“#inp1”）.val（）；
var b=$（“#txt”）.val（）；
var x=b.indexOf（a）；
var first=b.子串（0，x）；
var middle=b.子串（x，x+a.长度）；
var last=b.子串（x+a.长度，b.长度）；
变量to_print=''+first+'+middle+'+last+'
'；
$（'#fillarea'）.empty（）；
$（“#fillarea”）。追加（打印到）；
});

演示小提琴

它可以帮助您

$（'.submit'）。单击（函数（）{
var content=$（'.textarea'）.val（）；
var ans=content.replace（$（'.input'）.val（），“”+$（'.input'）.val（）+“”）；
$（'.text'）.html（ans）；
});

以下是查找和更改所有搜索单词颜色的代码

$（文档）.ready（函数（）{
$（“#此处”）。在（“按键向下键向上”，函数（）{
var mytext=$（this.val（）；
var find=$（“#find”）.val（）；
mytext=mytext.replace（新的RegExp（find，“g”），“”+find+“”）；
$（“#输出”）.html（mytext）；
});
})

.me{color:#00f；
背景色：#EFFF00；
}

var input=$（“#inp1”）.val（）；
var text=$（“#txt”）.val（）；
var div=$（“#div”）；
div.val（text.replace（新的RegExp（输入，'g'），makeSpan（输入））；
函数makeSpan（str）{
返回“+str+”；
}

试试这个

$（文档）.ready（函数（）{
var a=“is”；
var b=“这很漂亮”；
var x=b.indexOf（a）；
如果（x>-1）{
var re=新的RegExp（a，'g'）；
res=b.替换（re，“+a+”）；
$（“#结果”）.html（res）；
}
})

div、按钮、文本区和输入在哪里？您现在知道

a

中

b

的位置。您可以拆分字符串并重新创建它，将

b

包装在一个已设置样式的范围内。什么颜色？匹配的单词或所有文本。@rikpg你需要它做什么？家庭作业可能很难，嗯？：/敢于面对，然后在这里发表评论……不作解释，你无权这样做……显然，海报应该使用

indexOf（）

。另外，这只突出显示了

$（'.input'）.val（）的第一个实例。

。这可能很好，但请注意，如果我在输入中写入“ab”并在文本区域中写入“deabchab”，则只有第一个“ab”被突出显示。每次我都要强调“ab”appears@moral17592我没注意到。谢谢：）你能解释一下['x']指的是什么吗？它只是一个占位符，因为你想使用

indexOf

。因为我正在用span元素中的相同字符串替换字符串；如果我用span元素中的相同字符串替换字符串（.replace（a，“+a+”）。它为什么会是一个无限循环？因为

indexOf

会再次找到

a

字符串，因为你又把它放进去了：）

$('#check').on('click',function(){
    var a = $("#inp1").val();
    var b = $("#txt").val();
    var x = b.indexOf(a);
    var first = b.substring(0,x);
    var middle = b.substring(x,x+a.length);
    var last = b.substring(x+a.length,b.length);
    var to_print = '<p>' + first + '<span class="highlight">' + middle + '</span> ' + last + '</p>';
    $('#fillarea').empty();
    $('#fillarea').append(to_print);
});

$('.submit').click(function(){
    var content = $('.textarea').val();
    var ans = content.replace($('.input').val(), "<span style='color:red;'>"+$('.input').val()+"</span>");
    $('.text').html(ans);
});

var input = $("#inp1").val();
var text = $("#txt").val();
var div = $("#div");

div.val(text.replace(new RegExp(input,'g'), makeSpan(input)));

function makeSpan(str) {
  return '<span style="background-color:red">' + str + '</span>';
}