جاوا اسکریپت مرورگر شما غیرفعال است! لطفا برای استفاده صحیح از این سایت، جاوا اسکریپت مرورگر خود را فعال کنید یا از مرورگر دیگری استفاده کنید!

محدوده انتخاب متن در جاوااسکریپت
range-in-javascript
مقاله
js
۱۴۰۰/۰۳/۲۷
eye 245
comment 0

محدوده انتخاب متن در جاوااسکریپت

range-in-javascript


در این مقاله ما انتخاب متن در سند و همچنین انتخاب متن در فیلدهای فرم مانند  <input> را بررسی می‌کنیم.

جاوا اسکریپت می‌تواند به یک متن انتخاب شده دسترسی پیدا کند، گره‌های DOM را به طور کلی یا به طور جزئی انتخاب یا لغو انتخاب کند، محتوای انتخاب شده را از سند حذف کند، در یک تگ قرار دهد و امثال اینها.

درک اساسی  Range و Selection اشیا آسان است و پس از آن نیازی به هیچ دستورالعملی ندارید تا بتوانید آنچه را که می‌خواهید انجام دهید.


دامنه یا range

مفهوم اساسی انتخاب یک محدوده است، که اساساً دارای یک جفت «نقاط مرزی» است:  شروع دامنه (range start) و پایان دامنه (range end).

تابع Range یک شی بدون پارامتر از دامنه ایجاد می‌کند:

let range = new Range();

سپس می‌توانیم مرزهای انتخاب را با استفاده از  range.setStart(node, offset) و range.setEnd(node, offset) تغییر دهیم.

همانطور که حدس می‌زنید، در ادامه ما از شی  Range برای انتخاب استفاده خواهیم کرد، اما در ابتدا بیایید تعداد کمی از این اشیا را ایجاد کنیم.


انتخاب بخش محدودی از متن

نکته جالب این است که اولین آرگومان  node در هر دو روش می‌تواند گره متنی یا گره عنصر باشد و معنای آرگومان دوم به آن بستگی دارد.

اگر  node گره متنی باشد، offset باید در متن آن جایگاهی داشته باشد.

به عنوان مثال ، با توجه به عنصر <p>Hello</p> می توانیم محدوده حاوی حروف «ll» را به صورت زیر ایجاد کنیم:

<p id="p">Hello</p>

<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>



در اینجا ما فرزند اول  <p>(این گره متن است) را می‌گیریم و موقعیت‌های متن را در آن مشخص می کنیم: 

selection-and-range-in-javascript
این مقاله در حال تکمیل است.


author
ابوذر کیهانی
عاشق برنامه‌نویسی که با زبان HTML و php و Javascript برنامه می‌نویسه و با CSS و SASS زیباترش می‌کنه. تمام تلاشش اینه که مشکلی رو از دوش کسی برداره!
نظرات و پاسخ‌ها
نظر خود را بفرمایید
 
 
 
captcha refresh_captcha