Javascript 我必须解析网页的内容,并在下拉菜单中将所有标题显示为类别&标题内的所有句子都映射到类别
我必须解析网页的内容,在下拉菜单中将所有标题显示为类别,并将标题内的所有句子映射到类别。例如:我有一个类似这样的网页: 水果: 苹果是一种水果 芒果是一种水果 西瓜是一种水果 动物: 人是动物 猫是一种动物 狗是一种动物 汽车: 福特是一辆汽车 现代是一辆汽车 奥迪是一辆汽车Javascript 我必须解析网页的内容,并在下拉菜单中将所有标题显示为类别&标题内的所有句子都映射到类别,javascript,jquery,html,css,reactjs,Javascript,Jquery,Html,Css,Reactjs,我必须解析网页的内容,在下拉菜单中将所有标题显示为类别,并将标题内的所有句子映射到类别。例如:我有一个类似这样的网页: 水果: 苹果是一种水果 芒果是一种水果 西瓜是一种水果 动物: 人是动物 猫是一种动物 狗是一种动物 汽车: 福特是一辆汽车 现代是一辆汽车 奥迪是一辆汽车 现在我的目标是解析这个网页,并显示“水果”、“动物”和“汽车”的下拉菜单。选择类别后,应显示与该类别相关的所有句子。首先将网页文本转换为JSON对象 然后迭代JSON对象以创建一个选择项 HTML代码: <div i
现在我的目标是解析这个网页,并显示“水果”、“动物”和“汽车”的下拉菜单。选择类别后,应显示与该类别相关的所有句子。首先将网页文本转换为JSON对象 然后迭代JSON对象以创建一个选择项 HTML代码:
<div id="target">
Fruits:
Apple is a fruit
Mango is a fruit
Watermelon is a fruit
Animal:
Human is an animal
Cat is an animal
Dog is an animal
Car:
Ford is a car
Hyundai is a car
Audi is a car
</div>
<select name="category" id="category"></select>
<div id="output">Please select a cateogry<div>
</div>
Javascript:
target=document.getElementById("target").innerHTML;
lines=target.split("\n");
json_array=[];
var obj={};
obj.name="";
obj.array=[];
for(i=0;i<lines.length;i++){
lines[i]=lines[i].replace(/^[ ]+|[ ]+$/g,'');
if(lines[i].indexOf(":")!=-1){
if(obj.name!=""){
json_array.push(obj);
obj=new Object();
obj.name=lines[i].replace(":","");
obj.array=[];
}
else
obj.name=lines[i].replace(":","");
}
else{
if(lines[i].length>0){
obj.array.push(lines[i]);
}
}
}
json_array.push(obj);
console.log(JSON.stringify(json_array));
menu=document.getElementById("category");
for(i=0;i<json_array.length;i++){
var opt = document.createElement('option');
opt.value = json_array[i].name;
opt.innerHTML = json_array[i].name;
menu.appendChild(opt);
}
menu.addEventListener("change", function() {
for(i=0;i<json_array.length;i++){
if(menu.value == json_array[i].name){
output.innerHTML="";
for(j=0;j<json_array[i].array.length;j++){
output.innerHTML+=json_array[i].array[j]+"<br>";
}
}
}
});
看起来你想让我们为你写些代码。虽然许多用户愿意为陷入困境的程序员编写代码,但他们通常只在海报已经试图自己解决问题时才提供帮助。演示这项工作的一个好方法是包括您迄今为止编写的代码、示例输入(如果有)、预期输出以及您实际获得的控制台输出、回溯等。。你提供的细节越多,你可能得到的答案就越多。检查和。首先显示到目前为止您拥有的与问题相关的代码。@Learner我这样做是因为这是您的第一天!请接受我的回答,让它值得我花时间非常感谢你,乔伊。我将尝试并分享结果。欢迎@Learner,但我建议您下次有问题时尝试用谷歌搜索查询,您可能会找到以前堆栈溢出查询或教程的链接。一旦您尝试了一些代码,但仍然没有达到目标,那么请尝试发布一个问题。现在请尝试演示链接。@学习者您是否尝试了演示链接?是的。试试你自己。你会发现问题所在