从字符串中按 ID 提取元素?

2023-12-27

我有一个包含以下文本的字符串:

<!DOCTYPE html>
<html>
<head>
    <title>ExtractDiv test</title>
</head>
<body>
    <p>Apples and oranges</p>
    <div id="main">
        <ul style="list-style-type: upper-roman">
            <li>&#196;pfel</li>
            <li>Birnen</li>
        </ul>
    </div>
    <p>Men and women</p>
</body>
</html>

现在我需要一个 JavaScript 函数来返回具有特定 ID 的 DOM 元素作为字符串从本文中,例如:

function ExtractElementByIdFromString(HTMLString, IdString)
{
  var ExtractedElement = ???(HTMLString, IdString);
  return ExtractedElement;
}

因此在这种情况下该函数的结果将是:

<div id="main">
    <ul style="list-style-type: upper-roman">
        <li>&#196;pfel</li>
        <li>Birnen</li>
    </ul>
</div>

这可能吗?


您可以使用本机解析 HTML 字符串DOM解析器 https://w3c.github.io/DOM-Parsing/#the-domparser-interface:

var str = "<!DOCTYPE……………" // your HTML string

var doc = new DOMParser().parseFromString(str, "text/html")

然后只需使用常规 DOM 方法:

console.log( doc.getElementById("main") )

请注意,使用 DOMParser 比在文档的 innerHTML 中的某个位置插入字符串更高效、更安全,因为只会创建结构 —<script>元素不会被执行,图像不会被加载,CSS不会尝试应用到它,不会发生渲染,等等。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从字符串中按 ID 提取元素? 的相关文章

  • 向下滚动时如何使图像移动?

    这是我想要实现的目标的示例 https www flambette com en https www flambette com en 我尝试过更改图像的 css 属性 但效果不能满足我的需求 我尝试过以下代码 mydocument on
  • Ember.js 数组作为模型的属性

    干杯 我有一些模型 它的一个属性是一个数组 但由于某些原因 我在服务器上使用 mongoDB 并且它是嵌入式模型和 ember data 的问题 我不能做这样的事情 App Foo DS Model extend numbers DS ha
  • Angular 7 Guard 重定向仅适用于双击

    问题是我已经实现了一个 Guard 旨在处理特定的目录 如果当前用户名的角色等于 2 它应该返回 true 如果没有 那么它不应该重定向 这是我的 app routing module ts 文件 问题出在 userlist 路径中 我们是
  • 使用 getElementById 在 javascript 中使用正则表达式进行 Html 表单验证?

    我想使用正则表达式验证 html 表单的示例模式 AAA 111 2222 aa 1234 目前 我的代码要么为所有输入返回 正确 要么为所有输入返回 不正确 并且我无法弄清楚我的问题出在哪里 var x document getEleme
  • Javascript 根据字段值任意排序数组

    所以我有一个对象数组 如下所示 var myArray priority low priority critical priority high 我需要以这种方式排序 1 关键 2 高和3 低 如何才能做到这一点 我建议使用一个对象来存储排
  • 如何防止在达到一定字符数后向文本区域输入内容?

    使用下面的代码 任何超过指定最大值的输入都将被删除 但这会产生一种效果 即键入字符后立即将其删除 我宁愿简单地阻止输入字符
  • Django 模板变量从 {% for %} 循环到 Javascript

    这是一个迭代记录的 Django 模板 每条记录都包含一个由 JS 函数填充的 div 为了让 JS 知道要做什么 它需要从每次 for 循环迭代中获取一个变量并使用它 我不知道具体如何实现这一目标或是否可能 我不知道 也许记录在单独的 J
  • 函数声明或函数表达式

    我刚刚在块作用域中定义函数时遇到了问题 考虑以下程序 try greet function greet alert Merry Christmas catch error alert error 我希望这个程序能够发出警报Merry Chr
  • 如何混淆或使 JavaScript 文件不可读?

    我的应用程序中有 JavaScript 脚本 其中包含 JavaScript 和 jQuery 函数 所有用户与我的应用程序的交互都是动态的 并且通过 jQuery 传递到应用程序 我意识到 当我在客户端运行我的应用程序时 客户端可以通过查
  • Django 1.7:如何使用 html/css 文件作为模板发送电子邮件

    从 Django 1 7 开始 可以send email 使用新参数 html message 不幸的是 没有关于如何使用它的全面指南 新手友好 或者至少我找不到它 我需要使发送的电子邮件变得漂亮 因此 我试图弄清楚如何将我的消息包含到 h
  • 是否可以从 webpack 中的文件名中删除特殊字符?

    长话短说 我的资产文件名中不能包含某些字符 例如连字符 我没有运气通过解析 webpack 文档来弄清楚是否可以使用正则表达式或类似的东西重命名文件 这样我就可以从我无法控制源文件名的 3rd 方包中删除任何连字符 我的超级天真的例子是这样
  • jVectorMap - 向下钻取地图 - 自定义背景

    我正在使用 jVectorMap 中的向下钻取地图 并且尝试将自定义背景颜色设置为地图的第二层 为了自定义主级别 我使用 main 参数 但我不知道如何将其扩展到地图的较低级别 提前致谢 马切伊 None
  • jQuery 显示/隐藏兄弟姐妹

    我有这段代码 旨在首先隐藏除第一个元素之外的所有相关元素 这个 做的不错啊接下来 它应该根据选择的项目显示 隐藏这些元素 但这部分不起作用 想法 jQuery accordion dl not first child hide hide a
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • 当内部图像缩放时,包裹 div 不会调整大小(窗口大小调整的结果)

    我希望我的图像随着窗口高度的变化而调整大小 同时保持包含的 div 收缩包裹图像 我尝试使用 div img src http akamaicovers oreilly com images 9780596806767 cat gif al
  • 使用重复模式捕获正则表达式

    我试图捕获字符串的所有部分 但我似乎无法正确处理 该字符串具有以下结构 1 22 33 中间有运算符的数字 可以有任意数量的术语 我想要的是 1 22 33 1 22 33 但我得到 1 22 33 22 33 我尝试过各种正则表达式 这是
  • 更改 CSS 样式表的选择器属性

    以下是我们传统上如何更改重复元素的样式 将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array
  • JavaScript 比较中应使用哪个等于运算符(== 与 ===)?

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我在用着JSLint http en wikipedia org wiki JSLint
  • ☺ 不在移动版本中呈现

    我如何获得特殊角色 笑脸在移动浏览器中正确呈现 li a href http goo gl GjxlI title target blank span style font size 20px span a li 它在大多数浏览器上显示为
  • 相当于 JavaScript 中 Ruby 的each_cons

    许多语言都曾提出过这个问题 但 javascript 却没有 Ruby 有方法Enumerable each cons https devdocs io ruby 2 5 enumerable method i each cons看起来像这

随机推荐

  • 我们如何对使用 cy.get() 获取的元素进行切片,然后仅对这些特定元素运行测试?

    cy get li slice 0 5 上面的代码行不起作用 因为它显示错误消息 类型 Chainable 上不存在属性 slice 有没有办法对我们获取的元素进行切片cy get 还有其他几种方法可以做到这一点 添加伪选择器 lt 5 取
  • 流行博客文章排名算法

    我正在建立一个博客聚合器 例如Techmeme http techmeme com它可以从多个博客中查找最受欢迎的帖子 与 Techmeme 不同 我首先从各种 RSS 源聚合博客文章 然后将标题和相关 URL 保存在数据库中 之后 我必须
  • 单击工具提示内容 vuetify

    大家 我有一个问题 可以点击工具提示内容来调用任何函数吗 当我的工具提示打开时 我想单击调用测试功能的范围
  • 光滑的轮播从右到左

    我已经设置了光滑的轮播来连续滚动 但是我需要向相反的方向滚动 添加 RTL 选项似乎不起作用 在这里小提琴 目前从左到右 http jsfiddle net mth2ghod http jsfiddle net mth2ghod funct
  • 要解密的数据超出了该模数的最大值 128 字节。 RSA解密c#

    我不知道如何在使用 X509 证书中的私钥解密文件时解决此异常 要解密的数据超出了该模数 128 字节的最大值 byte data File ReadAllBytes F enc test file1 txt X509Certificate
  • 本机库未在设备上运行

    我已将armeabi armeabi v7a 文件夹放入libs 文件夹中 而不是放入maven 存储库中 但我在使用 libgdx 时遇到以下错误 库 gdx backend jogl natives jar 包含不会在设备上运行的本机库
  • 获取特定 div 的 span 类内的文本

    我正在 T Mobile 网站上查找有关三星 Galaxy S9 的评论 我能够为 HTML 代码创建一个 Beautiful Soup 对象 但我无法获取 span 类中存在的评论文本 还需要遍历评论页面以收集所有评论 我尝试了 2 个代
  • jquery 调用 highcharts 生成错误 17

    我试图从 highcharts com 获取一个仪表 在我已经完成示例的页面上工作 但我看不出我做错了什么 如果有人能指出正确的方向 这是我的小提琴 高图仪表不工作 http jsfiddle net F6XUT 这是我的代码
  • Oracle:结合使用 ROWNUM 和 ORDER BY 子句更新表列

    我想用连续的整数填充表列 所以我考虑使用 ROWNUM 但是 我需要根据其他列的顺序填充它 例如ORDER BY column1 column2 不幸的是 这是不可能的 因为 Oracle 不接受以下声明 UPDATE table a SE
  • 使用高分辨率纹理优化 SceneKit 性能

    我是一位相当有经验的 iOS 开发人员 但完全是 SceneKit 新手 试图在基本应用程序中模拟一些行星 为此 我使用火星 金星等的高分辨率法线和漫反射贴图 应用于基本球体 他们工作了 它们看起来棒极了 正是我想要的 问题是 我得到了ki
  • Jquery 模式对话框禁用滚动条

    正如您在此链接中看到的 http jsbin com ozapol 9 http jsbin com ozapol 9 Jquery 在某些版本的 IE 和最新版本的 Chrome 上禁用滚动条 我还没尝试过其他的 有没有办法保持滚动条启用
  • 正则表达式中的命名捕获组

    我需要正则表达式的帮助来捕获以下字符串中的数字和连字符 一些文字和东西 200 1234EM 一些其他东西 它也可以不带连字符的部分出现 一些文本 123EM 其他文本 我需要在命名捕获组中使用 200 1234 或 123 我试过这个 b
  • 嵌入双引号的 CSV 解析

    我写了一个简单的 CSV 文件解析器 但看完之后有关 CSV 格式的 wiki 页面 http en wikipedia org wiki Comma separated values我注意到基本格式的一些 扩展 通过双引号专门嵌入逗号 我
  • 如何让 ActionController::Live Streaming 与 Thin 一起工作?

    Question 你能用吗thin with ActionController Live实现服务器端事件 SSE 和长轮询 如果是这样 怎么办 Context 虽然标题是重复的如何让 Rails 4 ActionController Liv
  • Python 2.6.6 中的小数和科学计数法问题

    我在处理十进制值时遇到困难 在某些情况下需要将其用于算术 而在其他情况下则需要将其用作字符串 具体来说 我有一份费率清单 例如 rates 0 1 0 000001 0 0000001 我使用它们来指定图像的压缩率 我最初需要将这些值作为数
  • 编辑数据时如何获取选定值 [codeigniter]

    当我编辑数据时 如何获取选定的值 但我仍然可以选择 codeigniter div class form group div
  • 当 DataFrame 列中的值以字符串开头时,使用 lambda 替换它们

    我有一个数据框 import pandas as pd import numpy as np x Value Test XXX123 XXX456 Test df pd DataFrame x 我想使用 lambda 将以 XXX 开头的值
  • mysqli::real_connect(): (HY000/2002): 连接被拒绝

    我使用 PHP Mysql 和 Codeigniter 版本 3 创建一个网站 然后将其托管在 iPage 上 当我实时上传时 我会更改配置文件 db default array dsn gt hostname gt 66 96 147 1
  • AndroidAnnotations如何在onCreate之后添加init代码

    如果我有一个活动定义为 EActivity R layout activity login public class LoginActivity extends Activity 这将为我创建 onCreate 方法 但我想在 onCrea
  • 从字符串中按 ID 提取元素?

    我有一个包含以下文本的字符串 p Apples and oranges p div ul li 196 pfel li li Birnen li ul div p Men and women p 现在我需要一个 JavaScript 函数来