如何使用jQuery为指定字符内出现的所有子字符串着色？
Posted
技术标签:
【中文标题】如何使用jQuery为指定字符内出现的所有子字符串着色？【英文标题】：How to color all the occurrence of substring present inside specified characters using jQuery? 【发布时间】：2020-10-11 07:14:09 【问题描述】：我正在使用循环方法来检测指定字符内出现的所有不同子字符串
[ ] ，我希望所有这些子字符串（从用户输入中检索）都具有红色。但是只有最后一个这样的子串显示红色，并且它之前的所有子串都没有红色！
已编辑：更改sn-p中
input section的文本以检查代码是否正常运行！
看看我到目前为止所做的尝试..
```
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span
color:red;
</style>
</head>
<body style="background:rgba(20,10,30,1);">
<input id="inp" style="height:20vh; width:80vw; background:royalblue; color:white; font-weight:bold;" value="I can [talk] but if you want a punch then I can [fight] too!" />
<p style="color:white; font-weight:bold; text-shadow:.5vw .5vw .5vw black;"></p>
<script>
$(function()
$("#inp").on("input" , function()
var inp1 = $(this).val();
$("p").html(inp1);
var i = 0;
var j = 0;
var str = $("p").text();
var arry = [ ];
for(i = 0; i < str.length; i++)
if(str[i] === "[")
arry.push(i);
for(j = 0; j < str.length; j++)
if(str[j] === "]" && i<j)
arry.push(j);
var newinp = "<span>"+str.slice(i , j+1)+"</span>";
$("p").html(str.slice(0 , i)+newinp+str.slice(parseInt(j)+parseInt(1) , str.length));
);
);
</script>
</body>
</html>【问题讨论】：
我建议的第一件事是对您的缩进进行排序。目前很难阅读。Mitya你现在读起来舒服吗？
缩进还是很严重。不幸的是，我无法回答 - 我只是在做一些缓和。
【参考方案1】：
尝试使用正则表达式而不是嵌套循环
$(function()
$("#inp").on("input" , function()
var inp1 = $(this).val();
$("p").html(inp1);
var str = $("p").text();
var result = str.replace(/(\[(?:[^\[\]]*)*\])/g, function (match)
return match.replace(/(\w+)/g, '<span>$1</span>');
);
$("p").html(result);
);
); <!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span
color:red;
</style>
</head>
<body style="background:rgba(20,10,30,1);">
<input id="inp" style="height:20vh; width:80vw; background:royalblue; color:white; font-weight:bold;" value="I can [talk] but if you want a punch then I can [fight] too!" />
<p style="color:white; font-weight:bold; text-shadow:.5vw .5vw .5vw black;"></p>
</body>
</html>http://www.javascripter.net/faq/regularexpressionsyntax.htm - 您可以在此处阅读有关正则表达式语法的信息。 这里对所用表达式的解释：
( capturing group: store the matching substring
\[ match opening bracket
(?: a non-capturing group: grouping only, no storing
[^\[\]]* match all characters inside brackets
)* end of non-capturing group and * match the preceding element zero or more times
\] match closing bracket
) end of capturing group
【讨论】：
我不熟悉这个表达方式：(/(\[(?:[^\[\]]*)*\])/g你能详细说明或建议一个关于这个的课程，或者链接或博客解释这种表达方式的使用！
@Alfha，为答案添加了解释
谢谢，现在我有新东西要学，再次感谢！以上是关于如何使用jQuery为指定字符内出现的所有子字符串着色？的主要内容，如果未能解决你的问题，请参考以下文章