CODEWITHSUNDEEP
javascriptjquery
Kopi Bryant
Kopi Bryant

Reputation: 1366

Jquery How to replace exact-match text

As titled, how to replace exact-match text to some text I want to. The button is function to replace the text when it clicked.

My expected result will be Hello StackOverFlow, @L @Works @Lebron @lebron

function inputKeyUp(event, e) {

  if (event.keyCode == 13) {
    event.preventDefault();
  }
}

$(document).on('click', '#replaceBtn', function(){
    let ori = $('#chatboxtextarea').text();
    let t1 = "@Works";
  let textToReplace = "@l";
  let afterReplace = ori.replace(new RegExp("\\b"+textToReplace+"\\b", "gi"), t1);
  //
  $('#chatboxtextarea').text(afterReplace);
});
#chatboxtextarea{
  margin: 10px;
  padding: 5px 10px;
  border: 1px solid black;
  width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class="input chatboxtextarea" id="chatboxtextarea" name="chattxt" contenteditable  onkeyup="inputKeyUp(event,this);">Hello StackOverFlow, @L @l @Lebron @lebron</span>
<button id="replaceBtn">
Replace
</button>

Upvotes: 0

Views: 330

Answers (2)

Matias Kinnunen
Matias Kinnunen

Reputation: 8540

There are two issues with the regular expression.

First, it uses the i (case-insensitive) flag, so @L would be replaced as well (if the regular expression worked), producing this:

Hello StackOverFlow, @Works @Works @Lebron @lebron

...instead of this:

Hello StackOverFlow, @L @Works @Lebron @lebron

The second issue is related to the \b (word boundary) assertion. From Boundary-type assertions on MDN:

\b matches a word boundary. This is the position where a word character is not followed or preceded by another word-character, such as between a letter and a space.

Word-characters (\w) match these characters: [A-Za-z0-9_]. The @ character is not a word-character.

So, because the \b in the \b@l part of the regex is not followed by a word-character (because the @ character is not a word-character), it means that it must be preceded by a word-character. So this would be matched: foo@l, but this would not: foo @l.

One way to fix the issue is to use a negative lookbehind assertion to check that the @ character is not preceded by a word boundary. Like this: (?<!\b)@l.

(If the value of textToReplace is different, e.g. if it starts with a word-character, you might need to use a different kind of fix. "\\b" + textToReplace + "\\b" might be ok.)

Here's your code with those two issues fixed (I modified only the line with the afterReplace variable):

function inputKeyUp(event, e) {

  if (event.keyCode == 13) {
    event.preventDefault();
  }
}

$(document).on('click', '#replaceBtn', function(){
    let ori = $('#chatboxtextarea').text();
    let t1 = "@Works";
  let textToReplace = "@l";
  let afterReplace = ori.replace(new RegExp("(?<!\\b)"+textToReplace+"\\b", "g"), t1);
  //
  $('#chatboxtextarea').text(afterReplace);
});
#chatboxtextarea{
  margin: 10px;
  padding: 5px 10px;
  border: 1px solid black;
  width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span class="input chatboxtextarea" id="chatboxtextarea" name="chattxt" contenteditable  onkeyup="inputKeyUp(event,this);">Hello StackOverFlow, @L @l @Lebron @lebron</span>
<button id="replaceBtn">
Replace
</button>

Upvotes: 1

Grumpy
Grumpy

Reputation: 2243

$('#replaceBtn').on('click', function(){
    
  let ori = $('#chatboxtextarea').text();
  let t1 = "@Works";
  let afterReplace = ori.replace(/@l/g, t1);
  $('#chatboxtextarea').text(afterReplace);
});

Upvotes: 0

Related Questions