Javascript：テキストノードを動的に作成してマージするにはどうすればよいですか？

Question

これは、電子メールの入力を受け取り、不正な配列内の不正な文字をマッチを使用して格納する検証関数です。私がしたいことは、Sタグを使って不正な文字を通って線を描くことができることです。電子メールにab + c@abc.abcなどの無効な文字が1つ含まれている場合、その行は「+」を正しく描画し、ab + c@abc.abcを表示します。ただし、無効な文字が複数ある場合a + b+c@abc.abcとして、両方の '+'が省略されますが、画面に表示されるとき、ab ++ c@abc.abcのように、互いに隣り合って移動します。私は、このテキストは + B + c@abc.abcとして表示するために取得する方法についてのヘルプが必要。

function validate() 
{ 
    var str = document.getElementById("email").value; 
    var len = str.length; 

    var patt1 = /^[^;,\':\?\!\*#\^&@\+\-]+\w+@{1}\w+\.{1}\w+$/; 

我々は正規表現のテストに合格した場合は、メールが有効である。

if(patt1.test(str)) 
    { 
    document.getElementById("validate").innerHTML = "valid"; 
    } 

そうでなければ、我々は彼らの別々のテキストノードをすべて、私は動的配列の変数を作成しようとした、ここで悪い

else 
    { 
    alert("not a valid email"); 
    document.getElementById("validate").innerHTML = ""; 
    var bad = str.match(/[;,\':\?\!\*#\^&@\+\-]+/);  

    var wholestr = document.getElementById("validate"); 

    var x = document.createElement("S"); 

を格納します。これはまず無効な文字、有効な文字に対して行われます。新しいテキストノードがすべてwholestrに追加され、画面に表示されます。この考え方は、各文字がそれ自身のテキストノードであるため、無効な文字は並んで表示されません。しかし、それはまだ発生します。

for(var i = 0; i < len; i++) 
    { 
     for(var j = 0; j < bad.length; j++) 
     { 
     if(str[i] == bad[j]) 
     { 
      var errors = []; 

      for(var k = 0; k < bad.length; k++) 
      { 
       errors[k] = document.createTextNode(bad[j]); 
      } 

      for(var k = 0; k < errors.length; k++) 
      { 
      x.appendChild(errors[k]); 
      wholestr.appendChild(x); 
      } 

     } 
     else 
     { 
      var valids = []; 

      for(var k = 0; k < str.length; k++) 
      { 
       valids[k] = document.createTextNode(str[i]); 
      } 


      wholestr.appendChild(valids[i]); 

      //var str1 = document.createTextNode(""); 
      //str1.textContent = str[i]; 
      //wholestr.appendChild(str1); 
     } 
     } 
    } 

    } 


} 

Answer 1

私の間違いはかなり基本的で、Sタグを含むx要素と関係がありました。

function validate() 
{ 
    var str = document.getElementById("email").value; 
    var len = str.length; 

    var patt1 = /^[^;,\':\?\!\*#\^&@\+\-]+\w+@{1}\w+\.{1}\w+$/; 

    if(patt1.test(str)) 
    { 
    document.getElementById("validate").innerHTML = "valid"; 
    } 
    else 
    { 
    alert("not a valid email"); 
    document.getElementById("validate").innerHTML = ""; 
    var bad = str.match(/[;,\':\?\!\*#\^&@\+\-]+/);  

    var wholestr = document.getElementById("validate"); 

    for(var i = 0; i < len; i++) 
    { 
     for(var j = 0; j < bad.length; j++) 
     { 
     if(str[i] == bad[j]) 
     { 
      var errors = []; 

ここで私が必要としたのは、Sタグで要素を保存した別の動的配列でした。だから、それぞれの無効な文字のノードは、自身のdocument.createElement（「S」）に追加されるだろう

  var x = []; 

      for(var k = 0; k < bad.length; k++) 
      { 
       x[k] = document.createElement("S"); 
       errors[k] = document.createTextNode(bad[j]); 
      } 

      for(var k = 0; k < errors.length; k++) 
      { 
      x[k].appendChild(errors[k]); 
      wholestr.appendChild(x[k]); 
      } 

     } 
     else 
     { 
      var valids = []; 

      for(var k = 0; k < str.length; k++) 
      { 
       valids[k] = document.createTextNode(str[i]); 
      } 


      wholestr.appendChild(valids[i]); 

      //var str1 = document.createTextNode(""); 
      //str1.textContent = str[i]; 
      //wholestr.appendChild(str1); 
     } 
     } 
    } 

    } 


}