英文:
How to modify selection to the previous and next space or new line
问题
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
$ ('button'). on ('click', function () {
const selection = window.getSelection();
selection？.modify('move'，'backward'，'word');
selection？.modify('extend'，'forward'，'word');
console.log(selection.toString());
});
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre contenteditable>
https://www.youtube.com/watch?v=vEQ8CXFWLZU
https://www.youtube.com/watch?v=vEQ8CXFWLZU
lorem ipsum https://www.youtube.com/watch?v=vEQ8CXFWLZU
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
</pre>
<button>点击</button>
<!-- 结束代码片段 -->
将光标放在YouTube URL内
单击按钮后，我需要在控制台中获取整个URL，而不仅仅是一部分
换句话说，我需要像这样的东西：
selection？.modify（'move'，'backward'，'到前一个空格或新行'）;
selection？.modify（'extend'，'forward'，'到下一个空格或新行'）;
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('button').on('click', function(){
const selection = window.getSelection();
selection?.modify('move', 'backward', 'word');
selection?.modify('extend', 'forward', 'word');
console.log(selection.toString());
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre contenteditable>
lorem ipsum https://www.youtube.com/watch?v=vEQ8CXFWLZU
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
</pre>
<button>CLICK</button>
<!-- end snippet -->
Place the cursor inside a youtube url
Clicking on a button I need the entire url in console, and not just a part
In other words I need something like this:
selection?.modify('move', 'backward', 'to the previous space or new line');
selection?.modify('extend', 'forward', 'to the next space or new line');
答案1
得分: 2
使用正则表达式，您可以设置您的规则。
$('button').on('click', function() {
const selection = window.getSelection();
let [bws, aws] = [false, false];
let [
[bn, bo],
[an, ao]
] = [
[selection.anchorNode, selection.anchorOffset],
[selection.focusNode, selection.focusOffset]
]
.sort(function(aa, bb) {
return aa[1] - bb[1];
});
while (!bws && 0 < bo) {
selection.setBaseAndExtent(bn, --bo, an, ao);
if ((bws = (-1 !== selection.toString().search(/\r?\n| /)))) {
++bo;
}
}
while (!aws && an.length >= ao + 1) {
selection.setBaseAndExtent(bn, bo, an, ++ao);
if ((aws = (-1 !== selection.toString().search(/\r?\n| /)))) {
--ao;
}
}
selection.setBaseAndExtent(bn, bo, an, ao);
console.log(selection.toString());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre contenteditable>
https://www.youtube.com/watch?v=vEQ8CXFWLZU
https://www.youtube.com/watch?v=vEQ8CXFWLZU
lorem ipsum https://www.youtube.com/watch?v=vEQ8CXFWLZU
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
</pre>
<button>CLICK</button>
英文:
With the help of Regex you can set your rule.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('button').on('click', function() {
const selection = window.getSelection();
let [bws, aws] = [false, false];
let [
[bn, bo],
[an, ao]
] = [
[selection.anchorNode, selection.anchorOffset],
[selection.focusNode, selection.focusOffset]
]
.sort(function(aa, bb) {
return aa[1] - bb[1];
});
while (!bws && 0 < bo) {
selection.setBaseAndExtent(bn, --bo, an, ao);
if ((bws = (-1 !== selection.toString().search(/\r?\n| /)))) {
++bo;
}
}
while (!aws && an.length >= ao + 1) {
selection.setBaseAndExtent(bn, bo, an, ++ao);
if ((aws = (-1 !== selection.toString().search(/\r?\n| /)))) {
--ao;
}
}
selection.setBaseAndExtent(bn, bo, an, ao);
console.log(selection.toString());
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre contenteditable>
lorem ipsum https://www.youtube.com/watch?v=vEQ8CXFWLZU
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
https://www.youtube.com/watch?v=vEQ8CXFWLZU lorem ipsum
</pre>
<button>CLICK</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论