3

I have a following string array

["div", "span", "h1", "h2", "h3", "h4", "h5", "p", "br", "a", "strong", "em", "li", "ul", "ol", "b", "i", "u", "hr", "font", "pre", "q", "s", "strike", "blockquote", "sub", "sup"]

I have a string text which also contains HTML tags, I need to verify that the html tags in the paragraph text are out of those defined in string array above. Apart from these if any tags are present error has to be thrown. I saw many methods but couldn't find any simple javascript implementation of these.

Cœur
  • 37,241
  • 25
  • 195
  • 267
rampuriyaaa
  • 4,926
  • 10
  • 34
  • 41

2 Answers2

1

You would need to parse the HTML, then test all the tags to see if they are matched in the array. I would just parse the HTML, walk through the DOM nodes and test each tagname against the array:

var allowedTags = ["div", "span", "h1", "h2", "h3", "h4", "h5", "p", "br", "a", "strong", "em", "li", "ul", "ol", "b", "i", "u", "hr", "font", "pre", "q", "s", "strike", "blockquote", "sub", "sup"];
var wrapper = document.createElement("div");
wrapper.innerHTML = "<h1>Your HTML here</h1><p>Test</p><span><audio /></span>";
function walk(element) {
    var el = element;
    var len = el.childNodes.length, i;
    for(i = 0; i<len; i++) {
        if(!walk(el.childNodes[i])) return false;
    }
    return !(el.tagName && allowedTags.indexOf(el.tagName.toLowerCase()) === -1);
}
var result = !walk(wrapper);
console.log("Contains invalid tags: " + result);

jsFiddle

CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
  • If I use wrapper.innerHTML="Hi I am testing this " then it should so true for containing invalid tags but it showing false....I mean for span tag precisely – rampuriyaaa Apr 17 '14 at 10:40
  • The walk method returns `true` if all tags are valid. It returns `false` if any tags are invalid. I am negating this result so that it displays correctly. So `"Contains invalid tags: false"` is correct because `span` is valid. – CodingIntrigue Apr 17 '14 at 10:49
  • Even if u give as only entry as input it shows false as in it doesn't contains the invalid tags. Even though it's invalid.. – rampuriyaaa Apr 17 '14 at 10:52
  • @Rajat You're not reading this correctly. `Contains invalid tags: false` means that your HTML *does not* contain any *invalid* tags. Span is a valid tag (second in the array). – CodingIntrigue Apr 17 '14 at 10:53
  • Ohh! I am sorry..didn't see span as listed in the array..thanks a lot..it works! :) – rampuriyaaa Apr 17 '14 at 10:54
  • +1 for patience :) How did you put the jsFiddle button? – GôTô Apr 17 '14 at 11:43
  • @GôTô Cheating using the keyboard markup :) `jsFiddle` Then wrap that in a hyperlink – CodingIntrigue Apr 17 '14 at 11:46
0

You would have to parse the tags out of the string and then check the tag names against the array; this is discussed in this question. The way of parsing the string depends on your environment, but the topic is discussedin this question.

Community
  • 1
  • 1
Codor
  • 17,447
  • 9
  • 29
  • 56