2016-04-27 29 views
0

我需要实现范围内的文本选择范围单击当前单词到段落中该句子的结尾。如何从当前单词到句子末尾的句子(。)段落中选择文本

例如:

Lorem存有简直是印刷排版行业的虚拟文本。 Lorem Ipsum已经...

是一段。当我点击虚拟时,选择将从虚拟到行业完成。下面的代码使我能够在单击时选择完整的段落。

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <style type="text/css"> 
     p { 
     font-family: monospace; 
     font-size: 1.5em; 
     }  
    </style> 
    </head> 

    <body> 

     <div id="autoselect"> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
    software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 

<script type="text/javascript"> 

    function SelectText(element) { 
    var doc = document, 
     text = doc.getElementById(element), 
     range, 
     selection; 
    if (doc.body.createTextRange) { 
     range = document.body.createTextRange(); 
     range.moveToElementText(text); 
     range.select(); 
    } else if (window.getSelection) { 
     selection = window.getSelection();   
     range = document.createRange(); 
     range.selectNodeContents(text); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 
$(function() { 

    $('p').click(function() { 
     SelectText('autoselect'); 
    }); 

}); 

</script> 
</body> 

回答

0

这拨弄做几乎你想要什么。可能需要稍微调整一下,但是它会从单击的单词中选择带有句点的第一个单词。处理空间可能会非常棘手,就像现在一样,它也会在该时间段之后选择空间。

https://jsfiddle.net/flatulentdog/86tfuff0/

var words = $("p:first").text().split(" "); 
    var text = words.join("</span> <span>"); 
    $("p:first").html("<span>" + text + "</span>"); 
    $("span").click(function() { 
    $(this).css("background-color","yellow"); 
    var next = $(this).next(); 
    while(next.text().indexOf('.') === -1) { 
     next.css("background-color","yellow"); 
     next = next.next(); 
    } 
    next.css("background-color","yellow"); 
    }); 
+0

谢谢你,这真的帮了我。 –