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

【问题标题】：how to check if a string contains substring and color it in javascript?如何检查字符串是否包含子字符串并在javascript中为它着色？
【发布时间】：2015-04-22 21:48:21
【问题描述】：

我必须创造：

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

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

例如：

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

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

我有这个：

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

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

【问题讨论】：

div、按钮、文本区域和输入在哪里？
您现在知道b 在a 中的位置。您可以拆分您的字符串并重新创建它，您的 b 包裹在一个样式化的跨度中。 w3schools.com/jsref/jsref_substring.asp
颜色什么？匹配的单词或所有文本。
@rikpg 你需要它做什么？
家庭作业可能很难，嗯？ ://

标签： javascript jquery html css

【解决方案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/

【讨论】：

你能解释一下 ['x'] 指的是什么吗？
它只是一个占位符，因为您想使用indexOf。因为我在 span 元素中用相同的字符串替换了一个字符串；这将是一个无限循环:)
如果我用 span 元素中的相同字符串替换字符串（.replace(a, '' + a + ''） . 为什么会是无限循环？
因为indexOf 会再次找到a 字符串，因为你又把它放在那里了:)

【解决方案2】：

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

$(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>

【讨论】：

【解决方案3】：

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

演示小提琴here

【讨论】：

这可能很好，但请注意，如果我在输入中写：“ab”和在文本区域中写：“deabchab”，只有第一个“ab”是突出显示的。每次出现“ab”时，我都必须突出显示
@moral17592 我没有注意到这一点。谢谢:)

【解决方案4】：

它可以帮助你jsfiddle

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

【讨论】：

显然，海报应该使用indexOf()。此外，这只会突出显示$('.input').val() 的第一个实例。

【解决方案5】：

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

【讨论】：

【解决方案6】：

试试这个

<html>
  <title></title>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
   var a = "is";
   var b = "this is beautiful";
    
    var x = b.indexOf(a);
    
     if (x > -1) {
      var re = new RegExp(a, 'g');
      res = b.replace(re, "<span style='color:red'>"+a+"</span>" );
      $("#result").html(res);
     }
  })
 
 </script>
    </head>
<body>
<div id="result"></div>
</body>

【讨论】：

【解决方案7】：

您可以使用 IndexOf Javascript 函数

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

【讨论】：

敢面对然后在这里评论.....不解释你无权这样做.....