javascript - 如何修改以下脚本以能够接收带空格的参数？

Question

主要思想是将三个参数复制到我的第一个文本区域中，称为:text

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

按下我的按钮:生成表格，

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

并在第二个文本区域中获取结果:out1，

我用以下参数证明了这一点:

ford volvo bmw

我得到了正确的结果:

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

问题是，这次我接收了三个参数，但它们可能包含空格，如下所示:

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

因此，通过此输入，我想产生以下所需的输出:

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

请注意，第一个参数有两个空格，我想将其保留在输出中，在这种情况下，对于每个参数，然而，我当前的正则表达式是:

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

我得到:

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

这是不对的，我想感谢任何修复我的功能的建议:

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 1

您可以使用此正则表达式，它适用于原始情况，也适用于将单词用双引号引起来的情况，在这种情况下，引号之间的部分将被视为一个部分:

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

替换字符串需要更改为此，因为现在有更多捕获组:

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

说明

这一部分标识一个术语。其他两项重复此操作:

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

这由两个选项组成，由 | 分割。如果字符串以引号开头和结尾，则采用第一个选项，否则采用第二个(原始)选项。

在这两种情况下都有一个捕获组，但在第一种情况下双引号被排除。外括号只是告诉 | 运算符它的范围是什么；它不是作为一个组捕获的 ((?:)。

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>