Question

我正在创建一个模拟博客，我将在其中通过JavaScript文件附加帖子。我目前已对其进行了设置，以使搜索按钮将仅在搜索栏中显示具有相同文本的帖子。现在，我希望帖子中突出显示找到的单词。

HTML：

<div id= "custom_blog_div"></div>

JS：

if (document.getElementById("custom_blog_div")) {

    //Blog Post 2
    var post_2_div = document.createElement("div");

    post_2_div.setAttribute("id", "post_2_div");
    post_2_div.setAttribute("class", "post_div");

    custom_blog_div.appendChild(post_2_div);

    // Header
    var post_2_Header = document.createElement("h2");
    var post_2_Header_Text = document.createTextNode("Welcome, and Pardon the Construction!");

    post_2_Header.setAttribute("class", "blog_post_header");
    post_2_Header.appendChild(post_2_Header_Text);
    post_2_div.appendChild(post_2_Header);

    // Date
    var post_2_Date = document.createElement("p");
    var post_2_Date_Text = document.createTextNode("January 2, 2018 12:00 am");

    post_2_Date.setAttribute("class", "blog_post_date");
    post_2_Date.appendChild(post_2_Date_Text);
    post_2_div.appendChild(post_2_Date);

    // Blog
    var post_2_Blog = document.createElement("p");
    var post_2_Blog_Text = document.createTextNode("This is a Left Image:");
    var post_2_Blog_Image_1 = document.createElement("img");

    post_2_Blog.setAttribute("class", "blog_post_text");
    post_2_Blog_Image_1.setAttribute("class", "Left_Image");
    post_2_Blog_Image_1.setAttribute("width", "100px");
    post_2_Blog_Image_1.setAttribute("src", "./series images/main series/spirit legends issue 5/Spirit Legends 5 - Cover.jpg")

    post_2_Blog.appendChild(post_2_Blog_Text);
    post_2_Blog.appendChild(post_2_Blog_Image_1);
    post_2_div.appendChild(post_2_Blog);

    // Blog Post 1
    var post_1_div = document.createElement("div");

    post_1_div.setAttribute("id", "post_1_div");
    post_1_div.setAttribute("class", "post_div");

    custom_blog_div.appendChild(post_1_div);

    // Header
    var post_1_Header = document.createElement("h2");
    var post_1_Header_Text = document.createTextNode("Welcome, and Pardon the Construction!");

    post_1_Header.setAttribute("class", "blog_post_header");
    post_1_Header.appendChild(post_1_Header_Text);
    post_1_div.appendChild(post_1_Header);

    // Date
    var post_1_Date = document.createElement("p");
    var post_1_Date_Text = document.createTextNode("January 2, 2018 12:00 am");

    post_1_Date.setAttribute("class", "blog_post_date");
    post_1_Date.appendChild(post_1_Date_Text);
    post_1_div.appendChild(post_1_Date);

    // Blog
    var post_1_Blog = document.createElement("p");
    var post_1_Blog_Text = document.createTextNode("Hi, and welcome to the official Spirit Legends website! The site is live in order to test out certain things, but as you can see, it is very much incomplete. Please look forward to the complete site in the future!");

    post_1_Blog.setAttribute("class", "blog_post_text");
    post_1_Blog.appendChild(post_1_Blog_Text);
    post_1_div.appendChild(post_1_Blog);

}

// Search Bar button
document.getElementById("search_news_button").onclick = function() {

    var all_blogs = document.getElementById("custom_blog_div").querySelectorAll(".post_div");
    var text_field = document.getElementById("search_news_button_text").value.toLowerCase();
    var custom_blog = document.getElementById("custom_blog_div");

    // Restore all Blog Posts before searching

    for (i = 0; i < all_blogs.length; i++) {
        if (all_blogs[i].style.display === "none") {
            all_blogs[i].style.display = "inline";
        }
    }

    // Loop through all Blog posts

    for (i = 0; i < all_blogs.length; i++) {

        // Display all Blog posts containing the text in the Search Bar
        if (all_blogs[i].innerText.toLowerCase().includes(text_field) === true) {

            all_blogs[i].style.display = "inline";

            var x = "";
            for (x = 0; x < custom_blog.innerText.length; x++) {
                if (custom_blog[x].innerText.toLowerCase().includes(text_field) === true) {
                    x = custom_blog[x].innerText.toLowerCase();
                    x.style.backgroundColor = "yellow";
                }
            }

            // Highlight the found text in each blog post
            var x = "";
            for (x = 0; x < custom_blog.innerText.length; x++) {
                if (custom_blog[x].innerText.toLowerCase().includes(text_field) === true) {
                    x = custom_blog[x].innerText.toLowerCase();
                    x.style.backgroundColor = "yellow";
                }
            }

            // Otherwise, if no Blog posts contain the text in the Search Bar or if Search Bar is empty, display the default
        } else {
            all_blogs[i].style.display = "none";
        }
    }
}

因此，就像我说的那样，博客正在运行，搜索按钮也在运行，但是我不知道如何突出显示搜索到的单词。目前，此代码导致控制台告诉我“ TypeError：custom_blog [x]未定义”。

并且，如果有帮助，则网站为http://spiritlegendsofficial.com/，但尚未添加此功能。尽管您可以在那里查看网站的其余代码，并获得此模拟博客的一些上下文。

谢谢！

Answer 1

假设custom_blog是HTMLElement类型，则custom_blog[0]代表该HTMLElement的第一个子节点。如果您检查变量custom_blog是否在javascript控制台中定义，但未定义custom_blog[x]，则基本上意味着您的<div id= "custom_blog_div"></div>没有子元素。

我认为您的问题在循环中某处正在抓住您的文本以突出显示。您正在检查字符串的长度，但是在循环内部，如果没有子节点，您将尝试定位子节点。您可能需要更改for循环的条件，以继续基于节点数：

if (custom_blog.hasChildNodes()) {
  var children = custom_blog.childNodes;

  for (x = 0; x < children.length; x++) {
    if (children[x].innerText.toLowerCase().includes(text_field) === true) {
      x = children[x].innerText.toLowerCase();
      x.style.backgroundColor = "yellow";
    }
  }
}

有关childNodes的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

遍历div并突出显示文本

1 个答案: