如何使用documentQuerySelector在textarea(HTML标记)中编写JavaScript对象以获取该对象

如何使用documentQuerySelector在textarea(HTML标记)中编写JavaScript对象以获取该对象,javascript,html,object,Javascript,Html,Object,我想在文本区域或输入字段中编写javascript对象,并想使用documentQuerySelector检索这些数据。但当我这样做时,它会返回一个字符串 有没有办法在浏览器中编写javascript代码并从我的javascript文件(如app.js)中访问这些代码 HTML <textarea /> 我在文本区域中写入的对象 { quizTitle: "React Quiz Component Demo", quizSynopsis: "

我想在文本区域或输入字段中编写javascript对象,并想使用documentQuerySelector检索这些数据。但当我这样做时,它会返回一个字符串

有没有办法在浏览器中编写javascript代码并从我的javascript文件(如app.js)中访问这些代码

HTML

<textarea />

我在文本区域中写入的对象

{
  quizTitle: "React Quiz Component Demo",
  quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  questions: [
    {
      question: "How can you access the state of a component from inside of a member function?",
      questionType: "text",
      questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question
      answerSelectionType: "single",
      answers: [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
     correctAnswe": "3",
      messageForCorrectAnswer: "Correct answer. Good job.",
      messageForIncorrectAnswer: "Incorrect answer. Please try again.",
      explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     point: "20"
    }
  ]
} 
但是当我检索数据和console.log时,它给出的是string而不是js对象


"{
  quizTitle: "React Quiz Component Demo",
  quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  questions: [
    {
      question: "How can you access the state of a component from inside of a member function?",
      questionType: "text",
      questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question
      answerSelectionType: "single",
      answers: [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
     correctAnswe": "3",
      messageForCorrectAnswer: "Correct answer. Good job.",
      messageForIncorrectAnswer: "Incorrect answer. Please try again.",
      explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     point: "20"
    }
  ]
}"

在本例中,textarea的
event.target.value
将返回一个字符串

如果需要该对象,必须使用
JSON.parse(textValue)
来获取它

此外,传递给
JSON.parse
textValue
必须是有效的JSON(您可以查看以了解有效JSON的详细信息)

例如,要获取它,可以声明一个对象并使用
JSON.stringify(obj)
获取有效的JSON

const a={
问答题:“反应测验组件演示”,
奎兹尼奥普斯:
“Lorem ipsum dolor sit amet,concertetuer adipise elite.Aenean commodo ligula eget dolor.Aenean masa.Cum socis natoque penatibus and magnis dis parturity montes,nasceur ridiculus mus.Donec quam felis,ultricies nec,pellentescue eu,pretium quis,sem.Nulla consequeat mass quis enim”,
问题:[
{
问题:
“如何从成员函数内部访问组件的状态?”,
问题类型:“文本”,
问题图片:“https://dummyimage.com/600x400/000/fff&text=X“,//如果需要显示有问题的图片
回答选择类型:“单一”,
答复:[
“this.getState()”,
“this.prototype.stateValue”,
“本州”,
“这个.价值观”,
],
正确答案:“3”,
MessageForCorrectResponse:“回答正确,干得好。”,
messageForIncorrectAnswer:“回答不正确。请重试。”,
说明:
“知识本身是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德。”,
要点:“20”,
},
],
};

log(JSON.stringify(a,null,2))首先检查这一行:correctAnswe:“3”e.target.value是DOM元素的value属性,在本例中,这意味着在textarea中输入的文本,因此请尝试使用JSON.parse(e.target.value),不要忘记在textarea中插入正确的JSON。我检查了这一点。我想删除它”“在卷发之前brackets@AsaduzzamanHimel您是否复制了正确的JSON字符串()?

"{
  quizTitle: "React Quiz Component Demo",
  quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  questions: [
    {
      question: "How can you access the state of a component from inside of a member function?",
      questionType: "text",
      questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question
      answerSelectionType: "single",
      answers: [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
     correctAnswe": "3",
      messageForCorrectAnswer: "Correct answer. Good job.",
      messageForIncorrectAnswer: "Incorrect answer. Please try again.",
      explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     point: "20"
    }
  ]
}"