নির্বাচন চিহ্নিতকরণগুলির মধ্যে ছেদটি পরিচালনা করে

Question

আমার ইউআইতে একটি চিহ্ন বোতাম রয়েছে, এটি ক্লিক করে যে কোনও ব্যবহারকারীর নির্বাচনকে লাল চিহ্নিত করা হয়েছে। এখানে কোন সমস্যা নেই। আমি এটি দ্বারা অর্জনdocument.execCommand("insertHTML")

তবে আমার একটি অতিরিক্ত প্রয়োজনীয়তা রয়েছে যে যদি নতুন নির্বাচনটি তৈরি করা হয় যা পুরানো নির্বাচন চিহ্নিতকরণের ছেদ হয়, পুরানো নির্বাচনের লাল চিহ্নিতকরণ অদৃশ্য হয়ে যাবে।

উদাহরণ হিসাবে:

নিম্নলিখিত চিত্রটিতে: এটি এবং পরীক্ষণ চিহ্নিত করা হয়েছে। এখন যদি আমি নির্বাচন তার TES হয় শুরু থেকে এবং মার্ক ক্লিক করুন, পুরোনো চিহ্ন এই এবং পরীক্ষামূলক দূরে যেতে হবে এবং শুধুমাত্র তার TES হয় একটি সংযোগস্থলে না থাকায় চিহ্নিত করা উচিত।

কোড:

const button = document.getElementById("button");

button.addEventListener('click', ()=>{
	const s = window.getSelection();
  const selectionStr = s.toString();
  document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`);
})

.bg-red {  
background: red;
}

<div contenteditable="true">
 this is testing  this is testing  this is testing
</div>

<button id="button">mark</button>

Answer 1

আপনি নির্বাচিত পাঠ্যের startContainer& endContainerএর সাথে এটি খুঁজে পেতে এবং এর সাথে getRangeAtতুলনা করতে পারেন contentContainer। এবং যদি তারা সমান না হয় contentContainerতবে bg-redক্লাসটি সরান ।

const button = document.getElementById("button");

button.addEventListener('click', ()=>{
  let contentContainer = document.getElementById("contentContainer");
  const selection = window.getSelection();
  if (selection.rangeCount > 0){
    let startContainer =  selection.getRangeAt(0).startContainer.parentNode;
    let endContainer =  selection.getRangeAt(0).endContainer.parentNode;
    if(startContainer != contentContainer)
      startContainer.classList.remove('bg-red')
    if(endContainer != contentContainer)
      endContainer.classList.remove('bg-red')
  }
  const selectionStr = selection.toString();
  document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`); 
})

.bg-red {  
  background: red;
}

<div id="contentContainer" contenteditable="true">
 this is testing  this is testing  this is testing
</div>

<button id="button">mark</button>

Answer 2

আপনার যদি আইই সমর্থন প্রয়োজন না হয় তবে আপনি সিলেকশন কনটেনস নোড ব্যবহার করতে পারেন : https://developer.mozilla.org/en-US/docs/Web/API/Selection/containsNode

এটি আপনাকে নির্বাচনের মধ্যে থাকা নোডগুলিকে ফ্ল্যাগ করতে দেয়। আপনার আংশিক নিয়ন্ত্রণের পতাকাটি সত্যে সেট করতে হবে, সুতরাং এটি কেবলমাত্র আংশিকভাবে নির্বাচিত নোডগুলি সনাক্ত করবে।

সুতরাং প্রথমবারে আপনি নির্দিষ্ট শ্রেণীর নামের সাথে নির্বাচিত নোডগুলিকে পতাকাঙ্কিত করুন flag তারপরে আপনি আপনার স্টাইল প্রয়োগ করতে আপনার এক্সিকিউন্ড কম্যান্ড করেন । তারপরে, আপনি এই নোডগুলিতে বহিরাগত এইচটিএমএলকে অভ্যন্তরীণ এইচটিএমএল সেট করে আগে পতাকাঙ্কিত ট্যাগগুলি মুছে ফেলেছেন । আপনি সবেমাত্র প্রয়োগ করেছেন এমন স্টাইলটি রাখবেন তবে পূর্বেরগুলি সরিয়ে ফেলবেন। এটার মত:

const button = document.getElementById("button");

button.addEventListener('click', () => {
  const s = window.getSelection();
  const selectionStr = s.toString();

  tagIntersection(s)
  document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`);
  removeIntersection(s)
})

function tagIntersection(s) {
  const redSpans = document.getElementsByClassName('bg-red')
  for (let i = 0; i < redSpans.length; i++) {
    if (s.containsNode(redSpans[i], true)) {
      redSpans[i].classList.add('to-remove');
    }
  }
}

function removeIntersection(s) {
  // using querySelector because getElements returns a live nodelist 
  // which is a problem when you manipulate the nodes
  const toRemovespans = document.querySelectorAll('.to-remove')
  for (let i = 0; i < toRemovespans.length; i++) {
    toRemovespans[i].outerHTML = toRemovespans[i].innerHTML;
  }
}

.bg-red {
  background: red;
}

<div contenteditable="true" id="editableDiv">
  this is testing this is testing this is testing
</div>

<button id="button">mark</button>

Answer 3

আমি 'getSelection'.anchorNode.parentNode- এর শ্রেণি বিজি-রেড রয়েছে কিনা তা সনাক্ত করার চেষ্টা করেছি এবং এটি প্রতিস্থাপন করেছি, তবে খুব বেশি পার্শ্ব প্রতিক্রিয়া উপস্থিত রয়েছে।

সুতরাং, রিজেক্সের সাথে সমাধান ...

(* 1) - আপনি বিষয়বস্তু সম্পাদনাযোগ্য উপাদানটির কোডটি পরীক্ষা করে দেখলে এর কাঠামোটি দেখতে পাবেন: প্রতিটি নতুন লাইন একটি আলাদা ডিভ is \nমাল্টি-লাইন নির্বাচনের অনুমতি দেওয়ার জন্য আপনাকে অবশ্যই প্রতিটি নতুন-লাইন প্রতীককে "লাইন ব্রেকিং" এইচটিএমএল দিয়ে প্রতিস্থাপন করতে হবে ।

(* 2) - ব্রাউজার এটি HTML এর নিজস্ব সংশোধন সন্নিবেশ করায় এবং সঠিক প্রতিস্থাপন প্রতিরোধ করে। আমাকে কোনও নন- এইচটিএমএল স্ট্রিং forcedোকাতে বাধ্য করা হয়েছিল, যা পাঠ্যে প্রদর্শিত না হওয়ার সম্ভাবনা নেই। এবং সমস্ত প্রতিস্থাপনের পরে - বৈধ এইচটিএমএল .োকান।

(* 3) - আমি এখানে নিয়মিত সমস্ত এক্সপ্রেশন বিশ্লেষণ করার পরামর্শ দিচ্ছি → https://regex101.com/r/j88wc0/1 মূল ধারণাটি <span class="bg-red"> anything instead of closing span <span class="bg-red">বা এর সমস্ত ডাবল উপস্থিতি প্রতিস্থাপন করা </span> anything instead of starting span tag </span>।

দ্রষ্টব্য, প্রতিটি বার আপনি বোতামটি চাপলে এই কোডটি সমস্ত অভ্যন্তরীণ এইচটিএমএলকে রিফ্রেশ করে। এটি কয়েক হাজার লাইনের পাঠ্য সহকারে কাজ করবে না)

let button = document.getElementById("button");
let block = document.getElementById("block");

button.addEventListener('click', function(){
  let s = window.getSelection();
  let str = s.toString().replace(/\n/g,'</span></div><div><span class="bg-red">'); // (*1)

  document.execCommand("insertHTML", false, `bubufication`); // (*2)

  block.innerHTML = block.innerHTML
    .replace(/bubufication/, `<span class="bg-red">${str}</span>`)
    .replace(/<span class="bg-red">(.*?)<\/span><span class="bg-red">/g,'$1<span class="bg-red">')
    .replace(/<span class="bg-red">(((?!<\/span>).)*?<span class="bg-red">)/g,"$1")
    .replace(/(<\/span>((?!<span class="bg-red">).)*)<\/span>/g,"$1"); // (*3)
});

.bg-red {
  background-color: red;
}

<div id="block" contenteditable="true">
  <div>this is testing  this is testing  this is testing</div>
  <div>this is testing  this is testing  this is testing</div>
</div>

<button id="button">mark</button>