কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল উপাদান ছাড়াই বিশুদ্ধ পাঠ্য পাবেন?

Question

আমার এইচটিএমএলে নীচের মতো 1 টি বোতাম এবং কিছু পাঠ্য রয়েছে:

function get_content(){
   // I don't know how to do in here!!!
}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

যখন ব্যবহারকারী বোতামটি ক্লিক করেন, তখন সামগ্রীতে থাকা সামগ্রীগুলি <p id='txt'>প্রত্যাশিত ফলাফল হিসাবে অনুসরণ করবে:

<p id='txt'>
// All the HTML element within the <p> will be disappear
I am working in ABC company.
</p>

কেউ কীভাবে জাভাস্ক্রিপ্ট ফাংশন লিখতে আমাকে সহায়তা করতে পারেন?

ধন্যবাদ.

Comments

এটা কি তোমার প্রশ্নের উত্তর? পাঠ্য জাভাস্ক্রিপ্ট থেকে স্ট্রিপ এইচটিএমএল

— কাইলমিত

Answer 1

[2017-07-25] যেহেতু এই, গৃহীত উত্তর হতে চলতে একটি খুব হল hacky সমাধান থাকা সত্ত্বেও, আমি একত্রিত করছি Gabi এর কোড তা, আমার নিজের ছাড়ার একটি খারাপ উদাহরণ হিসাবে পরিবেশন করা।

<style>
.A {background: blue;}
.B {font-style: italic;}
.C {font-weight: bold;}
</style>

<script>
// my hacky approach:
function get_content() {
     var html = document.getElementById("txt").innerHTML;
     document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
    var element = document.getElementById('txt');
    element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
    txt.innerHTML = txt.innerText || txt.textContent;
}
</script>

<input type="button" onclick="get_content()" value="Get Content (bad)"/>
<input type="button" onclick="gabi_content()" value="Get Content (good)"/>
<input type="button" onclick="txt_content()" value="Get Content (shortest)"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

Comments

খারাপ কারণ হ্যাকি এবং ধীর। এমন কি গ্যারান্টি আছে যে রেন্ডার করা টেক্সটে নিজেই কখনও ট্যাগ থাকতে হবে না?

— ডোমি

না, এরকম কোনও গ্যারান্টি নেই। আমি পোস্ট করার পরে একটি দাবি অস্বীকার করেছি। এটি স্পষ্টতই ওপিটির উদ্দেশ্য পূরণ করেছে।

— jcomeau_ictx

এইচটিএমএলকে নিয়মিত এক্সপ্রেশন দিয়ে পার্স করার চেষ্টা করা সত্যই বিপজ্জনক --- এটি সঠিকভাবে পাওয়া অসম্ভব (আমার ধারণা এটি তাত্ত্বিকভাবে অসম্ভব)) অনেকগুলি এজ কেস রয়েছে এবং তারপরে অদ্ভুত ইনপুটটির মুখোমুখি হয়ে আপনার কোডটি ফুটে উঠেছে, যা এক্সএসএস করতে ঘন ঘন শোষণ করা যেতে পারে।

— ডেভিড 4'15

কেন এটি গ্রহণ করা হয়েছিল সে সম্পর্কে আমার ধারণা: এটি একটি সম্পূর্ণ উত্তর, যা এইচটিএমএল ফাইলের সাথে সাথেই কাটা-পেস্ট করা যায় এবং ব্রাউজারের মাধ্যমে পরীক্ষা করা যায়। আমি কখনও বলিনি এটি একটি ভাল উত্তর ছিল। আমি সমস্ত ভাল উত্তরগুলি দেখতে পেয়ে পোস্ট করেছি , এবং গ্রহণ করা হয়নি, এবং ওপিকে একটু হ্যান্ড হোল্ডিংয়ের দরকার পড়েছিল। এটি এমন কোনও অ্যাপ্লিকেশনের জন্য এখনও যথেষ্ট ভাল যার জন্য এইচটিএমএল উত্স ভারসাম্যহীন কোণ বন্ধনী না রাখার জন্য ইতিমধ্যে পরিচিত।

— jcomeau_ictx

Answer 2

আপনি এটি ব্যবহার করতে পারেন:

var element = document.getElementById('txt');
var text = element.innerText || element.textContent;
element.innerHTML = text;

আপনার যা প্রয়োজন তার উপর নির্ভর করে আপনি হয় element.innerTextবা ব্যবহার করতে পারেন element.textContent। তারা বিভিন্ন উপায়ে পৃথক। innerTextআপনি যা দেখেন (এইচটিএমএল রেন্ডার করা) নির্বাচন করুন এবং এটি ক্লিপবোর্ডে অনুলিপি করুন এমন কি হবে তা অনুমান করার চেষ্টা করে, যখন textContentকেবলমাত্র html ট্যাগগুলি সরিয়ে দেয় এবং আপনাকে কী ছেড়ে যায় তা দেয়।

innerText পুরানো আই ব্রাউজারগুলির সাথে সামঞ্জস্যতা রয়েছে (সেখান থেকে এসেছে)।

Comments

+1 - textএটি একটি লুপে অনেক কিছু সম্পন্ন হওয়ার পরে কিছু উচ্চ কার্য সম্পাদনের পদ্ধতি খুঁজছিল method jQuery যথেষ্ট পারফর্মেন্ট ছিল না, তবে এটি খুব দ্রুত ছিল। আইই 8 +, ক্রোম, এফএফ এ কাজ করেছেন। পারফেক্ট।

— ট্র্যাভিস জে

পুরানো IE এ, el.textContentহতে পারে undefinedএবং el.innerTextহতে পারে ""। কিন্তু "" || undefinedহয় undefined। ব্যবহার el.innerText || el.textContent || ''আরও ভাল হতে পারে।

— ওরিওল

ইনারটেক্সট প্রচ্ছদ পাঠ্য এবং স্ক্রিপ্ট / স্টাইল ট্যাগের সামগ্রী ফেরত দেয় না যখন পাঠ্য সামগ্রীটি করে does আপনি কোন textContent সমর্থন আই ই এর একটি সংস্করণ করছেন, তাহলে এটা প্রথম ব্যবহার করা বাঞ্ছনীয় হতে পারে, তাই el.textContent || el.innerText || ""।

— ডোমিনো

বর্তমানে এই উত্তরটি যে কারও কাছে পড়ছে তার পক্ষে কেবল একটি নোট, এই উত্তরের ছয় বছরেরও বেশি সময় পরে, আপনি এই দিনটি কেবল ব্যবহার করতে পারেন var text = element.textContent;; কিছু অধার্মিক কারণে যদি না আপনি এখনও IE8 বা নীচে সমর্থন করতে হবে ।

— অকেজো কোড

el.innerTextমোটামুটিভাবে হিসাবে একই el.textContent.replace(/\W+/g, ' ')। তারা একই নয়।

— পোলভ

Answer 3

আপনি যদি jquery ব্যবহার করতে পারেন তবে এটি সহজ

$("#txt").text()

Comments

আমাকে কেবল বলতে হবে, সমস্ত খাঁটি জেএস উত্তরগুলি দেখুন এবং তারপরে এইটি দেখুন। আমি jQuery ব্যবহার করার কারণ এটি দ্বিতীয় দ্বিতীয় কারণ (যেমন, এটি কাজগুলি সহজতর করে, আমার কাজের চাপ হ্রাস করে এবং পাঠযোগ্যতা বৃদ্ধি করে)। প্রথম সর্বাধিক গুরুত্বপূর্ণ কারণ (আমার কাছে) কারণ এটি অনেকগুলি ক্রস-সামঞ্জস্যের সমস্যাগুলি পরিচালনা করে, আমি অন্যথায় এমনকি সচেতন নাও হতে পারি (অস্বচ্ছলতা সামঞ্জস্য করতে jQuery ব্যবহার করার মতো, যাতে আমাকে কেবল আই 8 এর জন্য আলাদা লাইনটি লিখতে না হয়) filterসম্পত্তি লক্ষ্যবস্তু

— করতে।আমি

খাঁটি জেএস ওয়ান লাইনারের সমতুল্য: document.querySelector("#txt").innerText;লোকেরা পুরো jQuery লাইব্রেরিটিকে প্রায়শই অন্তর্ভুক্ত করে যখন তাদের একমাত্র প্রয়োজন কোডের কয়েকটি লাইন। এটা খারাপ অভ্যাস।

— লেভি জোহেনসেন

Answer 4

এই উত্তরটি কোনও HTML উপাদানগুলির জন্য কেবল পাঠ্য পেতে কাজ করবে।

এই প্রথম প্যারামিটার "নোড" হ'ল পাঠ্যটি পাওয়ার উপাদান। দ্বিতীয় প্যারামিটারটি isচ্ছিক এবং সত্যটি যদি উপাদানগুলির মধ্যে পাঠ্যের মধ্যে একটি স্থান যুক্ত করে তবে অন্যথায় সেখানে কোনও স্থান উপস্থিত না থাকে।

function getTextFromNode(node, addSpaces) {
    var i, result, text, child;
    result = '';
    for (i = 0; i < node.childNodes.length; i++) {
        child = node.childNodes[i];
        text = null;
        if (child.nodeType === 1) {
            text = getTextFromNode(child, addSpaces);
        } else if (child.nodeType === 3) {
            text = child.nodeValue;
        }
        if (text) {
            if (addSpaces && /\S$/.test(result) && /^\S/.test(text)) text = ' ' + text;
            result += text;
        }
    }
    return result;
}

Answer 5

আপনার যা প্রয়োজন তার উপর নির্ভর করে আপনি হয় element.innerTextবা ব্যবহার করতে পারেন element.textContent। তারা বিভিন্ন উপায়ে পৃথক। innerTextআপনি যা দেখেন (এইচটিএমএল রেন্ডার করা) নির্বাচন করুন এবং এটি ক্লিপবোর্ডে অনুলিপি করুন এমন কি হবে তা অনুমান করার চেষ্টা করে, যখন textContentকেবলমাত্র html ট্যাগগুলি সরিয়ে দেয় এবং আপনাকে কী ছেড়ে যায় তা দেয়।

innerText কেবলমাত্র আইই এর জন্য ব্যবহৃত হয় না এবং এটি সমস্ত বড় ব্রাউজারগুলিতে সমর্থিত । অবশ্যই, এর বিপরীতে textContent, এটি পুরানো IE ব্রাউজারগুলির সাথে সামঞ্জস্যযোগ্যতা রয়েছে (যেহেতু তারা এটি নিয়ে এসেছিল)।

সম্পূর্ণ উদাহরণ ( গাবীর উত্তর থেকে ):

var element = document.getElementById('txt');
var text = element.innerText || element.textContent; // or element.textContent || element.innerText
element.innerHTML = text;

Answer 6

এটি আরও আধুনিক মানের সাথে এখানে যা বলা হয়েছিল তার উপর ভিত্তি করে সংকলিত আমার পক্ষে কাজ করে। এটি একাধিক চেহারা আপ জন্য সেরা কাজ করে।

let element = document.querySelectorAll('.myClass')
  element.forEach(item => {
    console.log(item.innerHTML = item.innerText || item.textContent)
  })

Answer 7

এটি কাজ করা উচিত:

function get_content(){
   var p = document.getElementById("txt");
   var spans = p.getElementsByTagName("span");
   var text = '';
   for (var i = 0; i < spans.length; i++){
       text += spans[i].innerHTML;
   }

   p.innerHTML = text;
}

এই ভাটির চেষ্টা করুন: http://jsfiddle.net/7gnyc/2/

Answer 8

function get_content(){
 var returnInnerHTML = document.getElementById('A').innerHTML + document.getElementById('B').innerHTML + document.getElementById('A').innerHTML;
 document.getElementById('txt').innerHTML = returnInnerHTML;
}

যা করা উচিৎ.

Answer 9

চেষ্টা করুন (গাবির উত্তর ধারণার সংক্ষিপ্ত সংস্করণ )

function get_content() {
   txt.innerHTML = txt.textContent;
}

function get_content() {
   txt.innerHTML = txt.textContent ;
}

span { background: #fbb}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>