代码之家 › 专栏 › 技术社区 › Ginger Squirrel

replace在这个函数中似乎不起作用?[副本]

html jquery

Ginger Squirrel · 技术社区 · 7 年前

这个问题已经有了答案:

How to replace all occurrences of a string? 56个答案

我正试图让一个文本框来更改一个分区中的文本,如果添加方括号,我希望在文本周围添加一个范围,使文本变绿。这是迄今为止我的代码:

function greenText() {
  var textAreaText = $('#textarea').val();
  var replacedText = textAreaText.replace("[", "<span style='color:green'>").replace("]", "</span>");
  $('#preview').html(replacedText);
}

$(function() {
  greenText();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preview" style="height: 4em; background-color:#eee; padding:10px;"></div>
<textarea id="textarea" rows="4" cols="50" onchange="greenText();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
  At w3schools.com you will learn how to [make a website]. 
</textarea>

这个 greenText 函数在页面加载时工作,但是当我添加括号更新 preview DIV它将方括号打印到页面,而不是跨距标记。有人知道为什么函数不替换文本吗?

1 回复 | 直到 7 年前

eisbehr 7 年前

对于字符串内的多个替换,需要使用 RegEx :

function greenText() {
  var textAreaText = $('#textarea').val();
  var replacedText = textAreaText.replace(/\[/g, "<span style='color:green'>").replace(/\]/g, "</span>");
  $('#preview').html(replacedText);
}

$(function() {
  greenText();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preview" style="height:400px; background-color:#eee; padding:40px;"></div>
<textarea id="textarea" rows="4" cols="50" onchange="greenText();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
  At w3schools.com you will learn how to [make a website]. 
</textarea>