جاوا اسکریپت چگونه متن انتخاب شده را از جعبه متن دریافت کنیم

برای دریافت متن انتخابی از یک جعبه متن با استفاده از جاوا اسکریپت، می توانید از کد جاوا اسکریپت زیر استفاده کنید:

<script>
function show() {
  var text = document.getElementById("text");
  var selection = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(selection);
}
</script>

<TEXTAREA id="text">Highlight this text or parts of it and click the button below!</TEXTAREA><BR>
<INPUT type="button" onclick="show()" value="Select text and click here" />

تو می توانی راه حل کد بالا را امتحان کنید با برجسته کردن متن از کادر متن زیر و کلیک کردن روی دکمه. سپس هر چیزی که علامت گذاری می کنید در کادر هشدار ظاهر می شود که با کلیک روی دکمه ظاهر می شود.

این متن یا قسمت هایی از آن را هایلایت کنید و روی دکمه زیر کلیک کنید!

نتیجه باید به این صورت باشد:

تجزیه گام به گام

در مثال بالا، تعدادی کد ساده HTML/JavaScript را مشاهده کردید که نحوه بازیابی (و نمایش) متن انتخاب شده از یک ناحیه متنی در یک صفحه وب را نشان می دهد.

در صورتی که درک کد برای شما مشکل بود، حتماً قسمت خط به خط را مطالعه کنید.

ابتدا به بخش HTML قطعه نگاه می کنیم.

<TEXTAREA id="text">Highlight this text or parts of it and click the button below!</TEXTAREA>

این یک عنصر textarea ساده با ویژگی ID ایجاد می کند که روی “متن“. این قسمت متن شامل متنی است که بعداً می توانید با استفاده از جاوا اسکریپت علامت گذاری و بازیابی کنید.

<INPUT type="button" onclick="show()" value="Select text and click here" />

این HTML یک عنصر دکمه ایجاد می کند onclick ویژگی که جاوا اسکریپت را فراخوانی می کند نشان می دهد هنگامی که دکمه فشار داده می شود کار می کند. را نشان می دهد تابع هنوز وجود ندارد، در زیر تعریف شده است.

در مرحله بعد، اجازه دهید خط به خط کدهای جاوا اسکریپت را بررسی کنیم.

var text = document.getElementById("text");

این خط عنصر textarea را از HTML با شناسه خود بازیابی می کند و آن را در یک متغیر ذخیره می کند.

var selection = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);

این قطعه کد متن انتخاب شده فعلی را از عنصر textarea بازیابی می کند و آن را به متغیری به نام “selection” اختصاص می دهد.

را انتخاب شروع و انتخاب پایان ویژگی های عنصر ناحیه متن، موقعیت شروع و پایان متن انتخاب شده را مشخص می کند.

را صفحه فرعی متد متن انتخاب شده را از مقدار ناحیه متن بازیابی می کند.

alert(selection);

آخرین اما نه کم اهمیت، یک جعبه هشدار متن برجسته شده را با کلیک روی دکمه نمایش می دهد.

با تشکر برای خواندن. کد نویسی مبارک!

همچنین بخوانید

نحوه علامت گذاری متن Div با جاوا اسکریپت

درباره نویسنده

آرتوری جلی

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