fix #5121: parse content in textarea as plaintext (#5143)

* fix #5121: parse content in textarea as plaintext

* update comment

Author: HerringtonDarkholme

src/compiler/parser/html-parser.js

@@ -46,7 +46,7 @@ let IS_REGEX_CAPTURING_BROKEN = false
 })
 
 // Special Elements (can contain anything)
-const isScriptOrStyle = makeMap('script,style', true)
+const isPlainTextElement = makeMap('script,style,textarea', true)
 const reCache = {}
 
 const decodingMap = {
@@ -72,8 +72,8 @@ export function parseHTML (html, options) {
   let last, lastTag
   while (html) {
     last = html
-    // Make sure we're not in a script or style element
-    if (!lastTag || !isScriptOrStyle(lastTag)) {
+    // Make sure we're not in a plaintext content element like script/style
+    if (!lastTag || !isPlainTextElement(lastTag)) {
       let textEnd = html.indexOf('<')
       if (textEnd === 0) {
         // Comment:
@@ -153,7 +153,7 @@ export function parseHTML (html, options) {
       var endTagLength = 0
       var rest = html.replace(reStackedTag, function (all, text, endTag) {
         endTagLength = endTag.length
-        if (stackedTag !== 'script' && stackedTag !== 'style' && stackedTag !== 'noscript') {
+        if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
           text = text
             .replace(/<!--([\s\S]*?)-->/g, '$1')
             .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1')

test/unit/modules/compiler/parser.spec.js

@@ -506,4 +506,29 @@ describe('parser', () => {
     expect(ast.tag).toBe('div')
     expect(ast.children.length).toBe(0)
   })
+
+  it('parse content in textarea as text', () => {
+    const options = extend({}, baseOptions)
+
+    const whitespace = parse(`
+      <textarea>
+        <p>Test 1</p>
+        test2
+      </textarea>
+    `, options)
+    expect(whitespace.tag).toBe('textarea')
+    expect(whitespace.children.length).toBe(1)
+    expect(whitespace.children[0].type).toBe(3)
+    // textarea is whitespace sensitive
+    expect(whitespace.children[0].text).toBe(`
+        <p>Test 1</p>
+        test2
+      `)
+
+    const comment = parse('<textarea><!--comment--></textarea>', options)
+    expect(comment.tag).toBe('textarea')
+    expect(comment.children.length).toBe(1)
+    expect(comment.children[0].type).toBe(3)
+    expect(comment.children[0].text).toBe('<!--comment-->')
+  })
 })