Javascript:如何动态创建和合并文本节点?

时间:2016-10-06 15:34:11

标签: javascript html arrays string nodes

这是一个验证函数,它使用匹配来接收电子邮件并在错误数组中存储不正确的字符。我想要做的是能够使用S标记通过不正确的字符画一条线。如果电子邮件中有一个无效字符,例如ab + c@abc.abc,则该行正确绘制“+”并显示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);
        }
      }  
    }

  }


}

1 个答案:

答案 0 :(得分:0)

刚刚回答了这个问题,我的错误非常基本,它与包含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(&#34; S&#34;)

           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);
        }
      }  
    }

  }


}