我正在寻找如何使用 window.getSelection
和 document.selection
从所选文本中提取 url 的解决方案。
要选择的文本看起来:
<p>Lorem Ipsum is <a href="http://example.com">simply <b>dummy</b> text</a> of the printing and typesetting industry.</p>
要提取链接的选定文本(由用户选择):
选项 1(包括标签之间的文本和文本):
Ipsum is simply dummy text of
选项 2(选择文本和链接片段):
Ipsum is simply
函数应该返回http://example.com
最佳答案
跨浏览器功能很难写。参见 How to bind a handler to a selection change on window? .
我们应该捕获一些事件,如mousedown
、mouseup
、touchstart
、touchend
。这些事件的组合可能没问题。
function addEvent(elem, event, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else {
elem.attachEvent('on' + event, func);
}
}
接下来是使用 window.getSelection
或 document.selection
的 getSelectedHTML()
。
function getSelectedHTML(event) {
// http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html
var range = window.getSelection ? window.getSelection() /* W3C */
: document.getSelection ? document.getSelection() /* redundant? */
: document.selection ? document.selection.createRange() /* IE */
: null;
if (range) {
if (range.getRangeAt) {
range = range.getRangeAt(0);
} else if (range.setStart) { // Safari 1.3
// Create range by itself
range.setStart(range.anchorNode, range.anchorOffset);
range.setEnd(range.focusNode, range.focusOffset);
} else {
// IE is already reange
}
var html = null, link = null;
if (range.cloneContents) {
var dummy = document.createElement('div');
dummy.appendChild(range.cloneContents());
html = dummy.innerHTML;
} else {
html = range.htmlText; /* IE */
}
if (html) {
link = html.match(/<a.*?href\s*?=['"](.*?)['"]/);
return link ? link[1] : null;
}
}
return null;
}
应该检查此代码,尤其是在使用旧浏览器时。
这是示例 fiddle :http://jsfiddle.net/tokkonoPapa/CQ63a/
关于JavaScript 如何从选定的文本中提取链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18418533/