[英]JavaScript How to extract link from selected text
I looking-for solution how to extract url from selected text using window.getSelection
and document.selection
.我正在寻找如何使用window.getSelection
和document.selection
从选定文本中提取 url 的解决方案。
Text to select look that:要选择的文本看起来:
<p>Lorem Ipsum is <a href="http://example.com">simply <b>dummy</b> text</a> of the printing and typesetting industry.</p>
Selected text (selected by user) to extract link:选择文本(由用户选择)以提取链接:
Option 1 (include text and text between a tags):选项 1(包括文本和标签之间的文本):
Ipsum is simply dummy text of
Option 2 (select text and fragment of link):选项 2(选择文本和链接片段):
Ipsum is simply
The function should be return http://example.com
该函数应返回http://example.com
It's hard to write up for cross-browser function.跨浏览器功能很难写。 See How to bind a handler to a selection change on window?请参阅如何将处理程序绑定到窗口上的选择更改? . .
We should capture some events like mousedown
, mouseup
, touchstart
, touchend
.我们应该捕获一些事件,如mousedown
、 mouseup
、 touchstart
、 touchend
。 The combination of these event may be fine.这些事件的组合可能很好。
function addEvent(elem, event, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else {
elem.attachEvent('on' + event, func);
}
}
Next is the getSelectedHTML()
using window.getSelection
or document.selection
.接下来是使用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;
}
This code should be checked especially with old browsers.尤其应使用旧浏览器检查此代码。
Here is the sample fiddle: http://jsfiddle.net/tokkonoPapa/CQ63a/这是示例小提琴: http : //jsfiddle.net/tokkonoPapa/CQ63a/
I'm sorry if I misunderstood the question, but here is my suggestion.如果我误解了这个问题,我很抱歉,但这是我的建议。
Have a function and pass it the selected HTML, and have it handle it like this.有一个函数并将选定的 HTML 传递给它,并让它像这样处理它。
function FindLink(str){
// str='<p>Lorem Ipsum is <a href="http://example.com">simply <b>dummy</b> text</a> of the printing and typesetting industry.</p>';
// we get the index of the beginning of the <a> tag
var n = str.indexOf("<a") ;
// we find the href property of the <a> element, starting from the <a we found
var n2 = str.indexOf("href=\"", n) + 6;
// we find the end of the href property
n3 = str.indexOf("\">",n2);
// we find the substring starting at the beginning of the link and going for however many characters the link is
link = str.substr(n2,n3-n2);
return link;
}
I hope that helped!我希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.