neo33 neo33 - 2 months ago 8
HTML Question

how to modify the following script to be able of receive parameters with spaces?

The main idea is to copy three parameters into my fist text area called: text

<textarea cols="70" rows="15" id="text" ></textarea>


to the press my button called: Generate tables,

<button id="generate">Generate tables</button><br>


and getting the result in the second text area called: out1,

I prove it whit the following parameters:

ford volvo bmw


and I got the right result:

"Svolvo|ford~E~bmw" "ford~SNRF"


The problem is that this time I with to receive three parameters but they could contain spaces as follows:

"ford 34" "volbo 45" "bmz 34"


So with this input I would like to produce the following desired output:

"Svolvo 45|ford 34~E~bmw 34" "ford~SNRF"


Note that the first parameter has two blank spaces and i want to preserve it in the output, when is the case, for every parameter,
However with my current regex that is:

/(\S+)\s+(\S+)\s+(\S+)/g


I am getting:

"S34"|"ford~E~"volbo" ""ford~SNRF" "S"bmz|45"~E~34"" "45"~SNRF"


Which is not right, I would like to appreciate any suggestion to fix my function:



var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');

generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(\S+)\s+(\S+)/g,
'"S$2|$1~E~$3" "$1~SNRF"');
output.textContent = text;
};

<textarea cols="70" rows="15" id="text"></textarea>
<div cols="3" rows="15" id="out1" style="width:80%; white-space:pre; color:Lime"></div>
<div class="wrapper">
<button id="generate">Generate tables</button>
</div>




Answer

You could use this regular expression, which works for the original case, but also for when you have wrapped words in double quotes, in which case the part between quotes is taken as one part:

/(?:"(.*?)"|(\S+))\s+(?:"(.*?)"|(\S+))\s+(?:"(.*?)"|(\S+))/g

The replacement string needs to change to this, as there are now more capture groups:

 '"S$3$4|$1$2~E~$5$6" "$1$2~SNRF"'

Explanation

This part identifies one term. It is repeated for the other two terms:

(?:"(.*?)"|(\S+))

This consists of two options split by |. If the string starts and ends with a quote, the first option is taken, else it goes for the second (original) option.

In both cases there is a capture group, but in the first case the double quotes are excluded. The outer brackets are only to tell the | operator what its scope is; it is not captured as a group ((?:).

var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');

generate.onclick = function() {
  var text = input.value;
  text = text.replace(/(?:"(.*?)"|(\S+))\s+(?:"(.*?)"|(\S+))\s+(?:"(.*?)"|(\S+))/g,
    '"S$3$4|$1$2~E~$5$6" "$1$2~SNRF"');
  output.textContent = text;
};
<textarea style="width:100%" id="text">ford "volbo 45" "bmz 34"</textarea>
<div id="out1" style="width:80%; white-space:pre; color:Lime"></div>
<button id="generate">Generate tables</button>