javascript - 如何使用 JavaScript 从 HTML 数据中查找后跟特定字符串的元素并发出警报

Question

我有一些HTML变量上的数据，我需要找到特定的 HTML元素后跟一些字符串。

这是我的代码 JavaScript

var complexArray = "<li>some content</li><li>Application Begin</li>"
var data = complexArray.querySelectorAll('li').text('Application Begin').parentElement;

alert (data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

我的预期输出是:<li>Application Begin</li>

Answer 1

您有一些问题。您无法像现在这样在字符串上运行 DOM 方法。您首先需要将字符串解析为 DOM 元素。为了将其解析为 DOM 元素，您的字符串首先需要是有效的 HTML，这意味着它需要包装在 <ul> 中。 (或 <ol> )标签(因为 <li> 标签不能是独立的)。您可以使用 DOMParser 来执行此操作:

var complexArray = "<li>some content</li><li>Application Begin</li>"
var doc = new DOMParser().parseFromString(`<ul>${complexArray}</ul>`, "text/xml");

现在doc代表你的 DOM 元素，你可以使用 DOM 方法，例如 querySelectorAll() 。

使用查询选择器时，您也无法查询文本，但是，您可以使用 .find()从找到的查询结果中获取特定元素:

var complexArray = "<li>some content</li><li>Application Begin</li>";
var doc = new DOMParser().parseFromString(`<ul>${complexArray}</ul>`, "text/xml");

var data = [...doc.querySelectorAll('li')].find(({textContent:t}) => 
             t === "Application Begin"
           );

console.log(data.outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

或者，如果您想检查您的字符串内容是否包含您的搜索字符串，您可以使用 .includes :

var complexArray = "<ul><li>some content</li><li>Application Begin <b>30/07/2017</b></li></ul>";
var doc = new DOMParser().parseFromString(complexArray, "text/xml");

var data = [...doc.querySelectorAll('li')].find(({textContent:t}) => 
             t.includes("Application Begin")
           );

console.log(data.outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>