jQuery পাঠ্য () এবং নিউলাইন

Question

আমি বলতে সক্ষম হতে চাই

$(someElem).text('this\n has\n newlines);

এবং এটি ব্রাউজারে নতুন লাইনের সাথে রেন্ডার করে। আমি খুঁজে পাওয়া একমাত্র কর্মসূচী হ'ল কিছু ইলেমে সিএসএস সম্পত্তি 'হোয়াইট-স্পেস' কে 'প্রাক' সেট করা। এটি প্রায় কাজ করে, তবে তারপরে আমার কাছে পাঠ্য এবং সামান্য এলমের শীর্ষের মধ্যে বিরক্তিকরভাবে বড় প্যাডিং রয়েছে, এমনকি আমি প্যাডিংটি 0 এ সেট করে রেখেছি কি এ থেকে মুক্তি পাওয়ার কোনও উপায় আছে?

Comments

এটিকে <pre>ট্যাগ দিয়ে মোড়ানো (এবং .text () এর পরিবর্তে .html () ব্যবহার করা কোনও পাঠ্য ফাইল থেকে বা আমার মতে সাধারণ পাঠ্য থেকে লাইন বিরতি বজায় রাখার জন্য সহজ এবং সর্বোত্তম সমাধান (এটি নীচে করিমের উত্তর দ্বারা প্রস্তাবিত)। হাওয়ার: এর নতুন বিকল্পটি হ'ল white-space: pre-wrap;ক্লিওয়ের উত্তরে পরামর্শ অনুসারে ব্যবহার করা

— এডওয়ার্ডাইল

append()পরিবর্তে test()এবং <br/>পরিবর্তে ব্যবহার করবেন না কেন \n? এর মতো -$(someElem).append("this <br/> has <br/> newlines");

— এরফান আহমেদ

Answer 1

এটি ২০১৫ সাল। এই মুহুর্তে এই প্রশ্নের সঠিক উত্তর হ'ল CSS white-space: pre-lineবা white-space: pre-wrap। পরিষ্কার এবং মার্জিত। এই জোড়কে সমর্থন করে এমন IE এর সর্বনিম্ন সংস্করণটি 8।

https://css-tricks.com/almanac/properties/w/whitespace/

দ্রষ্টব্য সিএসএস 3 পর্যন্ত সাধারণ হয়ে আপনি সম্ভবত ম্যানুয়ালি প্রাথমিক এবং / অথবা trailing সাদা স্পেস বন্ধ ছাঁটা প্রয়োজন চাই।

Comments

এই উত্তর হওয়া উচিত।

— অক্ষ

এই উত্তর। বেশী হওয়া উচিত. 2016. এ আপনাকে স্বাগতম

— neoRiley

এটি 2017 সালে পাওয়া গেছে: এখনও প্রাসঙ্গিক এবং এখনও প্রশ্নের উত্তর।

— ট্রয় হ্যারিস

এই পোস্টে একটি ত্রুটি আছে। বছরটি ২০১৫, 2015 নয় else

— জেডিবি এখনও মনিকার

new Date("2016");

— ব্র্যান্ডিটো

Answer 2

আপনি যদি কোনও ভেরিয়েবলের মধ্যে jQuery অবজেক্ট সঞ্চয় করেন তবে আপনি এটি করতে পারেন:

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

আপনি যদি পছন্দ করেন তবে আপনি jQuery.text () এর মতো একটি সাধারণ কল দিয়ে এটি করার জন্য একটি ফাংশনও তৈরি করতে পারেন:

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Comments

প্রথম কোড স্নিপেটের দ্বিতীয় লাইনে একটি অনুপস্থিত বন্ধনী রয়েছে।

— মাহমুদ ফয়েজ

এটি আসলে ওপিএস প্রশ্নের উত্তর দেয়

— টমি

সেরাটি, কবজির মতো কাজ করেছে এবং সমস্যাটি সমাধান করেছে।

— জিশান আরশাদ

Answer 3

আমি যা ব্যবহার করি তা এখানে:

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

Comments

আসলে এটি মার্কের পরামর্শের চেয়েও উচ্চতর কারণ এটি কোনও এক্সএসএস আক্রমণের ঝুঁকিযুক্ত নয়।

— অ্যান্ড্রু বি।

আমি মনে করি আপনি ফাংশনটি থেকে দ্বি (যেমন: ডকুমেন্ট.ক্রেটইলিমেন্ট ('ডিভ')) তৈরি করতে পেরেছেন এবং ঠিক সমস্ত কলের জন্য এটি ব্যবহার করতে পারেন?

— Fabio Zadrozny

@ ফ্যাবিওজাদরোজনি: হ্যাঁ, আপনি ঠিক বলেছেন! আমি সেই অনুযায়ী উত্তরটি সম্পাদনা করেছি (প্রায়)। ডিভি ফাংশনের ভিতরে তৈরি করা হয়েছে তবে লুপের বাইরে এখন। এটি পুরোপুরি ফাংশনের বাইরে থাকতে পারে তবে এটি ব্যবহারের জন্য জটিল হয়ে ওঠে।

— পিটার ভি। মার্চ

আমি বিশ্বাস করি @ ক্লিওংয়ের উত্তরটি এর জন্য সেরা সমাধান

— মিনিলিনিম

আপনার পাঠ্যে যদি স্পষ্টতই নিউলাইন অক্ষর থাকে তবে আপনি text.split(/\\n/)বা এমনকি ব্যবহার করে বিভক্ত করতে চাইতে পারেন text.split(/\\\\n|\\n|\n/)। আমি একটি এপিআই দিয়ে জেএসএন ফর্ম্যাটে পাঠ্য পাঠ করার সময় এটির মুখোমুখি হয়েছি যা \nস্ট্রিংগুলিতে আক্ষরিক নিয়ন্ত্রণের অক্ষরগুলি এম্বেড করেছে ।

— ডি ভিজার

Answer 4

অন্যথা, ব্যবহার করার চেষ্টা করুন .htmlএবং তারপর মোড়ানো সঙ্গে <pre>ট্যাগ:

$(someElem).html('this\n has\n newlines').wrap('<pre />');

Answer 5

আপনি ব্যবহার করতে পারেন htmlপরিবর্তে textএবং প্রতিটি সংঘটন প্রতিস্থাপন \nসঙ্গে <br>। আপনাকে যদিও আপনার পাঠ্যটি সঠিকভাবে পালাতে হবে।

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

Comments

@ ম্যাথু ফ্ল্যাশেন: ধন্যবাদ, স্থির।

— মার্ক বাইয়ার্স

এই উত্তরটি পড়া কিছু লোক সম্ভবত জানেন না এটি কতটা বিপজ্জনক। ব্যবহারকারী-সরবরাহিত পাঠ্য সহ এই সমাধানটি কখনই ব্যবহার করবেন না। পিটার মারচের সমাধান ভাল pre

— অ্যান্ড্রু বি।

textএই উত্তরটি htmlসরাসরি ব্যবহার করার সময় @ কুলবিয়াশিক পিটারের সমাধান ব্যবহার করুন ।

— জন শিয়াও

Answer 6

আমি someElemউপাদানটির সাথে সরাসরি কাজ করার পরামর্শ দেব , কারণ .html()স্ট্রিংয়ের মধ্যে প্রতিস্থাপনগুলি এইচটিএমএল ট্যাগগুলি প্রতিস্থাপন করবে replace

এখানে আমার ফাংশন:

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

এটিকে কল করুন:

someElem = nl2br(someElem);

Comments

পাঠককে দ্রষ্টব্য: আপনি যদি কোনও ফায়ারফক্স যুক্ত করার পরিকল্পনা করেন তবে এই উত্তরটি বিশেষত কার্যকর। ইনারএইচটিএমএল বা (.html () jQuery ব্যবহার করে) ডাব্লু 3 সি এবং মজিলা দ্বারা চিহ্নিত করা হয়েছে এবং উপরের কোডটি পর্যালোচনা প্রক্রিয়া সাফ করার জন্য খুব সহায়ক। আরও তথ্যের জন্য সুরক্ষা বিবেচনা দেখুন @ বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস / ওয়েবে / এপিআই / এলিমেটেননার এইচটিএমএল

Answer 7

এটা চেষ্টা কর:

$(someElem).html('this<br> has<br> newlines);

Answer 8

সিএসএস সাদা-স্পেস সম্পত্তি ব্যবহার করা সম্ভবত সেরা সমাধান। আপনি যে অতিরিক্ত প্যাডিংটি দেখছিলেন তা সনাক্ত করতে ফায়ারব্যাগ বা ক্রোম বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন।