我有两个按钮，当按下它们时会显示一个字符串。我不确定如何格式化此字符串。我希望它们在蓝框范围内的无序列表中。
仅供参考：
如果您正在为hacktoberfest设计一件T恤，那么我的代码在github上的https://github.com/Kat35601/Search_a_String.git处，请参见下文。
var found=[],books=["Genesis","Exodus","Leviticus","Numbers","Deuteronomy","Joshua","Judges","Ruth","Samuel","Samuel","Kings","Kings","Chronicles","Chronicles","Ezra","Nehemiah","Esther","Job","Psalms","Proverbs","Ecclesiastes","Song of Solomon","Isaiah","Jeremiah","Lamentations","Ezekiel","Daniel","Hosea","Joel","Amos","Obadiah","Jonah","Micah","Nahum","Habakkuk","Zephaniah","Haggai","Zechariah","Malachi","Matthew","Mark","Luke","John","Acts","Romans","Corinthians","Galatians","Ephesians","Philippians","Colossians","Thessalonians","Timothy","Timothy","Titus","Philemon","Hebrews","James","Peter","Peter","John","Jude","Revelation"],puzzle="Can you find the names of 25 books of the Bible in this paragraph? This is a most remarkable puzzle.Someone found it in the seat pocket on a flight from Los Angeles to Honolulu, keeping himself occupied for hours.One man from Illinois worked on this while fishing from his john boat. Roy Clark studied it while playing his banjo. Elaine Victs mentioned it in her column once. One woman judges the job to be so involving, she brews a cup of tea to help calm her nerves. There will be some names that are really easy to spot that’s a fact. Some people will soon find themselves in a jam, especially since the book names are not necessarily capitalized. The truth is, from answerswe get, we are forced to admit it usually takes a minister or scholar to see some of them at the worst. Something in our genes is responsible for the difficulty we have. Those able to find all of them will hear great lamentations from those who have to be shown. One revelation may help, books like! Timothy and Samuel may occur without their numbers. And punctuation or spaces in the middle are normal. A chipper attitude will help you compete. Remember, there are 25 books of the Bible lurking somewhere in this paragraph. Greater love hath no man than this, that a man lay down his life for his friends. John 15:13.";
//Search results for books and return those found
puzzle = puzzle.replace(/\W/g, '').toLowerCase();
for (let i = 0; i < books.length; i++) {
const index = puzzle.search(books[i].toLowerCase());
if (index >= 0 && found.indexOf(books[i]) == -1) {
found.push(books[i]);
}
}
//show all bookes of the Bible
function showBooks() {
var x = document.getElementById("thebooks");
if (x.style.display === "none") {
x.style.display = "block"
var str = books.toString();
document.getElementById("thebooks").innerHTML = str;
} else {
x.style.display = "none";
}
}
// show books that are found in the paragraph
function foundBooks() {
var f = document.getElementById("booksFound");
if (f.style.display === "none") {
f.style.display = "block"
var foundStr = found.toString();
document.getElementById("booksFound").innerHTML = foundStr;
} else {
f.style.display = "none";
}
}#canvas {
width: 800px;
font-family: sans-serif;
margin: auto;
}
h1 {
text-align: center;
}
#thebooks {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
#booksFound {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="canvas">
<h1> Can you find 25 books of the Bible in the paragraph below.</h1>
<p>Can you find the names of 25 books of the Bible in this paragraph? This is a most remarkable puzzle. Someone found it in the seat pocket on a flight from Los Angeles to Honolulu, keeping himself occupied for hours. One man from Illinois worked on this while fishing from his john boat. Roy Clark studied it while playing his banjo. Elaine Victs mentioned it in her column once. One woman judges the job to be so involving, she brews a cup of tea to help calm her nerves. There will be some names that are really easy to spot that’s a fact. Some people will soon find themselves in a jam, especially since the book names are not necessarily capitalized. The truth is, from answers we get, we are forced to admit it usually takes a minister or scholar to see some of them at the worst. Something in our genes is responsible for the difficulty we have. Those able to find all of them will hear great lamentations from those who have to be shown. One revelation may help, books like! Timothy and Samuel may occur without their numbers. And punctuation or spaces in the middle are normal. A chipper attitude will help you compete. Remember, there are 25 books of the Bible lurking somewhere in this paragraph. Greater love hath no man than this, that a man lay down his life for his friends. John 15:13.</p>
<input id="booksButton" type="button" value="Books of The Bible" onclick="showBooks();" />
<input id="foundButton" type="button" value="Books Found in the Paragraph" onclick="foundBooks();" />
<div id="thebooks">
</div>
<div id="booksFound">
</div>
</body>
</html>
答案 0 :(得分：0)
您可以运行循环并在li标记中添加每个单词。
for (var book in strArr) {
str += "<li>" + strArr[book] + "</li>";
}
对于找到的图书，请使用found.push(books[i]);代替found.push("<li>" + books[i] + "</li>");
var found=[],books=["Genesis","Exodus","Leviticus","Numbers","Deuteronomy","Joshua","Judges","Ruth","Samuel","Samuel","Kings","Kings","Chronicles","Chronicles","Ezra","Nehemiah","Esther","Job","Psalms","Proverbs","Ecclesiastes","Song of Solomon","Isaiah","Jeremiah","Lamentations","Ezekiel","Daniel","Hosea","Joel","Amos","Obadiah","Jonah","Micah","Nahum","Habakkuk","Zephaniah","Haggai","Zechariah","Malachi","Matthew","Mark","Luke","John","Acts","Romans","Corinthians","Galatians","Ephesians","Philippians","Colossians","Thessalonians","Timothy","Timothy","Titus","Philemon","Hebrews","James","Peter","Peter","John","Jude","Revelation"],puzzle="Can you find the names of 25 books of the Bible in this paragraph? This is a most remarkable puzzle.Someone found it in the seat pocket on a flight from Los Angeles to Honolulu, keeping himself occupied for hours.One man from Illinois worked on this while fishing from his john boat. Roy Clark studied it while playing his banjo. Elaine Victs mentioned it in her column once. One woman judges the job to be so involving, she brews a cup of tea to help calm her nerves. There will be some names that are really easy to spot that’s a fact. Some people will soon find themselves in a jam, especially since the book names are not necessarily capitalized. The truth is, from answerswe get, we are forced to admit it usually takes a minister or scholar to see some of them at the worst. Something in our genes is responsible for the difficulty we have. Those able to find all of them will hear great lamentations from those who have to be shown. One revelation may help, books like! Timothy and Samuel may occur without their numbers. And punctuation or spaces in the middle are normal. A chipper attitude will help you compete. Remember, there are 25 books of the Bible lurking somewhere in this paragraph. Greater love hath no man than this, that a man lay down his life for his friends. John 15:13.";
//Search results for books and return those found
puzzle = puzzle.replace(/\W/g, '').toLowerCase();
for (let i = 0; i < books.length; i++) {
const index = puzzle.search(books[i].toLowerCase());
if (index >= 0 && found.indexOf(books[i]) == -1) {
found.push("<li>" + books[i] + "</li>");
}
}
//show all bookes of the Bible
function showBooks() {
var x = document.getElementById("thebooks");
if (x.style.display === "none") {
x.style.display = "block";
var strArr = books.toString().split(",");
var str = "";
for (var book in strArr) {
str += "<li>" + strArr[book] + "</li>";
}
document.getElementById("thebooks").innerHTML = str;
} else {
x.style.display = "none";
}
}
// show books that are found in the paragraph
function foundBooks() {
var f = document.getElementById("booksFound");
if (f.style.display === "none") {
f.style.display = "block"
var foundStr = found.toString().split(",").join("");
document.getElementById("booksFound").innerHTML = foundStr;
} else {
f.style.display = "none";
}
}#canvas {
width: 800px;
font-family: sans-serif;
margin: auto;
}
h1 {
text-align: center;
}
#thebooks {
width: 100%;
padding: 50px 0;
background-color: lightblue;
margin-top: 20px;
display: none;
}
#booksFound {
width: 100%;
padding: 50px 0;
background-color: lightblue;
margin-top: 20px;
display: none;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="canvas">
<h1> Can you find 25 books of the Bible in the paragraph below.</h1>
<p>Can you find the names of 25 books of the Bible in this paragraph? This is a most remarkable puzzle. Someone found it in the seat pocket on a flight from Los Angeles to Honolulu, keeping himself occupied for hours. One man from Illinois worked on this while fishing from his john boat. Roy Clark studied it while playing his banjo. Elaine Victs mentioned it in her column once. One woman judges the job to be so involving, she brews a cup of tea to help calm her nerves. There will be some names that are really easy to spot that’s a fact. Some people will soon find themselves in a jam, especially since the book names are not necessarily capitalized. The truth is, from answers we get, we are forced to admit it usually takes a minister or scholar to see some of them at the worst. Something in our genes is responsible for the difficulty we have. Those able to find all of them will hear great lamentations from those who have to be shown. One revelation may help, books like! Timothy and Samuel may occur without their numbers. And punctuation or spaces in the middle are normal. A chipper attitude will help you compete. Remember, there are 25 books of the Bible lurking somewhere in this paragraph. Greater love hath no man than this, that a man lay down his life for his friends. John 15:13.</p>
<input id="booksButton" type="button" value="Books of The Bible" onclick="showBooks();" />
<input id="foundButton" type="button" value="Books Found in the Paragraph" onclick="foundBooks();" />
<div id="thebooks">
</div>
<div id="booksFound">
</div>
</body>
</html>