检查作为函数参数输入的字符串是否是HTML标记名之一

时间:2018-06-16 16:52:38

标签: javascript html error-handling tagname

我正在开发一个构造函数,我可以按照以下代码中显示的代码注释中的说明使用:

//CONSTRUCTOR
//creates a child element of the specified kind
//adds the child to specified parent
//optionally assigns the child an ID
// optionally assigns the child up to 4 classes

function Adjoin(childKind = undefined, childID = undefined, firstChildClass = undefined, secondChildClass = undefined, thirdChildClass = undefined, fourthChildClass = undefined) {
  if (!(this instanceof Adjoin)) {
    return new Adjoin(childKind = undefined, childID = undefined, firstChildClass = undefined, secondChildClass = undefined, thirdChildClass = undefined, fourthChildClass = undefined);
  }
  this.childKind = childKind;
  this.childID = childID;
  this.firstChildClass = firstChildClass;
  this.secondChildClass = secondChildClass;
  this.thirdChildClass = thirdChildClass;
  this.addChildTo = function(parentID) {

    const parent = document.getElementById(parentID);
    const child = document.createElement(childKind);

    parent.appendChild(child);

    if (childID !== undefined) {
      child.setAttribute("id", childID);
    }

    if (firstChildClass !== undefined) {
      child.classList.add(firstChildClass);
    }

    if (secondChildClass !== undefined) {
      child.classList.add(secondChildClass);
    }

    if (thirdChildClass !== undefined) {
      child.classList.add(thirdChildClass);
    }

    if (fourthChildClass !== undefined) {
      child.classList.add(fourthChildClass);
    }
  }
};

如果我在某处输入这样的代码,这是有效的:

new Adjoin("div", "foo_id", "foo_class").addChildTo("some_parent")

这也很好用:

new Adjoin("div").addChildTo("some_parent")

我所坚持的是检查第一个参数是否是HTML标记名称之一的方法。例如,如果代码输入为:

,我想抛出错误

new Adjoin("not_an_html_element", "foo_id", "foo_class").addChildTo("manchoo_parent")

提前致谢!

更新

好吧,好像我发布这个问题有点太快了!我输入了以下代码:

new Adjoin(75).addChildTo("footer");

并收到此错误:

未捕获DOMException:无法执行' createElement' on' Document':提供的标记名称(' 75')不是有效名称。

所以已经存在内置错误。

但是,当我输入以下代码时:

new Adjoin("DaveyJones").addChildTo("footer");

我得到以下"标签"添加到我网站上的页脚:

<daveyjones></daveyjones>

显然,这不是有效的HTML标记。

对于任何非字符串的内容都会引发错误,但任何字符串都会添加一个没有错误的HTML标记。

再次更新

我按照user2676208和this question的建议尝试了这一点,将其设置为条件:

if (document.createElement(this.childKind).toString() != "[HTMLUnknownElement]") {
  console.log("That is a valid HTML element!")
} else {
  console.log("That is NOT a valid HTML element!")
}

但是,它始终记录&#34;这是一个有效的HTML元素!&#34;我是否使用&#34; div&#34;或者&#34; DaveyJones&#34;或&#34; anyOtherString&#34;。

尽管我不喜欢这个想法,但我可能必须通过设置标记名称数组并在循环中进行比较来完成此操作。我真的希望有一种方法可以避免这种情况,因为它似乎对我不利。我希望Javascript已经有了检查有效HTML的方法......

3 个答案:

答案 0 :(得分:0)

我不认为我可以将其标记为重复,但您应该在此处查看问题:Verify whether a string is a valid HTML tag name

来自Stryner的答案,

function isValid(input) {
  return document.createElement(input).toString() != "[object HTMLUnknownElement]";
}

答案 1 :(得分:0)

不会抛出错误,因为即使您创建的元素不是有效的HTML标记,它仍会创建该元素,但它将是HTMLUnknownElement。 因此,仍然显示// Getting the chunk size got from poll int chunkSize = records.count(); // Index to count the number of the message int recordIndex = 0; for(ConsumerRecord<String, String> record : records) { // Increasing to count the number of message visited recordIndex++; // Checking the last message if (recordIndex == size) { fw = new FileWriter("C:/kafka-logs/kafka-logs-0/data/msg-"+topic, false); pw = new PrintWriter(fw); pw.print(record.value()); pw.close(); } } 的原因。

要解决您的问题,您应该有一个功能可以验证您收到的输入是否是有效的HTML标记

答案 2 :(得分:0)

您可以创建一个您希望被视为有效的HTML标记数组,并使用Array.indexOf()检查该函数内部创建的元素是否存在于此数组中。