হাইলাইট / নির্বাচিত পাঠ্য পান

Question

কোনও ওয়েবসাইটের অনুচ্ছেদে যেমন jQuery ব্যবহার করে হাইলাইট করা পাঠ্য পাওয়া সম্ভব?

Comments

এখানে একটি কাজ সমাধান dipaksblogonline.blogspot.in/2014/11/...

— দীপক

সরল জাভাস্ক্রিপ্ট আমার জন্য কাজ করেছিল। ডকুমেন্ট.সেটলেশন ()। অ্যাঙ্করনোড.ডাটা.সুবস্ট্র (ডকুমেন্ট.সেটলেশন ()। অ্যাঙ্করঅফসেট, ডকুমেন্ট.সেটলেশন ()। ফোকাসঅফসেট-ডকুমেন্ট.সেটলেশন () অ্যাঙ্করঅফসেট)

— রোহিত ভার্মা

@ রোহিত ভার্মা: এটি কেবলমাত্র একক পাঠ্য নোডের মধ্যে থাকা একটি নির্বাচনের সাধারণ ক্ষেত্রে কাজ করতে চলেছে, যা কোনও ক্ষেত্রেই এই ক্ষেত্রে গ্যারান্টিযুক্ত নয়।

— টিম ডাউন

@ দিপাক আপনার পোস্টে আপনি যে ব্লগটি উল্লেখ করেছেন তাতে সামাজিক ভাগ করার কার্যকারিতা কীভাবে প্রতিলিপি করবেন? কেবলমাত্র নির্বাচিত স্ট্রিংটি ফেরার পরিবর্তে, আমি এই পরিবর্তনশীলটিকে টুইটার লিঙ্কে পপুলেট করার চেষ্টা করছি।

Answer 1

ব্যবহারকারী নির্বাচিত পাঠ্য পাওয়া তুলনামূলক সহজ। JQuery জড়িত করে লাভ করার কোনও সুবিধা নেই যেহেতু আপনার windowএবং documentঅবজেক্টগুলি ব্যতীত অন্য কিছুই দরকার নেই ।

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>এবং পাঠ্য <input>উপাদানগুলির সাথেও কাজ করে তবে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন। যেহেতু এখন ২০১ 2016 আই আই <= 8 সাপোর্টের জন্য প্রয়োজনীয় কোডটি বাদ দিচ্ছি তবে এস এর জন্য আমি অনেক জায়গায় স্টাফ পোস্ট করেছি।

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>

Comments

For k -ফর্ম ভাল হলে আর কি? "নিয়ন্ত্রণ" কি সম্পর্কে?

— ড্যান

@ ড্যান: দুঃখিত, আমি এই প্রশ্নটি মিস করেছি (মনে করি না যে এসও আমাকে এ সম্পর্কে সতর্ক করেছিলেন)। দ্বিতীয় শাখাটি IE <= 8 (IE 9 টি সরঞ্জাম window.getSelection()) এর জন্য। document.selection.typeচেক পরীক্ষা করছে যে নির্বাচনের একটি নিয়ন্ত্রণ নির্বাচন একটি টেক্সট নির্বাচন বদলে গেছে। আইই-তে, নিয়ন্ত্রণ নির্বাচন হ'ল রূপরেখাগুলি এবং পুনরায় আকারের হ্যান্ডলগুলি সহ এক বা একাধিক উপাদান (যেমন চিত্র এবং ফর্ম নিয়ন্ত্রণগুলি) সহ একটি সম্পাদনযোগ্য উপাদানের অভ্যন্তরের একটি নির্বাচন। আপনি যদি .createRange()এই জাতীয় নির্বাচনের ডাক দেন তবে আপনি একটি এর ControlRangeচেয়ে একটি পেয়ে যাবেন TextRangeএবং ControlRangeএর কোনও textসম্পত্তি নেই।

— টিম ডাউন

@ টিমডাউন এটি কখনও পাতলা বরফটি বলে "জিকুয়্যারির এক্স নেই" কারণ অবশ্যই ডান প্লাগইন সহ জাভাস্ক্রিপ্টের সাহায্যে এটি ব্রাউজারে আপনি যা কিছু করতে পারেন তা করতে পারে। এই ক্ষেত্রে, আমাদের jquery.selection ( madapaja.github.io/jquery.selection ) রয়েছে। "না হওয়া উচিত" বলা সমানভাবে ভুল। আমি এখানে পৌঁছেছি কারণ আমি ঠিক এটি খুঁজছিলাম। আমার একটি ব্যবহারের মামলা রয়েছে এবং jQuery হ'ল সঠিক সমাধান।

— অস্পেক্স

@ অ্যাসপেক্স: আমি আপনার বক্তব্যটি দেখতে চাই কিন্তু আমি একমত নই। একটি jQuery প্লাগইন একটি লাইব্রেরি যা jQuery এর উপর নির্ভরশীলতা রয়েছে; এটি নিজে jQuery নয়। নির্বাচন পরিচালনা করার ক্ষেত্রে, jQuery নিজেই ঠিক কিছু সরবরাহ করে না (যা এটি হওয়া উচিত কারণ নির্বাচনের হ্যান্ডলিং jQuery যা তা নয়), তাই jQuery ব্যবহার করে এমন কোনও সমাধান এটি ঘটনাক্রমে ব্যবহার করছে।

— টিম ডাউন

@ ডেনিস ৯৮: আমি দূর থেকে বিরক্ত বা আপত্তিজনক নই :) ইনপুট প্রকারের জন্য যাচাই করা কারণ আপনি যদি অ্যাক্সেস করার চেষ্টা করেন selectionStartবা selectionEndকোনও <input>উপাদান টাইপের (যেমন "সংখ্যা") না করেন তবে ক্রোমে কনসোলে সতর্কতা পান এটি সমর্থন করুন ( উদাহরণস্বরূপ jsfiddle.net/6zoposby/2 দেখুন )। আইটির অস্তিত্বের জন্য আমি চেকটি রেখে দিয়েছি selectionStartযাতে আইআই <= 8 তে কোডটি ভেঙে না যায় আমি স্বীকার করি যে চেকটি activeElementএখন সম্ভবত অতিমাত্রার চেয়ে বেশি। আমি sliceএটি ব্যবহার করি কারণ এটি আরও শক্তিশালী (যদিও এটি এখানে দরকারী নয়) এবং এর চেয়ে টাইপ করার চেয়ে কিছুটা ছোট substring।

— টিম ডাউন

Answer 2

এইভাবে হাইলাইট করা পাঠ্য পান:

window.getSelection().toString()

এবং অবশ্যই এর জন্য একটি বিশেষ চিকিত্সা:

document.selection.createRange().htmlText

Comments

IE> = 10 এর জন্য "আইই 10 তে document.selection সমর্থন সরিয়ে নেওয়া হয়েছিল এবং এর সাথে প্রতিস্থাপন করা হয়েছে window.getSelection "। উত্স: connect.microsoft.com/IE/feedback/details/795325/...

— user2314737

এটি বিভিন্ন ব্রাউজারে (যেমন ফায়ারফক্স) একাধিক শর্তে ব্যর্থ হবে।

— মাকেন

Answer 3

আপনি ক্রোম ব্যবহার করছেন (অন্য ব্রাউজারগুলি যাচাই করতে পারবেন না) এবং পাঠ্যটি যদি একই ডিওএম এলিমেন্টে থাকে তবে এই সমাধানটি কার্যকর করে:

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

Answer 4

ব্যবহার window.getSelection().toString()।

আপনি ডেভেলপার.মোজিলা.আরগতে আরও পড়তে পারেন