如何使用JavaScript从HTML中查找元素后面的特定字符串并发出警告
如何使用JavaScript从HTML中查找元素后面的特定字符串并发出警告
提问于 2019-06-30 11:35:56
我在一个变量上有一些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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-06-30 11:50:49
你有一些问题。您不能像正在做的那样在字符串上运行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>
Stack Overflow用户
发布于 2019-06-30 11:43:05
你考虑过使用jQuery吗？
$("li:contains('Application Begin')").parent();Stack Overflow用户
发布于 2019-06-30 11:43:29
如果您想使用jquery，您可以这样做：
- 将html转换为DOM。DOMParser -就像一种选择。
- 使用jQuery "contains“筛选器根据其内容查找HTML。
var parser = new DOMParser();
var wrapper = parser.parseFromString(complexArray, "text/html");
var data = $(wrapper).find('li:contains("Application Begin")');
console.log(data[0].innerHTML); //Application Begin页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56824540
复制相关文章
相似问题
腾讯云开发者
