需要在可编辑的 iframe 中选择所有 A 标签并将它们添加属性“类”答案

【问题标题】：Need get all A tags in selection in editable iframe and add them attribute "class"需要在可编辑的 iframe 中选择所有 A 标签并将它们添加属性“类”
【发布时间】：2011-10-05 18:36:06
【问题描述】：

我有一个可编辑的<iframe>，其中包含一些 HTML 代码。我需要在我的范围内获取所有<a> 标签。我试过这段代码，但它不起作用：

var select = document.getElementById(iframe_id).contentWindow.getSelection();
var range = select.getRangeAt(0);
//HERE I WANT TO FIND ALL TAGS IN THIS RANGE AND IF IT "A" - ADD NEW ATTRIBUTE "CLASS". SOMETHING LIKE THIS       
var parent = rng.commonAncestorContainer;

for(var i=0; i<parent.childNodes.length; i++)
{
    if(parent.childNodes[i].tagName.toLowerCase() == "a")
        parent.childNodes[i].setAttribute("class", "href_class");
}

【问题讨论】：

标签： firefox tags range getselection

【解决方案1】：

您可以使用getElementsByTagName() 获取范围容器的所有<a> 标签，然后使用range.compareBoundaryPoints() 检查每个标签是否实际上属于该范围（可能只选择容器的一部分）。像这样的：

var links = rng.commonAncestorContainer.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
  var linkRange = document.createRange();
  linkRange.selectNode(links[i]);
  if (rng.compareBoundaryPoints(Range.START_TO_START, linkRange) <= 0 && rng.compareBoundaryPoints(Range.END_TO_END, linkRange) >= 0)
  {
    links[i].className = "href_class";
  }
}

【讨论】：

感谢您的回答，但此代码运行不正确。例如，我在可编辑的 iframe 中有四个字符串 '
First string, first string, first string,

Second string, second string, second string, second string

更多字符串，更多字符串，更多字符串

结束字符串，结束字符串
'我在设计模式下在 iframe 中选择了第二个和第三个字符串，选择后我想从 MY SELECTION 中获取所有标签 (a)，而不是从 BODY
@IlyaBazhinov：你真的看过代码吗？它对我来说可以正常工作，请参阅jsfiddle.net/ZeNnQ/1。它只选择完全包含在范围内的元素。
Wladimir - 尝试选择第二行和第三行（仅链接）。铬在哪里没有结果。而且您的代码仅显示 url 值，而不是 iframe 选择中修改的 'a' 属性？
@IlyaBazhinov：它在 Firefox 和 Chrome 中都能正常工作。请注意，它仅适用于完全在选择范围内的链接 - 如果您想要不同的行为，您需要更改 compareBoundaryPoints() 检查。 JSFiddle 示例出于演示目的显示 URL - 我的答案中的代码修改了类。我严重建议你试着去理解代码而不是盲目地复制它。
对不起我的英语不好，但我认为你不明白我的问题......你的解决方案不是我需要的（（谢谢

【解决方案2】：

这应该让您朝着正确的方向开始。此代码不对 iframe、选择、范围或列表进行任何空引用检查。

function addAnchorClass(targetFrameId) {

        var targetIframe = document.getElementById(targetFrameId).contentWindow;
        var selection = targetIframe.getSelection();
        var range = selection.getRangeAt(0);
        var alist = range.commonAncestorContainer.getElementsByTagName("a");

        for (var i=0, item; item = alist[i]; i++) {
          if (selection.containsNode(item, true) ) {
            item.className += "PUT YOUR CSS CLASS NAME HERE";
          }
        }
      }

【讨论】：

这没有回答 OP 的问题，他询问了关于迭代范围内的节点。