使用 JavaScript 从 HTML 字符串中提取文本

2024-06-28

我试图使用 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 https://developer.mozilla.org/en-US/docs/Web/API/Node/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));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JavaScript 从 HTML 字符串中提取文本 的相关文章

  • 在没有 Flash 的情况下用 HTML / js 录制音频?

    从麦克风录制音频并将 ajax 发回服务器 真的不知道如何在 Flash 中做到这一点 并希望它保持简单 目前还没有浏览器实现WHATWG 设备 API http www whatwg org specs web apps current
  • JavaScript - babel-preset-env 不为 IE11 转换箭头函数

    我很难尝试配置 Babel 来转译 IE11 可以理解的代码 特别是箭头函数 跑步npx webpack mode development使用我的配置不会转换我的代码中的箭头函数 在eval 在生成的代码中的语句中 我可以看到所有实例都未转
  • 用零向左填充字符串[重复]

    这个问题在这里已经有答案了 我见过类似的问题here https stackoverflow com questions 388461 padding strings in java and here https stackoverflow
  • 如何在反应路由器的登录页面中隐藏导航栏

    我想隐藏登录页面中的导航栏 我确实做到了 但我在其他页面上看不到导航栏 此代码是 My App jsx 文件的一部分 我在 App 的状态中创造了历史 当路径名是 或 login 时 我会隐藏导航栏 有用 但随后我输入了 ID 和密码 然后
  • 如何在 Electron 中使窗口大小响应。 (打开应用程序时)

    我最近开始在 Electron 上制作一个应用程序 我想让窗口具有响应能力 例如 如果我在不同的屏幕上打开应用程序 它应该根据屏幕尺寸以全尺寸打开 我的代码 app on ready gt const htmlPath path join
  • 多个模板槽的相同槽内容

    在vuejs中 有没有一种方法可以为多个插槽设置相同的内容 而无需复制粘贴 So this
  • 我以为我了解范围

    有人可以告诉我为什么 x 的最后一次记录等于0而不是1 我想因为它是在函数之外声明的 所以它具有全局范围 然后在函数中它的值设置为1并且该值将保持原样一个全球性的 我知道函数内的第一个 x 值是全局的 因为没有 var 关键字声明的任何变量
  • Backbone.View:delegateEvents 未将事件重新绑定到子视图

    我已将这个问题分解为尽可能小的示例 即 它只是为了演示问题 不一定代表现实世界的场景 假设我有一个父视图 此处为 MainView 其中包含一个子视图 此处为 SubView 如果在任何时候我需要重新渲染父视图 从而重新渲染子视图 我就会丢
  • 纯 JavaScript 工具提示

    我正在尝试用纯 JavaScript 制作一个工具提示 显示在hover 就像 Stack Overflow 中将鼠标悬停在个人资料名称 a 上一样div显示 我尝试使用onmouseover onmouseout并添加了setTimeou
  • 使用 c out 标签时不会出现新行

    我将 n 附加到字符串中 当使用 s 标签文本区域时 已附加换行符并且数据逐行显示 但是当我使用 c out 标签时 数据显示在一行中 如何使用 c out 标签逐行显示 StringBuffer sb new StringBuffer f
  • 使用 CSS flexbox 重叠两个居中元素

    我试图将两个元素绝对居中于页面中间 一个元素在另一个元素后面 目的是让页面完全响应 中间有一个圆圈 后面有一个脉冲效果 这是一个小提琴 http jsfiddle net Fy8vD 2003 以下的 html body height 10
  • PySpark:根据与另一列中的字符串匹配的字典值创建新列

    我有一个数据框 A 如下所示 ID SOME CODE TITLE 1 024df3 Large garden in New York New York 2 0ffw34 Small house in dark Detroit Michig
  • 如何使用 $.ajax 发送 JSON 而不是查询字符串?

    有人可以简单地解释一下如何让 jQuery 发送实际的 JSON 而不是查询字符串吗 ajax url url dataType json I was pretty sure this would do the trick data dat
  • 检测滚动到 DIV 底部

    我想检测我是否到达了 div 的底部 我的 div 高度为 400px 溢出隐藏 我不知道正常高度但超过400px 我正在使用这段代码 但它不起作用 任何想法 if article txt scrollTop article txt hei
  • Javascript 或 Coffeescript 中的“Bucket Fill”算法

    我正在编写一个小coffeescript js应用程序 允许用户设计图标 16x16像素或32X32像素 该图标实际上是一个带有颜色单元的二维数组 单元格可以有颜色或为空 我希望用户能够使用 桶油漆 工具填充空白单元格 代表着 如果用户单击
  • CORS:为什么我的浏览器不发送 OPTIONS 预检请求?

    从我读到的内容来看CORS https en wikipedia org wiki Cross origin resource sharing 我理解它应该按如下方式工作 客户端的脚本尝试获取资源从服务器不同的起源 浏览器拦截这个请求并首先
  • 与基线和文本区域垂直对齐

    我试图让标签与文本区域中第一行文本的基线对齐 天真的尝试 div style display inline block div
  • React Native:当您的应用程序关闭时是否有回调函数?

    我有一个 setInterval 即使您关闭 而不是退出 应用程序也会继续运行 我想在我的应用程序关闭或设备进入睡眠状态时调用一个函数 以便清除 setInterval AppState 是你的朋友 看看AppState 的文档 https
  • JQuery 循环遍历动态元素并获取数据值

    我正在尝试使用可折叠面板来完成我的要求 sport on click function var thisId this attr id var thisChildren this sportlist thisChildren each fu
  • 如何水平和垂直对齐内联块

    什么是最好 最干净的使用CSS对齐 dates div位于标题的右侧 垂直于中间 I tried float right 但这不允许vertical align 我想避免使用浮动 所以我使用inline block 并使用相对定位 有没有更

随机推荐