堆棧內存溢出
  簡體   English   中英

如何檢查字符串是否包含子字符串並在javascript中為其着色？

[英]how to check if a string contains substring and color it in javascript?

 原文  2015-04-22 12:55:05  9   7    javascript/ jquery/ html/ css

問題描述

我必須創建：

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

我必須用textarea的內容填充div ，但是如果內容包含input的字符串，則必須用<span>為其着色。

例如：

如果input包含“ is” ，並且textarea包含“ this is a beautiful day” ， 則每次將“ is”字符串出現時，都應將以下文本放在div “ this is a beautiful day”和顏色中。

我應該使用indexOf()和一個循環。

我有這個： 

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

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

7 個解決方案

解決方案1
 2 已采納  2015-04-22 13:13:18

如果您絕對必須使用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/

解決方案2
 2  2015-04-22 13:18:23

這是查找和更改所有搜索單詞顏色的代碼 

 $(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
 0  2015-04-22 13:14:31

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

演示在這里擺弄

解決方案4
 0  2015-04-22 13:15:41

它可以幫助你的jsfiddle 

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

解決方案5
 0  2015-04-22 13:19:22

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
 0  2015-04-22 13:48:21

試試這個 

 <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
 -1  2015-04-22 13:02:01

您可以使用IndexOf Javascript函數 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在JavaScript中檢查字符串是否包含子字符串 如何檢查一個字符串在JavaScript中是否包含一個substring？ 檢查字符串是否包含JavaScript中的子字符串 如何檢查字符串是否包含JavaScript中的字符串數組中的子字符串 如何在 JavaScript（打字稿）中檢查字符串是否包含 substring？ 如何檢查字符串是否包含特定的子字符串 使用Javascript檢查字符串是否包含HTML中的單詞或子字符串 檢查字符串是否包含子字符串而不使用 indexOf - Javascript 不使用任何標准JavaScript方法檢查字符串是否包含子字符串？ 檢查字符串數組是否包含javascript中給定字符串的子字符串？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM