2016-04-27 5 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

これは本当に私を助けてくれ、ありがとうございました。 –

関連する問題