স্ট্রিংয়ে নতুন লাইন (\ n) ব্যবহার করা এবং এইচটিএমএলে একই রেন্ডারিং


88

আমার একটা স্ট্রিং আছে

string display_txt = "1st line text" +"\n" + "2nd line text";

জ্যাকুরিতে, আমি ব্যবহার করার চেষ্টা করছি

('#somediv').html(display_txt).css("color", "green")

বেশ স্পষ্টভাবে আমি প্রত্যাশা করছি যে আমার লিঙ্কটি 2 লাইনে প্রদর্শিত হবে তবে পরিবর্তে \ n বার্তায় প্রদর্শিত হচ্ছে। এর জন্য কোনও দ্রুত সমাধান?

ধন্যবাদ,


4
বেশ পরিষ্কার, উত্তর আপনার প্রশ্নে আছে, আপনি এইচটিএমএল হিসাবে ত্রুটি বার্তাটি ডিভিডিতে রেন্ডার করার চেষ্টা করছেন, যাতে আপনি <br />ট্যাগটি ব্যবহার করতে পারেন
মুর্তজা

দুটি লাইনের প্রত্যাশায় "যথেষ্ট পরিষ্কার" কিছুই নেই। বিপরীতে, এটি পুরোপুরি স্পষ্ট যে নিউলাইনটি সরল স্থান হিসাবে রেন্ডার করা হবে, প্রয়োজন হলে কেবল লাইনটি মোড়ানো হবে। এটি এইচটিএমএল কীভাবে .htmlকাজ করে তা অবশ্যই কাজ করে।

4
আমি কেবল সেই প্রসঙ্গেই বুঝি যেখানে আমি আমার স্ট্রিংটিকে "১ ম লাইন পাঠ্য" এবং "২ য় লাইনের পাঠ্য" হিসাবে সংরক্ষণ করেছি, এটি পরিষ্কার ছিল যে আমি এই দুটি লাইনে চাই, এইচটিএমএল কীভাবে কাজ করে তার জন্য নয় :) আপনাকে ধন্যবাদ।
কেইনউজার

সম্পর্কিত: stackoverflow.com/questions/9726970/...
frederj

উত্তর:


80

<br />এইচটিএমএলে নতুন লাইনের জন্য ব্যবহার করুন :

display_txt = display_txt.replace(/\n/g, "<br />");

4
কোনও কারণে, আমাকে "\\ n" "\\ n" হিসাবে পালাতে হবে অন্যথায় এটি কার্যকর হয় না। (Chrome 46 এ পরীক্ষিত)। কোন কারণে কেন?
সুজয় ফাদকে

4
দয়া করে নোট করুন যে এটি কেবল \nস্ট্রিংয়ের ভিতরে অক্ষরের প্রথম উপস্থিতিটি প্রতিস্থাপন করবে । দেখুন MDN ডকুমেন্টেশন
ডমিনিক Boulanger

4
সেরা .replace(/\n/g, "<br />")আরও নিউলাইন প্রতিরোধ করা হয়।
কিংআাইডার

4
আমি মনে করি @vsync এর উত্তরটি গ্রহণযোগ্য হওয়া উচিত।
আয়ুশ কুমার

নিখুঁতভাবে কাজ করেছেন। ধন্যবাদ.
জোশসুল্লিভান

178

টেবিল সেলে আপনার সিএসএস সেট করুন

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';
body{ white-space:pre-wrap; }


6
সুতরাং এটি কি গ্রহণযোগ্য উত্তর বলে মনে হচ্ছে না? এলই: আমি দেখতে পাচ্ছি যে এটি কেবল IE 8+ লিঙ্কে
gciochina

4
এই উত্তরটি অভ্যন্তরীণ এইচটিএমএল সেট করার চেয়েও ভাল, কারণ এটি কোনও এক্সএসএস দুর্বলতার কারণ নয়।
লিনাসকে

4
তদতিরিক্ত, আপনি white-space:pre-line;হোয়াইটস্পেসের সিকোয়েন্সগুলি কোনও একক শ্বেত স্পেসে বিভক্ত হয়ে উঠতে পারেন। প্রয়োজনে পাঠ্য মোড়ানো হবে এবং লাইন বিরতিতে। আরও তথ্যের জন্য: https://www.w3schools.com/cssref/pr_text_
white

এই উত্তর পাঠ্যের মধ্যে \ n কে একটি নতুন
লাইনে

4
@ ধীরে ধীরে - আপনার মানে কি? এর \nঅর্থ একটি নতুন লাইন মুদ্রিত হওয়া উচিত এবং এটি এটি মুদ্রণ করে
vsync

7

আপনি একটি ডিভ পরিবর্তে একটি প্রাক ট্যাগ ব্যবহার করতে পারেন। এটি স্বয়ংক্রিয়ভাবে আপনার \ n এর সঠিক উপায়ে প্রদর্শন করবে।

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>

1

এর .textবদলে হতে পারে .html?


0

আমার নিম্নোক্ত সমস্যাটি ছিল যেখানে আমি একটি ডাটাবেস থেকে ডেটা আনছিলাম এবং একটি স্ট্রিংযুক্ত প্রদর্শন করতে চাই \n। উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি এবং অবশেষে আমি একটি সমাধান নিয়ে এসেছি: https://stackoverflow.com/a/61484190/7251208

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.