如何检查一个字符串是否包含子字符串并在javascript中对其进行着色？

我必须创建：

1 <input type="text">

1 <textarea>

1 <div>

1 <button>

我必须用textarea的内容填充div ，但如果内容包含input的字符串，则必须使用<span>为它着色。

例如：

如果input包含“is”，并且textarea包含“这是美好的一天”，我应该在div显示以下文本“这是美好的一天”，并在每次显示“is”字符串时都显示颜色。

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

---

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

$(document).ready(function () {
    $("#here").on("keydown keyup", function () {
        var mytext = $(this).val();
        var find = $("#find").val();
        mytext=mytext.replace(new RegExp(find,"g"), "<span class='me'>"+find+"</span>");
        $("#output").html(mytext);

    });
})

  .me{color: #00f;
  background-color: #EFFF00;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="find" type="text" /><br/>
<textarea id="here"></textarea><br/>
<div id="output"></div>

---

使用JavaScript substring分割textarea内的字符串，并使用突出显示的文本形成一个paragraph 。

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>

突出显示的CSS：

.highlight{
    background-color:yellow;
}

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);
});

演示小提琴在这里

链接地址: http://www.djcxy.com/p/25741.html

上一篇: how to check if a string contains substring and color it in javascript?

下一篇: jQuery UI dropzone wrong offset inside scrolled iframe