如何选择 <div> 阻止文本内？
[英]How to select a <div> block inside a text?
问题描述
I have a text composed of two <div> inside one <body> saved as raw_text as following: 
我有一个由两个<div>组成的文本，其中一个<body>保存为raw_text ，如下所示：
var raw_text = "<body><div>This is the 'div' text that I don't want.</div> <div>This is the 'div' text that I want to print.</div></body>";
I need a script for print on the screen only the <div> present in raw-text that include a certain string. 我只需要一个脚本来在屏幕上打印，只显示原始文本中包含特定字符串的<div> 。
if the string wanted is: 如果想要的字符串是：
var x = "that I want";
the script should take: 该脚本应采用：
<div>This is the 'div' text that I want to print.</div>
and the output should be: 输出应为：
This is the 'div' text that I want to print.
3 个解决方案
解决方案1
1 已采纳 2016-10-08 18:29:23
This is the proper way to do it: 这是执行此操作的正确方法：
- Use a DOM parser 使用DOM解析器
- Iterate the text nodes 迭代文本节点
- Check if they contain the desired string 检查它们是否包含所需的字符串
var html = "<body><div>This is the 'div' text that I don't want.</div> <div>This is the 'div' text that I want to print.</div></body>"; var x = "that I want"; var doc = new DOMParser().parseFromString(html, 'text/html'); var it = doc.createNodeIterator(doc.body, NodeFilter.SHOW_TEXT); var node; while (node = it.nextNode()) if(node.nodeValue.includes(x)) { console.log(node.nodeValue); break; }
解决方案2
0 2016-10-08 17:23:44
var raw_text = "<body><div>This is the 'div' text that I don't want.</div> <div>This is the 'div' text that I want to print.</div></body>";
var x = "that I want";
var homework_solution = raw_text.match(new RegExp("<div>([^<>]*?"+x+"[^<>]*?)</div>"))[1];
This should do the job. 这应该做的工作。 The regex could possibly be made a bit more robust. 正则表达式可能会变得更强大。
The "proper" way to do this would be to use DOMParser to search for the node you want. 执行此操作的“正确”方法是使用DOMParser搜索所需的节点。
解决方案3
0 2016-10-08 18:01:19
You can use jQuery to convert your string to proper DOM elements, and then parse them easily, as @Retr0spectrum says on their comment. 您可以使用jQuery将字符串转换为适当的DOM元素，然后轻松解析它们，如@ Retr0spectrum在其评论中所述。 You have the HTML in a plain string: 您将HTML包含在纯字符串中：
var htmlString = "<body><div>This is the 'div' text that I don't want.</div> <div>This is the 'div' text that I want to print.</div></body>";
Now you have to: 现在您必须：
- parse it to DOM, 解析为DOM，
- filter the elements, and 过滤元素，并且
- get the text 得到文字
Like this: 像这样：
// Process the string through jQuery so it parses the DOM elements
var dom = $(htmlString);
// and then we convert to array...
var array = dom.toArray();
// ... so we can filter it, using RegEx to find the
// <div>(s) we are interested in:
var matchingDivs = array.filter(function (div, i) {
return $(div).text().match(/that I want/g) !== null;
});
// we pop the last matched div from the filtered array (the first
// one would also work, since normally you will find just one)
var theDiv = matchingDivs.pop();
// Then get the <div>'s text:
var theText = selectedDiv.textContent;
The beautiful thing is you can chain all the methods so you can write the above like this: 美丽的是，您可以链接所有方法，因此可以这样编写上面的代码：
var theText = $(htmlString).toArray().filter(function (div, i) {
return $(div).text().match(/that I want/g) !== null;
})[0].textContent;
Note: In the chained methods example I took the first element instead of the last one, using the bracket operator [0] instead of pop() . 注意：在链接方法示例中，我使用方括号运算符[0]代替pop()来获取第一个元素，而不是最后一个元素。
Hope this helps understanding how it works. 希望这有助于了解其工作原理。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.