Question

我必须创建：

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

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

例如：

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

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

的小提琴

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

Answer 2

使用JavaScript substring将字符串拆分为textarea，并使用突出显示的文本形成paragraph。

HTML code：

<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

Answer 3

它可以帮助您jsfiddle

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

Answer 4

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

Answer 5

试试这个

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

Answer 6

您可以使用 IndexOf Javascript功能

mdx

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

6 个答案: