متد text و html

دریافت و تنظیم محتوای متنی و HTML عناصر با text() و html()

دریافت و تنظیم محتوا

سه متد ساده اما بسیار پرکاربرد برای کار با محتوای عناصر:

متدکار
text()متن خام (بدون تگ HTML) را می‌گیرد یا تنظیم می‌کند
html()محتوای HTML (با تگ‌ها) را می‌گیرد یا تنظیم می‌کند
val()مقدار فیلدهای فرم را می‌گیرد یا تنظیم می‌کند

دریافت محتوا (Get)

وقتی متد را بدون پارامتر صدا بزنید، محتوای فعلی را برمی‌گرداند:

// فرض کنید: <p id="demo">سلام <b>دنیا</b></p>

$("#demo").text();   // خروجی: "سلام دنیا" (فقط متن)
$("#demo").html();   // خروجی: "سلام <b>دنیا</b>" (با تگ HTML)

تنظیم محتوا (Set)

وقتی پارامتر بدهید، محتوا جایگزین می‌شود:

$("#demo").text("متن جدید ساده");
$("#demo").html("متن جدید با <b>برجستگی</b> و <i>ایتالیک</i>");

تفاوت مهم text و html

ویژگیtext()html()
خواندنفقط متن خالصمتن + تگ‌های HTML
نوشتنتگ‌ها به‌صورت متن نمایش داده می‌شوندتگ‌ها واقعاً اجرا می‌شوند
امنیت✅ امن در برابر XSS⚠️ خطرناک با ورودی کاربر
هرگز html() را با ورودی کاربر بدون پاک‌سازی استفاده نکنید! این کار حمله XSS را ممکن می‌کند. اگر ورودی کاربر را نمایش می‌دهید، همیشه از text() استفاده کنید.

تابع callback در text و html

هر دو متد می‌توانند تابع بگیرند؛ خروجی تابع، محتوای جدید است. تابع دو پارامتر دارد: ایندکس عنصر و محتوای فعلی:

// اضافه کردن شماره به ابتدای هر پاراگراف
$("p").text(function(index, oldText) {
    return (index + 1) + ". " + oldText;
});

مثال کاربردی: شمارنده کاراکتر

// نمایش تعداد کاراکترهای باقی‌مانده
$("#comment").on("keyup", function() {
    var remaining = 140 - $(this).val().length;
    $("#counter").text(remaining + " کاراکتر باقی‌مانده");
});

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط