检查所有段落中的某些单词并添加到列表中
[英]Check for certain words in all paragraphs and add to list
问题描述
I'm trying to check paragraphs to see if it contains a certain word (Apple), and if so, add that to a list.
我正在尝试检查段落以查看它是否包含某个单词（Apple），如果是，请将其添加到列表中。
<p>Orange</p> <p>Grape</p> <p>Apple</p> <ul id=ulist> </ul> <script> var i; var x = document.getElementsByTagName("P"); for (i = 0; i < x.length; i++) { document.getElementById("ulist").innerHTML = "<li>" + x[i].innerHTML + "<li>"; } </script>
I'm unsure how to check for words, but first I'm trying to go through each paragraph and add each word to the list, but it's only adding Apple.我不确定如何检查单词，但首先我尝试通过每个段落 go 并将每个单词添加到列表中，但它只是添加 Apple。 I don't understand why even though I set i=0.我不明白为什么即使我设置了 i=0。
Expected output:预期 output：
- Apple
New to Javascript so I'd appreciate if the solution uses simple code even if it's long. Javascript 的新手，所以如果解决方案使用简单的代码，即使它很长，我也会很感激。
3 个解决方案
解决方案1
2 2021-03-23 12:34:24
Try this code:试试这个代码：
var paragraphs = [...document.getElementsByTagName("P")]; var list = document.getElementById("ulist") paragraphs.forEach(el => { if (el.innerText.toLowerCase().includes("apple")) { var li = document.createElement("LI") li.innerText = el.innerText list.appendChild(li) } })
<p>Orange</p> <p>Grape</p> <p>Apple</p> <p>Not Apple</p> <ul id="ulist"></ul>
It checks if each <p> has the word apple in it, and if so, it dynamically adds it to the list.它检查每个<p>中是否包含单词apple ，如果是，则将其动态添加到列表中。
If you want to check if it's Apple just by itself, use == , and if you want to make the search case-sensitive, remove the .toLowerCase() and change the word apple to Apple .如果您想单独检查它是否是Apple ，请使用== ，如果您想让搜索区分大小写，请删除.toLowerCase()并将单词apple更改为Apple 。
If you want to add every element, simply remove the if condition.如果要添加每个元素，只需删除if条件。
解决方案2
0 已采纳 2021-03-23 12:33:38
You should use += instead of = .您应该使用+=而不是= 。 Also forgot to close the list element (should be </li> ).也忘了关闭列表元素（应该是</li> ）。 Also, for better performance you can first generate string for all the items the update the DOM only once.此外，为了获得更好的性能，您可以首先为仅更新 DOM 一次的所有项目生成字符串。
You can check the text of the current element in each iteration based on which you can create items.您可以在每次迭代中检查当前元素的文本，您可以根据这些文本创建项目。
Demo:演示：
<p>Orange</p> <p>Grape</p> <p>Apple</p> <ul id=ulist> </ul> <script> var i; var x = document.getElementsByTagName("p"); var elString = ""; for (i = 0; i < x.length; i++) { if(x[i].textContent.toLowerCase().includes('apple')){ // check if text contains the word elString += "<li>"+x[i].textContent+"</li>"; } } document.getElementById("ulist").innerHTML = elString; </script>
解决方案3
0
Using Document.querySelectorAll() , NodeList.prototype.forEach() , Document.getElementById() , , Document.createElement() and RegExp.prototype.test() .使用Document.querySelectorAll() 、 NodeList.prototype.forEach() 、 Document.getElementById() 、 Document.createElement()和RegExp.prototype.test() 。
const fruits = document.querySelectorAll("p"), lists = document.getElementById("ulist"); fruits.forEach((fruit) => { if (/apple/i.test(fruit.textContent)) { const list = document.createElement("li"); list.textContent = fruit.textContent; lists.append(list); } });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Fruits</title> </head> <body> <p>Orange</p> <p>Grape</p> <p>Apple</p> <ul id="ulist"></ul> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.