获取突出显示/选定的文本

2020/09/30 16:41 · javascript ·  · 0评论

是否可以通过使用jQuery等方式在网站的段落中获得突出显示的文本?

获取用户选择的文本相对简单。涉及jQuery没有任何好处,因为您除了windowdocument对象外就不需要其他东西。

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

如果您对还将处理选择<textarea>和texty<input>元素的实现感兴趣,则可以使用以下内容。自从现在到2016年以来,我省略了IE <= 8支持所需的代码,但是我已经在SO的许多地方发布了有关该代码的内容。

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};
Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>

通过以下方式获取突出显示的文本:

window.getSelection().toString()

当然,对以下情况也有特殊待遇:

document.selection.createRange().htmlText

如果您使用的是chrome(无法验证其他浏览器),并且文本位于同一DOM元素中,则此解决方案有效:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

使用window.getSelection().toString()

您可以在developer.mozilla.org上阅读更多内容

是的,您可以使用简单的HMTL代码段来做到这一点:(请注意,此处给出的代码段使用了VueJs)

document.addEventListener('mouseup', event => {  
    if(window.getSelection().toString().length){
       let exactText = window.getSelection().toString();        
    }
}
本文地址:http://javascript.askforanswer.com/huoqutuchuxianshi-xuandingdewenben.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!