Question

我希望有人可以帮助我。我是Javascript的新手，我正在编写一个执行不同代码的脚本，具体取决于登录时横幅框中显示的错误警告消息。在所有情况下都会显示一个横幅元素：

<div class="alert-body alert-body-visible" ng-class="{'alert-body-visible': animation, 'alert-green-visible': animation2, 'active' : animation2active}"><span ng-bind-html="alertMessage">The username or password is incorrect.</span></div>

但随后，根据错误，会附加一条自定义错误消息：

<span ng-bind-html="alertMessage">The username or password is incorrect.</span>

Here's a photo of how this all looks in Chrome's Inspector:

我需要一个IF语句来测试页面上是否存在横幅本身，如果是，那么该横幅中是否存在此特定消息（或者甚至是一个单词，因为每条消息都是唯一的）。

使用此功能轻松检测横幅：

if(document.getElementsByClassName("alert-body alert-body-visible").length > 0)

但是检测它上面的文字，不是那么多。

我不能对页面上的所有文本进行通用HTML搜索，因为其他地方有重叠的单词会导致结果不唯一，所以我需要一些方法将此文本隔离为alert banner元素的一部分，如果可能的。

使用纯JS的任何帮助（我没有或知道如何使用外部代码）将不胜感激。

Answer 1

获得div元素后，您需要获取span。获得span后，您可以使用indexOf将其内容添加到＆＃34;搜索＆＃34;无论你想要什么字符串。

<强>解释

这：!!alertBanner.length将属性转换为布尔值（0到false，其他所有内容都转换为true）。我们这样做是因为indexOf可以返回0，它将评估为false。所以现在在分配行msgPos中将包含一个布尔false（如果没有alertBanner）或者字符位置＆＃34;搜索文本＆＃34;从（可能是0）开始。

现在我们的if检查位置是否不是false，如果不是，则会检查＆＃34;搜索文本的位置＆＃ 34;不是-1（-1表示未找到）。如果一切正确，那么我们找到了我们正在寻找的东西。

＆＃13;

var alertBanner = document.getElementsByClassName("alert-body alert-body-visible");
var msgPos = !!alertBanner.length && alertBanner[0].getElementsByTagName('span')[0].innerHTML.indexOf('The username or password is incorrect.');

if(msgPos !== false && msgPos !== -1) {
  console.log('we have a login alert'); 
}

＆＃13;

.alert-body {
  background: lightblue;
  height: 20px;
}

＆＃13;

<div class="alert-body alert-body-visible" ng-class="{'alert-body-visible': animation, 'alert-green-visible': animation2, 'active' : animation2active}"><span ng-bind-html="alertMessage">The username or password is incorrect.</span></div>

＆＃13;

如何使用Javascript在类元素中搜索文本

1 个答案: