用其 innerHTML 替换锚点

Posted 2023-05-07

【中文标题】用其 innerHTML 替换锚点

【英文标题】：Replace an anchor with its innerHTML

【发布时间】：2010-12-14 00:31:02

【问题描述】：

我想用它的innerhtml替换一个链接，它是怎么做的？

例子：

Bla bla bla <a href="#nogo">No link here</a> bla bla bla

必须成为

Bla bla bla No link here bla bla bla

试图用其 innerHTML 替换节点，但我无法在节点本身中获取文本..

我想我必须使用正则表达式，但我不知道怎么做。

编辑：感谢大家的快速回复！我似乎仍然无法正确处理。似乎还有更多事情要做。

我也在使用原型 js。

我收到了一些可能包含链接的文本。如果文本包含链接，则应将其替换为 innerHTML。 它看起来像这样：

<td id="text">This is some text <a href="/link/Go_%28To%29" title="Go (to)">goto</a>. Some more text.</td>

我尝试使用 hasChildNodes() 检查文本是否包含链接，但它始终返回 yes，即使文本不包含链接或其他元素也是如此。所以我想也许文本也被认为是一个节点并尝试了 childElements[1]。那返回未定义。所以也许链接是文本节点的一个节点。没有！ 我正在抓取这些数据并评估 JSON，所以奇怪之处可能来自于此。不过，在响应的其余部分中遍历 DOM 进展顺利..

但是当我提醒时

$('text').childElements()[0]

实际的 href 收到警报！ (localhost//link/Go_%28To%29)

$('text'.childElements()[0].up() 让我找到实际的 td 父元素。

所以我正在使用

if($('text').childElements()[0])

检查文本是否包含链接。

我想这有点跑题了，但我实际上无法正确使用 a 元素。有小费吗？ 也许正则表达式是最好的选择？

【问题讨论】：

你有什么参考点吗？像包装跨度或 div 或链接的 ID（如果有的话）？

您是否有任何要求保留可能在链接本身内部的任何html？例如<a href="..."><span>foo</span></a>?

不，不存在链接内有html的情况。

Can you provide some examples of why it is hard to parse XML and HTML with a regex?的可能重复

RegEx match open tags except XHTML self-contained tags的可能重复

【参考方案1】：

试试这个：

var aElems = document.getElementsByTagName("a");
for (var i=0, n=aElems.length; i<n; ++i) 
    var elem = aElems[i];
    elem.parentNode.replaceChild(document.createTextNode(elem.innerHTML), elem);

【参考方案2】：

将outerHTML 设置为innerHTML...

window.onload = function() 
  var ancs = document.getElementsByTagName("A");

  for(var i = 0; l = ancs.length; i < l; i++) 
    var anc = ancs[i];
    if(anc.href.substring(0, 1) == "#")
      anc.outerHTML = anc.innerHTML;
  

【讨论】：

outerHTML??不知道那个...虽然似乎只有 IE，但这里有一个 FF 解决方法：snipplr.com/view/5460/outerhtml-in-firefox

【参考方案3】：

我强烈建议使用其中一个 javascript 库来完成此类工作。

这是一个使用 Prototype 的单行代码，可以解决问题：

$$('a').each( function( a )  a.replace( a.innerHTML )  )

它只是遍历页面中的每个 标记并将其替换为它的 innerHTML。

jQuery 也非常适合这类事情。

【讨论】：

此方法是否也适用于尚未附加到 DOM 的对象？它对我不起作用，但无论如何我也无法获得锚。

不，恐怕您必须在加载 DOM 后运行它。

【参考方案4】：

或者另一种方式，中和链接（没有 jquery，我不喜欢它）：

创建测试链接：

javascript:var a=document.createElement("a");a.href="#nogo";a.innerText="NOGO";document.body.appendChild(a);void(0);

并取消设置 href 属性：

javascript:for(var i=0;i<document.links.length;i++)if(document.links[i].hash.toLowerCase()=="#nogo")document.links[i].removeAttribute("href");void(0);

注意，链接仍然有它的样式，你也必须重置它

【参考方案5】：

最后我用丑陋的replace(/<\/?[^>]+(>|$)/g, "\n") 解决了这个问题。还有很多其他的事情我没有记录好，这是我的错。

【参考方案6】：

简而言之，这可以完成你的工作：

var a = document.links;

for( var x = 0; x < a.length; x++ )

a[x].outerHTML = a[x].innerHTML; x-- ;

或者代替前面的悖论，可以使用一些“纯脚本魔法”，或者未来证明经典：

var a = document.links;
while( a.length > 0 ) a[0].outerHTML = a[0].innerHTML