مشکل در مشخص کردن شروع و پایان کاراکتر یک متن به وسیله جاوااسکریپت

با درود خدمت دوستان و همکاران محترم. بنده در حال انجام یک پروژه شخصی که یک ادیتور درگ اند دراپ با کتابخانه phoenix liveview در فونیکس هستم.

یک سری از بخش ها مثل هایلایت کردن یک متن یا مشخص کردن پوزیشن موس شروع کاراکتر و اتمام کاراکتر رو مثل اینکه نمی تونم سرور سایت انجام بدم. به همین ترتیب مجبور به استفاده از جاوااسکریپت شدم.

به کد زیر توجه کنید

var mySelection = function (element) {
  let startPos = element.toString().selectionStart;
  let endPos = element.toString().selectionEnd;
  let selectedText = element.value.substring(startPos, endPos);


  if(selectedText.length <= 0) {
    return; // stop here if selection length is <= 0
  }
  
  // log the selection
  console.log("startPos: " + startPos, " | endPos: " + endPos );
  console.log("selectedText: " +  selectedText);
  
};

document.querySelector
var textAreaElements = document.querySelector("#floatingTextarea2");


// register "mouseup" event for the mouse
textAreaElements.addEventListener('mouseup', function(){
    mySelection(textAreaElements)
});

// register "keyup" event for the keyboard
textAreaElements.addEventListener('keyup', function( event ) {
    // assuming we need CTRL, SHIFT or CMD key to select text
    // only listen for those keyup events
    if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
        mySelection(element)
    }
});

و html

<textarea class="form-control" id="floatingTextarea2" style="height: 300px">In mathematics, extrapolation is the process of estimating, beyond the original observation range,
the value of a variable on the basis of its relationship with another variable.
It is similar to interpolation, which produces estimates between known observations,
but extrapolation is subject to greater uncertainty and a higher risk of producing
meaningless results. Extrapolation may also mean extension of a method,
assuming similar methods will be applicable. Extrapolation may also apply to human</textarea>

در بلاک بالا من از textarea استفاده کردم و مشکلی نداره به راحتی کل اطلاعات رو می یاره که من نیاز دارم ولی اگر من بخوام html رو در textarea اجرا کنم باید به دنبال

contenteditable="true"‍ برم به صورت مثال کد زیر:

<div contenteditable="true" id="floatingTextarea2">
    its relationship with another variable. <b>apply</b>
</div>

دیگه اون کد بالا که برای js هست کار نمی کنه.

به جای کد زیر:

  let selectedText = element.value.substring(startPos, endPos);

من کد زیر رو جایگزین کردم

let selectedText = element.innerText.substring(startPos, endPos);

حال نمی تونه شروع و اتمام کاراکتر متنی رو به بنده خبر بده

یعنی این دو خط:

  let startPos = element.selectionStart;
  let endPos = element.selectionEnd;

دو مشکل برای بنده پیش می یاد:

۱. من نیاز به innerHtml هستم نه text و نیاز دارم با کاراکتر های مربوط به html برای من بشماره
۲. متاسفانه با حتی innerText هم نمی تونم کاراکتر هارو بشناسم و آندیفاین هست

با تشکر راهنمایی بفرمایید که چه می شه کرد تسلط روی js ندارم

1 Likes

دوست عزیز اگر لینک گیتهاب از دموی پروژه در اختیارم بزارید فکر میکنم بتونم کمکتون کنم
( متاسفانه کار کردن با contenteditable دردسر های خودشو داره :grinning: )

خوندن این مقاله هم توصیه میشه
https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480
( این مقاله میگه شما باید سیستم طراحی کنی که متن درون رو به اون مدلی که خودت طراحی کردی map کنه )

( در حقیقت ساخت ui ای که واسه یوزر ساده باشه، برعکس طراحیش ساده نیست )

1 Likes