使用JavaScript从HTML字符串中提取文本
Extract the text out of HTML string using JavaScript
我正在尝试使用JS函数(字符串作为参数传递)获取HTML字符串的内部文本。这是代码:
function extractContent(value) {
var content_holder = "";
for (var i = 0; i < value.length; i++) {
if (value.charAt(i) === '>') {
continue;
while (value.charAt(i) != '<') {
content_holder += value.charAt(i);
}
}
}
console.log(content_holder);
}
extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
问题是console(*content_holder* stays empty)
上没有打印任何内容。我认为问题是由===
运算符引起的。
创建一个元素,将HTML存储在其中,并获得其textContent
:
function extractContent(s) {
var span = document.createElement('span');
span.innerHTML = s;
return span.textContent || span.innerText;
};
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
这里有一个版本允许您在节点之间有空格,尽管您可能只希望块级元素有空格:
function extractContent(s, space) {
var span= document.createElement('span');
span.innerHTML= s;
if(space) {
var children= span.querySelectorAll('*');
for(var i = 0 ; i < children.length ; i++) {
if(children[i].textContent)
children[i].textContent+= ' ';
else
children[i].innerText+= ' ';
}
}
return [span.textContent || span.innerText].toString().replace(/ +/g,' ');
};
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>. Nice to <em>see</em><strong><em>you!</em></strong>"));
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>. Nice to <em>see</em><strong><em>you!</em></strong>",true));
单行(更准确地说,一条语句)版本:
function extractContent(html) {
return new DOMParser()
.parseFromString(html, "text/html")
.documentElement.textContent;
}
textContext是一种非常好的技术,可以实现所需的结果,但有时我们不想加载DOM。因此,简单的解决方法是使用以下正则表达式:
let htmlString = "<p>Hello</p><a href='http://w3c.org'>W3C</a>"
let plainText = htmlString.replace(/<[^>]+>/g, '');
使用此regax删除html标记,并仅将内部文本存储在html 中
它显示HelloW3c只检查
var content_holder = value.replace(/<(?:.|'n)*?>/gm, '');
试试这个:-
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function extractContent(value){
var div = document.createElement('div')
div.innerHTML=value;
var text= div.textContent;
return text;
}
window.onload=function()
{
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
};
</script>
</body>
</html>
对于Node.js
这将使用jsdom
库,因为node.js不像浏览器中那样具有dom功能。
import * as jsdom from "jsdom";
const html = "<h1>Testing<h1>";
const text = new jsdom.JSDOM(html).window.document.textContent;
console.log(text);
您可以将它临时写入位于页面外的块级元素。。像这样的东西:
HTML:
<div id="tmp" style="position:absolute;top:-400px;left:-400px;">
</div>
JavaScript:
<script type="text/javascript">
function extractContent(value){
var div=document.getElementById('tmp');
div.innerHTML=value;
console.log(div.children[0].innerHTML);//console out p
}
extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
</script>
使用jQuery,我们可以在jQuery中添加逗号分隔的标记。
var readableText = [];
$("p, h1, h2, h3, h4, h5, h6").each(function(){
readableText.push( $(this).text().trim() );
})
console.log( readableText.join(' ') );
使用match()
函数调出HTML标签
const text = `<div>Hello World</div>`;
console.log(text.match(/<[^>]*?>/g));
根据Rick Hitchcock的答案和KevBot的答案,我找到了最好的方法:
function getTextLoop(element: HTMLElement | ChildNode) {
const texts = [];
Array.from(element.childNodes).forEach((node) => {
if (node.nodeType === 3) {
texts.push(node.textContent.trim());
} else {
texts.push(...getTextLoop(node));
}
});
return texts;
}
function innerText(element: HTMLElement) {
return getTextLoop(element).join(" ");
}
export function extractContent(s, space) {
var span = document.createElement("span");
span.innerHTML = s;
if (space) {
span.innerHTML = innerText(span);
}
return [span.textContent || span.innerText].toString().replace(/ +/g, " ");
}
示例:
extractContent("<div>foo<div>bar</div></div>", true); // foo bar
您需要数组来保存值
function extractContent(value) {
var content_holder = new Array();
for(var i=0;i<value.length;i++) {
if(value.charAt(i) === '>') {
continue;
while(value.charAt(i) != '<') {
content_holder.push(value.charAt(i));
console.log(content_holder[i]);
}
}
}
}extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
相关文章:
- 使用 jQuery 从选择标签中抓取文本
- 如何从字符串中提取特定文本.最困难的部分是所需的文本会定期更改
- 使用 casperjs 抓取文本节点的最快方法
- 如何分析 XML 文件和抓取文本值
- 从 URL 中抓取文本和媒体
- Javascript从字符串中提取特定文本的最佳方法
- 使用 JavaScript 从锚标记中提取锚文本
- 用于从锚标签中提取锚文本的 Javascript
- 在提取的文本 JavaScript 中搜索关键字
- 从几乎相同的dom结构中提取内部文本
- 如何从URL中抓取文本并放置在JS数组中
- JS从文本框中抓取文本,传递给asp.net mvc ActionResult,但ActionResult参数显示为nu
- 如何在事件onclick中抓取文本
- 使用JavaScript书签从图像链接中提取alt文本
- 如何从文本src抓取文本
- 使用正则表达式提取特定文本
- Imacros从提取的文本中剪切TXT的一部分
- 从span标签中抓取文本
- jQuery迭代类元素,抓取文本,插入别处
- 从多个输入字段抓取文本