javascript find and replace just whole words in a textarea

Question

I have a text area with a list of roman numerals that I want to convert to arabic digits with a button click. How can I replace only the whole numbers and not parts of the other numbers. For example, I have:

XI
XXI
XXXI

and I get

11
X11
XX11

but I want

11
XXI
XXXI

The code I'm using is:

function romanToArabic() {

  var str = document.getElementById("textArea").value;

  var mapObj = {
    XI:"11",
    V:"5" 
  };

  var re = new RegExp(Object.keys(mapObj).join("|"),"gi");
  str = str.replace(re, function(matched){
    return mapObj[matched];
  });

  document.getElementById("textArea").value = str;

}

I've seen various solutions with using \b but I can't figure out where to put it in my code. Thanks.

can you varify `XI:"6"` assignment is correct? It shouldn't be `VI:"6"` — programtreasures, Dec 07 '17 at 04:32
Yes, I made a mistake and corrected it. I meant to put XI:"11". — user3080392, Dec 07 '17 at 04:34
check https://stackoverflow.com/questions/9083037/convert-a-number-into-a-roman-numeral-in-javascript — programtreasures, Dec 07 '17 at 04:38
You can’t do this with just string replacement – there’s math involved. — Ry-, Dec 07 '17 at 04:39
Actually, my question is not about converting roman numerals, it's about searching a text area and replacing only the whole word strings, not parts of strings. — user3080392, Dec 07 '17 at 04:42

Stephen Quan · Answer 1 · 2017-12-07T04:54:03.110

I took your spec and made it "work", by:

Defining the correct regular expression \b[XIV]+\b (matches a whole roman number)
Use your object as a mapping function and a fallback if it fails, mapObj[roman] || roman

What the script doesn't do:

Catch illegal roman numbers, i.e. it allows XIIX
Implement a proper algorithm for the match, like XV, idealistically should parse to 10 + 5 = 15

function fromRoman(roman) {
  var mapObj = {
    XI:"11",
    V:"5" 
  };
  return mapObj[roman] || roman;
}

function convertFromRoman() {
  var str = document.getElementById("textArea").value;
  var output = str.replace(/\b[XIV]+\b/g, fromRoman);
  document.getElementById("output").value = output;
}

convertFromRoman();

<p>Input:</p>

<textarea id="textArea" style="width:100%; height:50px" onkeyup="convertFromRoman()">
XI
XXI
XXXI
</textarea>

<p/>

<p>Output:</p>

<textarea id="output" style="width:100%; height:50px">
</textarea>

Daniel Tran · Accepted Answer · 2017-12-07T04:56:02.843

1

What you need is add \\b to begin and end of the regular expression. It will match the whole word.

function romanToArabic() {

  var str = document.getElementById("textArea").value;

  var mapObj = {
    XI:"11",
    V:"5" 
  };

  var re = new RegExp("\\b(" + Object.keys(mapObj).join("|") + ")\\b","gi");
  str = str.replace(re, function(matched){
    return mapObj[matched];
  });

  document.getElementById("textArea").value = str;

}

<textarea id="textArea" style="width: 400px; height: 100px"></textarea>
<br />
<button onClick="romanToArabic()">Convert</button>

edited Dec 07 '17 at 04:56

answered Dec 07 '17 at 04:41

Daniel Tran

6,083
12
25

Your solution is failing for this case: **XII** .It should print **XII** as it is but printing **11I** Please check it and make amendments accordingly – Dec 07 '17 at 04:53
@Mandy8055 fixed – Daniel Tran Dec 07 '17 at 04:56
@Mandy8055 You're right. I had it marked as correct, but then saw your comment – user3080392 Dec 07 '17 at 04:56
@user3080392 I have fixed it. What you need is wrapped the reg with `(` and `)` – Daniel Tran Dec 07 '17 at 04:57
1

@Daniel Tran Yes this worked well. Thanks for giving an answer that incorporated the code I already had. – user3080392 Dec 07 '17 at 05:04

score 0 · Answer 3 · answered Dec 07 '17 at 04:52

Here is another way , just split your textArea value by new line ('\n').

var val=["XI", "XXI", "XXXI"]; // $("textarea").val().split('\n');
var outPut = [];
$.each(val, function(index, object) {
 if(object.length == 2){
   outPut.push(object.replace("XI",'11'));
 }else{
    outPut.push(object);
}
 console.log(outPut[outPut.length-1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascript find and replace just whole words in a textarea

3 Answers3