如何知道选择中是否有链接元素

问题描述

在Javascript中，我想确定一个元素（例如 A 元素）是否存在于给定范围/ textRange内。目的是确定用户的当前选择是否包含一个链接。我正在构建一个丰富的文本编辑器控件。

范围对象有一个commonAncestorContainer（W3C）或parentElement（）（Microsoft）方法，它返回所有元素的最接近的常用字符串在范围内。但是，在元素的内部查找元素将不起作用，因为这个共同的祖先也可能包含不在该范围内的元素，因为该范围可以开始或结束

$ b

如何实现这一点？

解决方案

p>我结束了这样一个解决方案：

  var findinselection = function（tagname，container）{
 var 
i，len，el，
 rng = getrange（），
 comprng，
 selparent; 
 if（rng）{
 selparent = rng.commonAncestorContainer || rng.parentElement（）; 
 //寻找一个元素* *所选范围
（el = selparent; el！== container; el = el.parentNode）{
 if（el.tagName& & el.tagName.toLowerCase（）=== tagname）{
 return el; 
} 
} 
 //在*范围内寻找一个元素
 if（！rng.collapsed&&（rng.text === undefined || rng.text）& 
 selparent.getElementsByTagName）{
 el = selparent.getElementsByTagName（tagname）; 
 comprng = document.createRange？ 
 document.createRange（）：document.body.createTextRange（）; 
 for（i = 0，len = el.length; i  
 //确定元素el [i]是否在范围
 if （document.createRange）{// w3c 
 comprng.selectNodeContents（el [i]）; 
 if（rng.compareBoundaryPoints（Range.END_TO_START，comprng）< 0&&$&
 rng.compareBoundaryPoints（Range.START_TO_END，comprng）> 0）{
 return el [i ]。 
} 
} 
 else {// microsoft 
 comprng.moveToElementText（el [i]）; 
 if（rng.compareEndPoints（StartToEnd，comprng）< 0&&&b $ b rng.compareEndPoints（EndToStart，comprng）> 0）{
 return el [i ]。 
} 
} 
} 
} 
} 
}; 
  

其中getrange（）是我的另一个函数，可以将当前选择作为范围对象。 p>

要使用，请像

  var link = findselection（'a '，编辑）; 
  

编辑器是可设定内容的元素，或设计模式iframe中的正文。

In Javascript, I'd like determine whether an element, say an A element, exists inside a given range/textRange. The aim is to determine if the user's current selection contains a link. I am building a rich text editor control.

The range object has a commonAncestorContainer (W3C) or parentElement() (Microsoft) method which returns the closest common anscestor of all elements in the range. However, looking inside this element for A elements won't work, since this common ancestor may also contain elements that aren't in the range, since the range can start or end part way through a parent.

How would you achieve this?

解决方案

I ended up going with a solution like this:

        var findinselection = function(tagname, container) {
            var
                i, len, el,
                rng = getrange(),
                comprng,
                selparent;
            if (rng) {
                selparent = rng.commonAncestorContainer || rng.parentElement();
                // Look for an element *around* the selected range
                for (el = selparent; el !== container; el = el.parentNode) {
                    if (el.tagName && el.tagName.toLowerCase() === tagname) {
                        return el;
                    }
                }
                // Look for an element *within* the selected range
                if (!rng.collapsed && (rng.text === undefined || rng.text) &&
                    selparent.getElementsByTagName) {
                    el = selparent.getElementsByTagName(tagname);
                    comprng = document.createRange ?
                        document.createRange() : document.body.createTextRange();
                    for (i = 0, len = el.length; i < len; i++) {

                        // determine if element el[i] is within the range
                        if (document.createRange) { // w3c
                            comprng.selectNodeContents(el[i]);
                            if (rng.compareBoundaryPoints(Range.END_TO_START, comprng) < 0 &&
                                rng.compareBoundaryPoints(Range.START_TO_END, comprng) > 0) {
                                return el[i];
                            }
                        }
                        else { // microsoft
                            comprng.moveToElementText(el[i]);
                            if (rng.compareEndPoints("StartToEnd", comprng) < 0 &&
                                rng.compareEndPoints("EndToStart", comprng) > 0) {
                                return el[i];
                            }
                        }
                    }
                }
            }
        };

Where getrange() is another function of mine to get the current selection as a range object.

To use, call it like

var link = findselection('a', editor);

Where editor is the contenteditable element, or body in a designmode iframe.

这篇关于如何知道选择中是否有链接元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！