Javascript: str-替换特殊字符

Question

我有一些脚本可以在您输入某些特殊字符时为字母或数字生成不同的颜色。示例：^1 = 红色 ^2 = 绿色 ^3 = 黄色

当我输入例如 ^1name 时它正在工作。然后名字就红了。问题是当我输入数字时。例如“^1na3me”。然后我得到 "na" 红色和 "me" 黄色。但它应该是 "na3me" 只有红色。当数字前面带有 ^ 输入时，它应该只采用颜色。有人知道为什么会这样吗？

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".word").keyup(function()
{
var word=$(this).val();
$(".word_preview").html(word);
return false;
});
});
</script>
<script>

function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace(/[^]0/g, '<span style="color:black">').replace(/[^]1/g, '<span style="color:red">').replace(/[^]2/g, '<span style="color:green">').replace(/[^]3/g, '<span style="color:yellow">').replace(/[^]4/g, '<span style="color:blue">').replace(/[^]5/g, '<span style="color:cyan">').replace(/[^]6/g, '<span style="color:#D02090">').replace(/[^]7/g, '<span style="color:white">');
    document.getElementById("demo").innerHTML = res;
};
</script>
</head>
<body>
Enter name:
         <br/>
         <input type="text" name="maprotation" size="50" id="textfield"  class="word" class="Stil69">
         <input type="reset" name="Submit3" value="Reset" />
          <br/><br/>
         <h3>2. Click the button to preview your colored name.</h3>
         <br/>
         <input type="button" onclick="myFunction()" value="Click here"/>
         <br/><br/>
         <table bgcolor="#333333"><tr><td><span class="word_preview" id="demo"><td></span></tr></table>
         <br/>
</body>
</html>

Answer 1

问题是你的正则表达式是错误的。 [^] 表示列出的任何字符（^ 除外）。你需要像 /\^0/

一样转义它

function myFunction() {
  var str = $("#demo").text();
  var res = str
    .replace(/\^0(\w+)/g, '<span style="color:black"></span>')
    .replace(/\^1(\w+)/g, '<span style="color:red"></span>')
    .replace(/\^2(\w+)/g, '<span style="color:green"></span>')
    .replace(/\^3(\w+)/g, '<span style="color:yellow"></span>')
    .replace(/\^4(\w+)/g, '<span style="color:blue"></span>')
    .replace(/\^5(\w+)/g, '<span style="color:cyan"></span>')
    .replace(/\^6(\w+)/g, '<span style="color:#D02090"></span>')
    .replace(/\^7(\w+)/g, '<span style="color:white"></span>')
  ;

  $("#demo").html(res);
};

$(function() {
  $(".word").keyup(function() {
    $(".word_preview").html($(this).val());
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


Enter name:
<br/>
<input type="text" name="maprotation" size="50" id="textfield" class="word" class="Stil69">
<input type="reset" name="Submit3" value="Reset" />
<br/>
<br/>
<h3>2. Click the button to preview your colored name.</h3>
<br/>
<input type="button" onclick="myFunction()" value="Click here" />
<br/>
<br/>
<table bgcolor="#333333">
  <tr>
    <td><span class="word_preview" id="demo"><td></span>
  </tr>
</table>
<br/>

Javascript: str-替换特殊字符

Javascript: str-replace special characters

javascript

str-replace