如何在 JavaScript 中解析这段 innerHTML？

Posted 2023-05-07

【中文标题】如何在 JavaScript 中解析这段 innerHTML？

【英文标题】：How do I parse this piece of innerHTML in JavaScript?

【发布时间】：2014-09-24 17:42:07

【问题描述】：

我这样做了：

var blah = document.getElementById('id').getElementsByClassName('class')[0].innerhtml;

现在我在酒吧里有这个：

<a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(<a href="/domain/foobar.co.uk/">foobar.co.uk</a>)</span>

我想使用 JS（没有 jQuery）从 HTML 中读取字符串“Some text goes here”。我无权访问该网站的 HTML。我正在解析一个网页来为浏览器扩展注入 JS。

我是否只需将其解析为字符串并从 > 和

【问题讨论】：

那你为什么不选择锚点？

“现在我在酒吧里有这个”什么酒吧？有备用啤酒吗？

getElementsByClassName('class') 这试图找到一个具有class="class" 属性的元素你的意思是getElementsByClassName('title')

您是否总是要从锚标记中提取文本？如果是这样，为什么不直接获取它并访问它的textContent？

@PeeHaa 对不起。我的意思是废话。或变种。

【参考方案1】：

我假设您拥有的基本 HTML 标记：

<div id="id">
    <div class="class">
        <a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(<a href="/domain/foobar.co.uk/">foobar.co.uk</a>)</span>
    </div>
</div>

所以选择锚点并阅读文本

var theAnchorText = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0].textContent;

如果你需要支持 IE8

var theAnchor = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0];
var theAnchorText = theAnchor.textContent || theAnchor.innerText;

如果您使用的是现代浏览器，querySelector 会更简洁

var theAnchorText = document.querySelector("#id .class a").textContent;

【讨论】：

正在回答类似的问题，然后弹出

id='id' 在哪里？？

@Khalid 在 OP 问题的 javascript 部分：p 这可能不是真实的 ID，并且 OP 没有显示包含的 HTML

@PatrickEvans 你为什么会这么认为？ OP 选择了父元素并想要子元素的部分文本。

对不起，把 "Now I have this in bar:" 表示别的意思，而不是他拼错了bar，并且在他的blah 变量中有字符串

【参考方案2】：

您可以通过两种方式来处理。临时 DOM 元素上的正则表达式或 textContent：

var foo = "<b>bar</b>";

function regexpStrip(str) 
  return str.replace(/<[^>]*>/g, '');


function parseViaDOM(str) 
  var el = document.createElement('div');
  el.innerHTML = str;
  return el.textContent;


console.log(regexpStrip(foo)); // => "bar"
console.log(parseViaDOM(foo)); // => "bar"

【讨论】：

正则表达式与 HTML NO NO NO！ ***.com/questions/590747/…

@epascarello：链接错误。这是回答此类问题的正确人：***.com/a/1732454/648265

同意，正则表达式在 HTML 中不好。我的印象是他在上面给出的示例字符串就是在这种情况下，正则表达式条可以工作。但是对于任何更多的正则表达式都是邪恶的：imp：

@ivan_pozdeev 啊，通常我用谷歌搜索正确的，没有看就复制了网址:)