如何过滤原始元素值javascript？

Question

我想像123abc一样使用textarea原始值！@来过滤123和abc以及！@＃并显示数字，符号和字符串id。

function getValue() {
  var all = document.getElementById( 'allText' ).value;

  all.filter = number; 
  all.filter = string;
  all.filter = symbol;   
  document.getElementById( 'number' ).innerText = all;
  document.getElementById( 'symbol' ).innerText = all;
  document.getElementById( 'string' ).innerText = all
}

<label>Number:</label><p id="number"></p>
<label>Symbol:</label><p id="symbol"></p>
<label>String:</label><p id="string"></p>
<label>Write any:</label><textarea onkeydown="getValue()" id="allText"></textarea>

Answer 1

您可以使用all上的regular expressions来匹配其值中的字符子集。请注意，all本身就是一个字符串，所以其中的所有字符也是如此。我还将事件更改为从keydown转到input。这是一个有效的例子：

function getValue() {
  var all = document.getElementById( 'allText' ).value;

  document.getElementById('string').innerText = (all.match(/[a-z]/gi)  || []).join('');
  document.getElementById('number').innerText = (all.match(/\d/g)      || []).join('');
  document.getElementById('symbol').innerText = (all.match(/[^\s\w]/g) || []).join(''); 
}

body { display: flex; }
label { font-weight: bold; }
* { text-align: left; margin: 0.5rem; }

<div class=input>
  <label>Write any:</label><textarea oninput="getValue()" id="allText"></textarea>
</div>

<table class=output>
  <tr><th>Numeric:</th><td id="number"></td></tr>
  <tr><th>Symbol:</th><td id="symbol"></td></tr>
  <tr><th>Alpha:</th><td id="string"></td></tr>
</table>

... .join('')

String.match(...)函数返回一个包含所有匹配项的数组（如果找到了一些）。例如，"abc".match(/[a-z]/g)将返回["a", "b", "c"]。因此，最后呼叫... .join('')。这会将数组中的所有字符连接到一个字符串。

all.match(...) || []

如果String.match未找到任何匹配项，则会返回null。为了能够无条件地调用.join，null值默认为使用此语法的空数组。