检查页面是否包含文本，如果为 true，则使用 javascript 将类添加到父类答案

【问题标题】：Check if a page contains text, if true add class to parent class using javascript检查页面是否包含文本，如果为 true，则使用 javascript 将类添加到父类
【发布时间】：2020-02-02 18:50:31
【问题描述】：

我正在学习 javascript 并尝试实现此代码，我搜索了类似的东西并尝试了一堆解决方案，但它们对我不起作用。

如果页面包含特定文本，我正在尝试使用 javascript 隐藏或显示 div。

我们需要显示以下嵌入视频

<div class="vimeovideo">
 <iframe src="{{ variant.metafields["global"]["rosecolorurl"] }}" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe>
</div>

.vimeovideo {
display:none;
}

.show {
display: block !important;
}

示例：如果页面包含“100 公里”之类的文字，则应在“vimeovideo”div 中添加“show”类。

我猜 javascript 代码需要一些时间间隔才能让页面完全加载，然后检查文本。

页面也有选项，当用户点击它们时，它会使用 ajax 重定向到不同的 url。

感谢您的帮助。

也尝试过：

Javascript - check if div contains a word?

【问题讨论】：

如果您正在为页面加载时间而苦苦挣扎，请尝试使用监听器进行窗口 onLoad

标签： javascript

【解决方案1】：

当页面完全加载事件侦听器时，您可以调用您的函数。

window.addEventListener("load", () => {
//Your code here
});

您可以在正文中搜索，但在 body 中搜索将是一个糟糕的选择。您应该更具体地说明您的搜索范围。

let b = document.getElementsByTagName('body')[0].innerHTML;
b.includes("100 Kilometers");

然后你可以添加这样的类

document.querySelector(".vimeovideo").classList.add("show");

【讨论】：

谢谢，那么当“vimeovideo”与该文本匹配时，如何添加类？
我是菜鸟，不知道该怎么做
@Karthik 我刚刚更新了我的答案。可以看看吗？
为了测试我试过这个： $(window).addEventListener("load", () => { let b = document.getElementsByTagName('product__form-container')[0].innerHTML; b .includes("18K 玫瑰金"); document.querySelector(".product__content-header").classList.add("redbg"); });但它没有用
抱歉，这个成功了 window.addEventListener("load", () => { let b = document.getElementsByTagName('body')[0].innerHTML; b.includes("18K 玫瑰金"); document.querySelector(".product__content-header").classList.add("redbg"); });

【解决方案2】：

试试这个：

<!doctype html>
<html>

<head>

  <head>

  </head>
</head>

<body>
  100 kilometers
  <script>
    if (document.body.innerText.includes("100 kilometers")) {
      console.log("100 kilometers")
    };
  </script>

</body>

</html>

【讨论】：

谢谢，那么当“vimeovideo”与该文本匹配时，如何添加类？我是菜鸟，不知道该怎么做
为了测试我试过这个：但它没有用
我了解，在条件 IF 之后，您必须首先选择元素“vimeovideo”，然后将“redbg”类添加到其中。为了选择一个元素，您可以使用它的 ID，但是由于您没有 ID，因此当您尝试使用 className 进行选择时，您只有“vimeovideo”的 className（这是您的情况），结果将是一个 ARRAY具有该 className 的元素不仅是一个元素：if(document.body.innerText.includes("18K Rose Gold")){document.getElementsByClassName("vimeovideo")[0].classList.add("redbg");}。注意 [0] 因为我们知道只有一个元素的结果