[英]Use javascript replace on text off-screen
例如，假設我有很長的文本
Lorem ipsum dolor坐下來，精致的adipistur elit。 在fermentum purus eu ipsum gravida sagittis。 Curabitur auctor，enim vitae accumsan viverra，tellus massa cursus diam，posuere mattis turpis metus risus。 Quisque eu nisl nulla，id fringilla velit。 Aenean tincidunt accumsan odio quis rhoncus。 Cras molestie cursus tincidunt。 Phasellus lectus lectus，pellentesque nec tempor nec，hendrerit et nulla。 Nunc blandit porttitor tellus。 Phasellus vulputate diam dui。 Mauris eget elit diam。 Sed mollis vestibulum mi，quis fringilla urna tempor non。
讓我們說從一開始
Cras molestie cursus tincidunt。 Phasellus lectus lectus，pellentesque nec tempor nec，hendrerit et nulla。 Nunc blandit porttitor tellus。 Phasellus vulputate diam dui。 Mauris eget elit diam。 Sed mollis vestibulum mi，quis fringilla urna tempor non。
文本不在屏幕上 - 您需要滾動才能看到它。 我想在屏幕外的所有文本上使用javascript的.replace() ，在這種情況下將以“Cras molestie”等開頭。我無法知道哪些文本是屏幕外的，哪些不是，所以我不能只修改HTML。
問題很古老，但我發現它很有趣;
我做了一個簡單的例子，只顯示屏幕區域中的部分文本，在用戶需要使用箭頭鍵的文本中導航（向下）。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>
<body>
<style>
body{
font-size: 40px;
}
#content{
float: left;
}
#full_content{
float: left;
visibility: hidden;
display: none;
}
</style>
<div id="content" >
</div>
<div id="full_content" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat purus, sollicitudin quis metus sit amet, ultrices hendrerit arcu. Nulla maximus pharetra tincidunt. Phasellus tincidunt semper sem tempus dapibus. Pellentesque ligula nibh, eleifend ut dictum sed, aliquam et orci. Curabitur tempor augue non turpis elementum imperdiet quis vel tortor. Quisque nec rutrum justo. Praesent scelerisque dignissim nisi. Etiam et gravida mi.
Pellentesque dolor sapien, imperdiet nec convallis non, dictum a arcu. In hac habitasse platea dictumst. Mauris consectetur ultrices nibh nec vestibulum. Etiam maximus, nunc in euismod bibendum, neque ex iaculis nisl, eu finibus velit turpis vitae lacus. Etiam feugiat accumsan viverra. Vivamus turpis libero, molestie at eleifend et, ultrices ut tellus. Donec ipsum tortor, sagittis in aliquet eget, ullamcorper hendrerit erat. Praesent nec mi finibus, malesuada ex et, commodo tortor. Maecenas justo mi, posuere ut laoreet egestas, pretium sit amet est. Curabitur orci tortor, rutrum eu tristique a, ullamcorper vitae augue. Aenean condimentum erat vitae ex semper bibendum. In hac habitasse platea dictumst. Ut ullamcorper quis magna at gravida. Integer eu commodo neque, sit amet ullamcorper nisi. Nullam magna nulla, faucibus a suscipit in, vulputate eu nulla.
Phasellus sit amet bibendum erat. Etiam maximus id lorem vel porttitor. Sed quis nibh feugiat, ultricies neque non, porta turpis. Donec viverra lacinia risus vitae vulputate. Fusce tincidunt luctus sem, tempus lobortis urna cursus a. Suspendisse egestas magna sit amet mattis fermentum. Sed tempor, ligula vel tincidunt efficitur, neque nisi faucibus purus, congue iaculis urna sem tincidunt sapien. Fusce aliquet euismod neque, id aliquam diam posuere id. Praesent aliquet orci id tincidunt pellentesque. Vivamus id metus id erat convallis dapibus. In fermentum nulla ex, vitae pulvinar diam semper eu. Donec sagittis purus eget maximus rhoncus. Curabitur laoreet arcu magna, vel luctus arcu auctor vitae.
Fusce aliquam ex felis, sed fringilla nisi finibus id. Sed porttitor arcu mauris, a semper mi ultrices in. Nam rutrum sem sed sagittis dictum. Donec massa tortor, tempor gravida neque sed, sagittis ultrices augue. Donec fringilla, augue eget semper fermentum, tellus dui rutrum nisi, vel lobortis eros diam at velit. Maecenas tellus dui, aliquet vitae placerat id, sollicitudin eget dui. Duis blandit est ac diam eleifend, vel dictum tortor tempor. Sed eu nulla ut nunc blandit euismod id ac nibh. Morbi massa nisi, aliquam nec ornare in, vulputate sit amet lorem. Duis cursus est quis porta blandit. Pellentesque ultricies convallis convallis. Vivamus tincidunt nisl sed purus lacinia, sagittis placerat magna vestibulum. Aliquam at ornare risus, non tempus justo. Etiam in elit pellentesque, interdum ipsum vitae, facilisis nibh.
Sed eu quam justo. Sed lobortis justo nec quam cursus fringilla. In iaculis, augue vitae bibendum mollis, urna mauris fermentum tortor, in feugiat nunc augue imperdiet ipsum. Quisque arcu enim, blandit sed odio non, feugiat egestas mi. Nunc sodales erat vitae turpis condimentum placerat nec et quam. Ut ipsum lorem, auctor in fermentum eu, commodo quis nisi. Nulla quis tincidunt sem, sit amet malesuada diam. Nam sagittis maximus magna, eget aliquet dui semper pretium. Morbi varius leo non ipsum semper, ac bibendum neque gravida. Phasellus sapien lectus, pretium eget ligula at, elementum tincidunt diam. Nam quis tincidunt tortor. Vivamus a fringilla tellus. Cras elementum ultricies ipsum, non lobortis massa elementum vel.
Phasellus ligula dolor, laoreet in nibh non, dictum vehicula dolor. Donec eu vulputate tellus, at mattis dui. Etiam et diam sed tellus tincidunt malesuada. Praesent congue tristique lectus, sed auctor mauris. Proin nibh mi, gravida id tempus quis, feugiat in tortor. Mauris lobortis diam erat, ut accumsan quam lobortis sed. Sed mollis tellus et eros porttitor consequat. Quisque ultricies lorem a mollis ornare. Vivamus sit amet velit eget neque mattis egestas id sit amet erat. Quisque eleifend libero urna, in dictum lacus vulputate sit amet. Duis pellentesque elementum tortor, ut cursus nunc convallis a. Proin interdum nibh gravida, suscipit metus eget, dignissim nisi.
Praesent dapibus enim sit amet diam viverra lobortis. Nullam nec placerat mauris. Sed velit nibh, dignissim quis rhoncus sed, fermentum non turpis. Quisque congue enim finibus orci venenatis, sed dignissim ligula tempus. Donec finibus id sapien a elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ultricies sed justo a tincidunt. Nullam vulputate finibus mauris. Praesent tincidunt id nisi eu rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula velit diam, eu pellentesque risus elementum ut.
Donec ut hendrerit purus. Fusce pulvinar sem nec turpis commodo tempus. Nam id maximus velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sodales finibus dictum. Phasellus fermentum placerat condimentum. Phasellus porta sit amet sem bibendum malesuada. In hac habitasse platea dictumst. Nunc sit amet est egestas, luctus lectus eu, eleifend lorem. Duis nec nisi orci. Quisque venenatis blandit neque rutrum porttitor. Nullam eget ultricies risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis risus, efficitur eget pellentesque a, tincidunt non lectus. Donec a cursus est.
Fusce commodo ligula non imperdiet congue. Proin vitae pharetra odio. Vestibulum tempor felis vel mi convallis, non aliquet ipsum pharetra. Quisque lectus odio, ultricies vitae porttitor ac, consequat elementum est. Nam blandit mauris ante, nec placerat nunc vulputate id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur semper felis ligula, a posuere nulla viverra a. Aliquam vel massa consectetur, dictum nisi quis, volutpat libero. In suscipit, urna sed varius elementum, tortor nulla consequat enim, ut sodales mauris turpis vitae augue.
Mauris at nulla nibh. Donec nec semper augue, in efficitur quam. Nullam tortor tellus, lobortis ac gravida congue, posuere ac eros. Praesent et dolor sit amet mi fermentum interdum. Aenean ligula nunc, vulputate et maximus nec, scelerisque eu diam. Vivamus pellentesque quis odio vitae cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum luctus porta. Ut fermentum, lacus eu placerat finibus, quam sem pellentesque purus, vel placerat libero elit aliquet eros. Donec a libero vel eros bibendum consequat et et lectus. Etiam congue suscipit finibus. Nam tristique, sapien a pulvinar convallis, enim metus maximus dui, vel laoreet ligula dolor vitae justo. Phasellus blandit odio nulla, sit amet elementum diam volutpat fermentum. Suspendisse non blandit purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat purus, sollicitudin quis metus sit amet, ultrices hendrerit arcu. Nulla maximus pharetra tincidunt. Phasellus tincidunt semper sem tempus dapibus. Pellentesque ligula nibh, eleifend ut dictum sed, aliquam et orci. Curabitur tempor augue non turpis elementum imperdiet quis vel tortor. Quisque nec rutrum justo. Praesent scelerisque dignissim nisi. Etiam et gravida mi.
Pellentesque dolor sapien, imperdiet nec convallis non, dictum a arcu. In hac habitasse platea dictumst. Mauris consectetur ultrices nibh nec vestibulum. Etiam maximus, nunc in euismod bibendum, neque ex iaculis nisl, eu finibus velit turpis vitae lacus. Etiam feugiat accumsan viverra. Vivamus turpis libero, molestie at eleifend et, ultrices ut tellus. Donec ipsum tortor, sagittis in aliquet eget, ullamcorper hendrerit erat. Praesent nec mi finibus, malesuada ex et, commodo tortor. Maecenas justo mi, posuere ut laoreet egestas, pretium sit amet est. Curabitur orci tortor, rutrum eu tristique a, ullamcorper vitae augue. Aenean condimentum erat vitae ex semper bibendum. In hac habitasse platea dictumst. Ut ullamcorper quis magna at gravida. Integer eu commodo neque, sit amet ullamcorper nisi. Nullam magna nulla, faucibus a suscipit in, vulputate eu nulla.
Phasellus sit amet bibendum erat. Etiam maximus id lorem vel porttitor. Sed quis nibh feugiat, ultricies neque non, porta turpis. Donec viverra lacinia risus vitae vulputate. Fusce tincidunt luctus sem, tempus lobortis urna cursus a. Suspendisse egestas magna sit amet mattis fermentum. Sed tempor, ligula vel tincidunt efficitur, neque nisi faucibus purus, congue iaculis urna sem tincidunt sapien. Fusce aliquet euismod neque, id aliquam diam posuere id. Praesent aliquet orci id tincidunt pellentesque. Vivamus id metus id erat convallis dapibus. In fermentum nulla ex, vitae pulvinar diam semper eu. Donec sagittis purus eget maximus rhoncus. Curabitur laoreet arcu magna, vel luctus arcu auctor vitae.
Fusce aliquam ex felis, sed fringilla nisi finibus id. Sed porttitor arcu mauris, a semper mi ultrices in. Nam rutrum sem sed sagittis dictum. Donec massa tortor, tempor gravida neque sed, sagittis ultrices augue. Donec fringilla, augue eget semper fermentum, tellus dui rutrum nisi, vel lobortis eros diam at velit. Maecenas tellus dui, aliquet vitae placerat id, sollicitudin eget dui. Duis blandit est ac diam eleifend, vel dictum tortor tempor. Sed eu nulla ut nunc blandit euismod id ac nibh. Morbi massa nisi, aliquam nec ornare in, vulputate sit amet lorem. Duis cursus est quis porta blandit. Pellentesque ultricies convallis convallis. Vivamus tincidunt nisl sed purus lacinia, sagittis placerat magna vestibulum. Aliquam at ornare risus, non tempus justo. Etiam in elit pellentesque, interdum ipsum vitae, facilisis nibh.
Sed eu quam justo. Sed lobortis justo nec quam cursus fringilla. In iaculis, augue vitae bibendum mollis, urna mauris fermentum tortor, in feugiat nunc augue imperdiet ipsum. Quisque arcu enim, blandit sed odio non, feugiat egestas mi. Nunc sodales erat vitae turpis condimentum placerat nec et quam. Ut ipsum lorem, auctor in fermentum eu, commodo quis nisi. Nulla quis tincidunt sem, sit amet malesuada diam. Nam sagittis maximus magna, eget aliquet dui semper pretium. Morbi varius leo non ipsum semper, ac bibendum neque gravida. Phasellus sapien lectus, pretium eget ligula at, elementum tincidunt diam. Nam quis tincidunt tortor. Vivamus a fringilla tellus. Cras elementum ultricies ipsum, non lobortis massa elementum vel.
Phasellus ligula dolor, laoreet in nibh non, dictum vehicula dolor. Donec eu vulputate tellus, at mattis dui. Etiam et diam sed tellus tincidunt malesuada. Praesent congue tristique lectus, sed auctor mauris. Proin nibh mi, gravida id tempus quis, feugiat in tortor. Mauris lobortis diam erat, ut accumsan quam lobortis sed. Sed mollis tellus et eros porttitor consequat. Quisque ultricies lorem a mollis ornare. Vivamus sit amet velit eget neque mattis egestas id sit amet erat. Quisque eleifend libero urna, in dictum lacus vulputate sit amet. Duis pellentesque elementum tortor, ut cursus nunc convallis a. Proin interdum nibh gravida, suscipit metus eget, dignissim nisi.
Praesent dapibus enim sit amet diam viverra lobortis. Nullam nec placerat mauris. Sed velit nibh, dignissim quis rhoncus sed, fermentum non turpis. Quisque congue enim finibus orci venenatis, sed dignissim ligula tempus. Donec finibus id sapien a elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ultricies sed justo a tincidunt. Nullam vulputate finibus mauris. Praesent tincidunt id nisi eu rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula velit diam, eu pellentesque risus elementum ut.
Donec ut hendrerit purus. Fusce pulvinar sem nec turpis commodo tempus. Nam id maximus velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sodales finibus dictum. Phasellus fermentum placerat condimentum. Phasellus porta sit amet sem bibendum malesuada. In hac habitasse platea dictumst. Nunc sit amet est egestas, luctus lectus eu, eleifend lorem. Duis nec nisi orci. Quisque venenatis blandit neque rutrum porttitor. Nullam eget ultricies risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis risus, efficitur eget pellentesque a, tincidunt non lectus. Donec a cursus est.
Fusce commodo ligula non imperdiet congue. Proin vitae pharetra odio. Vestibulum tempor felis vel mi convallis, non aliquet ipsum pharetra. Quisque lectus odio, ultricies vitae porttitor ac, consequat elementum est. Nam blandit mauris ante, nec placerat nunc vulputate id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur semper felis ligula, a posuere nulla viverra a. Aliquam vel massa consectetur, dictum nisi quis, volutpat libero. In suscipit, urna sed varius elementum, tortor nulla consequat enim, ut sodales mauris turpis vitae augue.
Mauris at nulla nibh. Donec nec semper augue, in efficitur quam. Nullam tortor tellus, lobortis ac gravida congue, posuere ac eros. Praesent et dolor sit amet mi fermentum interdum. Aenean ligula nunc, vulputate et maximus nec, scelerisque eu diam. Vivamus pellentesque quis odio vitae cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum luctus porta. Ut fermentum, lacus eu placerat finibus, quam sem pellentesque purus, vel placerat libero elit aliquet eros. Donec a libero vel eros bibendum consequat et et lectus. Etiam congue suscipit finibus. Nam tristique, sapien a pulvinar convallis, enim metus maximus dui, vel laoreet ligula dolor vitae justo. Phasellus blandit odio nulla, sit amet elementum diam volutpat fermentum. Suspendisse non blandit purus.
</div>
<script>
var index = 0;
function cutText(index) {
if (!index) index = 0;
if(index < 0) index = 0;
//var width = window.screen.width;
var text = document.getElementById("full_content");
var fontSize = getComputedStyle(text).getPropertyValue("font-size").replace("px", "");
var doc = document.documentElement;
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var strText = text.textContent;
//calculate text length for screen
var charMaxWidth = 10;
var maxChars = (Math.ceil(width / (fontSize / 3)) * Math.ceil(height / fontSize)) / 2;
var startCut = index;
if (index > 0) {
startCut = index * maxChars;
//startCut = index + maxChars;
}
//Check if the next cut not contains an empty string
if(strText.slice(startCut, startCut+maxChars).length == 0){
index--;
startCut = index * maxChars;
}
//only permit if the startCut be less of strTextLength
if(startCut < strText.length){
var content = document.getElementById("content");
content.innerHTML = strText.slice(startCut, startCut+maxChars) + "...";
console.log(startCut,maxChars);
}
}
window.onload = function(){
cutText(0);
}
window.onkeydown = function(e){
//Navigate bt code
if(e.keyCode == 38){
cutText(index--);
}
if(e.keyCode == 40){
cutText(index++);
}
};
</script>
</body>
</html>
你可以在這里看到結果： https ： //jsfiddle.net/hmr9d35h/
WPF屏幕外WebBrowser控件-頁面加載中的Javascript不起作用
[英]WPF Off-Screen WebBrowser Control - Javascript on pageload not working
將屏幕左側的屏幕外導航欄轉換為屏幕右側時出現的問題
[英]Issues translating Left Oriented Off-Screen Navbar to the Right of the Screen
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.