Заменить, похоже, не работает в этой функции? [Дубликат]

Ginger Squirrel спросил: 28 апреля 2018 в 09:41 в: jquery

У этого вопроса уже есть ответ:

  • How to replace all occurrences of a string in JavaScript? 41 отвечает

Я пытаюсь получить текстовое поле для изменения текста в div, и если добавить квадратные скобки, я хочу, чтобы диапазон для добавления текста вокруг текста, чтобы текст был зеленым. Вот мой код:

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 функция работает, когда страница загружается, однако, когда я добавляю в скобки, обновляя div preview, он печатает квадратные скобки на странице, а не теги span. Кто-нибудь знает, почему функция не заменяет текст?


1 ответ

Есть решение
eisbehr ответил: 28 апреля 2018 в 09:49

Для нескольких заметок внутри строки вам нужно использовать 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>
T.J. Crowder ответил: 28 апреля 2018 в 09:49
Это очень широко распространенный вопрос с каноническим дубликатом. Ему не нужен еще один ответ.