รับข้อความที่ไฮไลต์ / ที่เลือก

351

เป็นไปได้หรือไม่ที่จะได้รับข้อความที่เน้นสีในย่อหน้าของเว็บไซต์เช่นโดยใช้ jQuery

javascript jquery textselection

2

นี่เป็นทางออกที่ทำงานdipaksblogonline.blogspot.in/2014/11/...

— Dipak

จาวาสคริปต์ง่าย ๆ ใช้งานได้สำหรับฉัน document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)

— Rohit Verma

@RohitVerma: นั่นเป็นเพียงการทำงานในกรณีที่เรียบง่ายของการเลือกที่มีอยู่ในโหนดข้อความเดียวซึ่งไม่เคยรับประกันว่าจะเป็นกรณี

— Tim Down

@Dipak คุณจะทำซ้ำฟังก์ชั่นการแบ่งปันทางสังคมจากบล็อกที่คุณอ้างอิงในโพสต์ของคุณได้อย่างไร แทนที่จะส่งคืนสตริงที่เลือกฉันพยายามเติมตัวแปรนั้นลงในลิงค์ทวิตเตอร์

482

การได้รับข้อความที่ผู้ใช้เลือกนั้นค่อนข้างง่าย ไม่มีประโยชน์ที่จะได้รับจากการเกี่ยวข้องกับ 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>และ texty <input>คุณสามารถใช้สิ่งต่อไปนี้ ตั้งแต่ตอนนี้ปี 2559 ฉันไม่ใช้รหัสที่จำเป็นสำหรับ 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>

ขยายตัวอย่างข้อมูล

— ทิมลง
แหล่งที่มา

9

มีอะไรอีกถ้า {} -fork ดีสำหรับ? "การควบคุม" เกี่ยวกับอะไร

— ด่าน

29

@ แดน: ขออภัยฉันพลาดคำถามนี้ไป (อย่าคิดว่า SO แจ้งเตือนฉันด้วย) สาขาที่สองสำหรับ IE <= 8 (การดำเนินการของ IE 9 window.getSelection()) การdocument.selection.typeตรวจสอบเป็นการทดสอบว่าการเลือกเป็นการเลือกข้อความมากกว่าการเลือกการควบคุม ใน IE การเลือกการควบคุมคือการเลือกภายในองค์ประกอบที่สามารถแก้ไขได้ซึ่งมีองค์ประกอบอย่างน้อยหนึ่งองค์ประกอบ (เช่นรูปภาพและตัวควบคุมฟอร์ม) ที่มีเค้าร่างและตัวจัดการปรับขนาด ถ้าคุณโทร.createRange()ในการเลือกเช่นคุณจะได้รับControlRangeมากกว่าTextRangeและControlRanges ไม่มีtextคุณสมบัติ

— Tim Down

2

@TimDown มันเป็นน้ำแข็งที่บางมากที่จะพูดว่า "jQuery ไม่มี X" เพราะแน่นอนด้วยปลั๊กอินที่ถูกต้องมันสามารถทำทุกสิ่งที่คุณสามารถทำได้ในเบราว์เซอร์ด้วย javascript ในกรณีนี้เรามี jquery.selection ( madapaja.github.io/jquery.selection ) มันผิดพอ ๆ กันที่จะพูดว่า "ไม่ควร" ฉันมาที่นี่เพราะฉันกำลังมองหาสิ่งนี้ ฉันมีกรณีใช้งานและ jQuery เป็นโซลูชันที่เหมาะสม

— Auspex

8

@Auspex: ฉันเห็นจุดของคุณ แต่ฉันไม่เห็นด้วย ปลั๊กอิน jQuery เป็นห้องสมุดที่มีการพึ่งพา jQuery; ไม่ใช่ jQuery ในกรณีของการจัดการสิ่งที่เลือก jQuery เองก็ไม่ได้ให้สิ่งใดอย่างแม่นยำ (ซึ่งเป็นอย่างที่ควรจะเป็นเพราะการจัดการการเลือกไม่ใช่สิ่งที่ jQuery ใช้) ดังนั้นโซลูชันใด ๆ ที่ใช้ jQuery จะใช้งานโดยไม่ได้ตั้งใจ

— Tim Down

1

@ Dennis98: ฉันไม่รำคาญหรือโกรธเคืองจากระยะไกล :) การตรวจสอบประเภทอินพุตเป็นเพราะคุณได้รับคำเตือนในคอนโซลใน Chrome หากคุณพยายามเข้าถึงselectionStartหรือselectionEndใน<input>ประเภทองค์ประกอบ (เช่น "ตัวเลข") ที่ไม่ได้ สนับสนุน (ดูตัวอย่าง jsfiddle.net/6zoposby/2 ) ฉันออกจากการตรวจสอบสำหรับการมีอยู่ของselectionStartรหัสเพื่อที่จะไม่ทำลายใน IE <= 8 ฉันยอมรับการตรวจสอบสำหรับactiveElementอาจจะ overkill ตอนนี้ ผมใช้sliceเพราะมันมีประสิทธิภาพมากขึ้น ( แต่ที่ไม่เป็นประโยชน์ที่นี่) substringและสั้นลงเล็กน้อยในการพิมพ์มากกว่า

— Tim Down

111

รับข้อความที่เน้นสีด้วยวิธีนี้:

window.getSelection().toString()

และแน่นอนการดูแลเป็นพิเศษสำหรับเช่น:

document.selection.createRange().htmlText

— ParPar
แหล่งที่มา

2

สำหรับ IE> = 10“ document.selection การสนับสนุนถูกลบใน IE10 และแทนที่ด้วย window.getSelection ” ที่มา: connect.microsoft.com/IE/feedback/details/795325/…

— 2314737

สิ่งนี้จะล้มเหลวภายใต้เงื่อนไขหลายประการในเบราว์เซอร์ต่างๆ (เช่น Firefox)

— Makyen

11

วิธีนี้ใช้ได้ผลถ้าคุณใช้ chrome (ไม่สามารถตรวจสอบเบราว์เซอร์อื่น) และถ้าข้อความอยู่ในองค์ประกอบ DOM เดียวกัน:

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

— Andrew Kennedy
แหล่งที่มา

0

window.getSelection().toString()ใช้

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับdeveloper.mozilla.org

— Ebuka
แหล่งที่มา