我希望将字符串的特定部分包含在特殊字符中（例如[])，以更改其颜色。
我想通过从中检索字符串来实现这一点
我能够成功地检索字符串（存在于[]中），但是我无法更改字符串的特定部分的颜色。 以下是我到目前为止所做的尝试
null
```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<style>
body{
background:rgba(20,30,20,0.99);
}
div{
color:orange;
}
</style>
</head>
<body>
<input type="text" style="height:100px; width:250px; overflow:auto;" id="inp" placeholder="for example type: this is [great] book john" />
<p style="color:white;" id="dis"></p>
<div></div>
<script>
$(function (){
$("#inp").on("input" , function(){
var inpt = $(this).val();
$("#dis").html(inpt);
var det1 = inpt.indexOf("[");
var det2 = inpt.indexOf("]");
var rpl = inpt.slice(det1 , parseInt(det2)+parseInt(1));
var ptxt = $("#dis").text();
if(det1 != -1 && det2 != -1){
var lgnt = ptxt.length;
var pslic = ptxt.slice(det1 , parseInt(det2)+parseInt(1));
pslic.fontcolor("skyblue");
ptxt.replace(ptxt.slice(0 , det1)+pslic+ptxt.slice(parseInt(det2)+parseInt(1) , lgnt));
$("div").html(">>> "+pslic+"<<< <br> replacement executed successfully, check if color of "+pslic+" inside the white line is modified?");
}
});
});
</script>
</body>
</html>null
您可以从PSLIC中获取最后一个字符的索引，即:]，然后我们将使用该索引在[之后的字符串开始处添加标记，并在]结尾之前添加结束，然后使用CSS为文本应用所需的颜色。
演示代码:
null
$(function() {
$("#inp").on("input", function() {
var inpt = $(this).val();
$("#dis").html(inpt);
var det1 = inpt.indexOf("[");
var det2 = inpt.indexOf("]");
var rpl = inpt.slice(det1, parseInt(det2) + parseInt(1));
var ptxt = $("#dis").text();
if (det1 != -1 && det2 != -1) {
var lgnt = ptxt.length;
var pslic = ptxt.slice(det1, parseInt(det2) + parseInt(1));
//getting lst index of lst elemnt
var end = pslic.indexOf("]");
//leaving first char i.e : "[" ->add <span> "text" </span>-> "]"
var new_datas = pslic.substring(0, 1) + "<span>" + pslic.substring(1, end) + "</span>" + pslic.substring(end, pslic.length);
ptxt.replace(ptxt.slice(0, det1) + pslic + ptxt.slice(parseInt(det2) + parseInt(1), lgnt));
//adding new_dats to div
$("div").html(">>> " + new_datas + "<<< <br> replacement executed successfully, check if color of " + new_datas + " inside the white line is modified?");
}
});
});span {
color: skyblue;
}
body {
background: rgba(20, 30, 20, 0.99);
}
div {
color: orange;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<input type="text" style="height:100px; width:250px; overflow:auto;" id="inp" placeholder="for example type: this is [great] book john" />
<p style="color:white;" id="dis"></p>
<div></div>
</body>
</html>
使用contains（）选择器。
$(":contains('"+pslic+"')").css('color','skyblue');
如果是工作就告诉我。 如果在同一页上有相似的文本，它们都会受到影响。
