শরীরের পাঠ্যে শব্দগুলি প্রতিস্থাপন করুন

Question 1

এইচটিএমএল এর শরীরে স্থাপন করা কোনও টেবিল উপাদানটির মধ্যে কি সাধারণ পাঠ্য প্রতিস্থাপনের কোনও উপায় আছে?

"হ্যালো" কে "হাই" দিয়ে প্রতিস্থাপন করার মতো?

দয়া করে কেবল jQuery ছাড়াই জাভাস্ক্রিপ্ট ব্যবহার করুন ।

Question 2

অন্য ব্যবহারের সঙ্গে আপনার HTML এ একটি স্ট্রিং প্রতিস্থাপন করতে প্রতিস্থাপন উপর পদ্ধতি innerHTML :

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

নোট করুন যে এটি helloআপনার এইচটিএমএল কোডের কোনও উদাহরণ (যেমন শ্রেণীর নাম ইত্যাদি including সহ ) সারা শরীরের প্রথম স্থানটিকে প্রতিস্থাপন করবে , তাই সতর্কতার সাথে ব্যবহার করুন - ভাল ফলাফলের জন্য আপনার কোডটি লক্ষ্য করে আপনার প্রতিস্থাপনের সুযোগকে সীমাবদ্ধ করার চেষ্টা করুন document.getElementById বা অনুরূপ।

লক্ষ্য স্ট্রিংয়ের সমস্ত দৃষ্টান্ত প্রতিস্থাপন করতে, gলোবল পতাকা সহ একটি সাধারণ নিয়মিত অভিব্যক্তি ব্যবহার করুন :

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');

Question 3

নীচের ফাংশনটি আমার পক্ষে নিখুঁতভাবে কাজ করে:

// Note this *is* JQuery, see below for JS solution instead
function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function () {
    var $this = $(this);
    if (!$this.children().length)
       $this.text($this.text().replace(matcher, newText));
  });
}

এখানে একটি ব্যবহারের উদাহরণ:

function replaceAllText() {
  replaceText('*', 'hello', 'hi', 'g');
}

$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);

আপনি এর মতো প্রত্যক্ষ প্রতিস্থাপন করতেও ব্যবহার করতে পারেন:

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

তবে এটির সাথে সাবধান থাকুন কারণ এটি ট্যাগ, সিএসএস এবং স্ক্রিপ্টগুলিকেও প্রভাবিত করতে পারে।

সম্পাদনা: খাঁটি জাভাস্ক্রিপ্ট সমাধানের পরিবর্তে এই পদ্ধতিটি ব্যবহার করুন:

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  var elems = document.querySelectorAll(selector), i;

  for (i = 0; i < elems.length; i++)
    if (!elems[i].childNodes.length)
      elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}

Question 4

পার্শ্ব প্রতিক্রিয়া ছাড়াই নিরাপদে পাঠ্য প্রতিস্থাপন করতে এই ফাংশনটি শেষ করেছি (এতদূর):

function replaceInText(element, pattern, replacement) {
    for (let node of element.childNodes) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                replaceInText(node, pattern, replacement);
                break;
            case Node.TEXT_NODE:
                node.textContent = node.textContent.replace(pattern, replacement);
                break;
            case Node.DOCUMENT_NODE:
                replaceInText(node, pattern, replacement);
        }
    }
}

এটি এমন ক্ষেত্রে যেখানে 16 কিলোবাইট findAndReplaceDOMTextকিছুটা ভারী।

Question 5

আমারও একই সমস্যা ছিল। আমি অভ্যন্তরীণ এইচটিএমএল এ প্রতিস্থাপন ব্যবহার করে আমার নিজস্ব ফাংশন লিখেছি, তবে এটি অ্যাঙ্কর লিঙ্কগুলি এবং এ জাতীয় স্ক্রু আপ করতে পারে।

এটি সঠিকভাবে কাজ করার জন্য আমি এটি সম্পন্ন করতে একটি লাইব্রেরি ব্যবহার করেছি।

লাইব্রেরিতে একটি দুর্দান্ত API রয়েছে। স্ক্রিপ্ট অন্তর্ভুক্ত করার পরে আমি এটিকে এটি বলেছিলাম:

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);

Question 6

আমি সত্যিই একটি বড় স্ট্রিং প্রতিস্থাপন করার চেষ্টা করছিলাম এবং কিছু কারণে নিয়মিত প্রকাশগুলি কিছু ত্রুটি / ব্যতিক্রম ছুঁড়ে মারছিল।

তাই আমি নিয়মিত প্রকাশের জন্য এই বিকল্পটি পেয়েছি যা বেশ দ্রুত গতিতে চলে। কমপক্ষে এটি আমার পক্ষে যথেষ্ট দ্রুত ছিল:

var search = "search string";
var replacement = "replacement string";

document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)

src: জাভাস্ক্রিপ্টে স্ট্রিংয়ের সমস্ত উপস্থিতি কীভাবে প্রতিস্থাপন করবেন?

Question 7

ডিফল্ট জাভাস্ক্রিপ্ট স্ট্রিং প্রতিস্থাপন ফাংশন ব্যবহার করুন

var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;

Question 8

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

সুতরাং আমি প্রথমে এইচটিএমএল ডিওএম নোডের মাধ্যমে কেবল পাঠ্য নোড উপাদানগুলি পিকআপ করি

function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

textNodes=textNodesUnder(document.body)
for (i in textNodes) { textNodes[i].nodeValue = textNodes[i].nodeValue.replace(/hello/g, 'hi');

এবং এরপরে আমি চক্রক্রমে তাদের সকলের প্রতিস্থাপনটি প্রয়োগ করেছিলাম

Question 9

আমি এই ত্রুটিটি পেতে থাকায় ফানকি-ভবিষ্যতের উত্তরে একটি উদাহরণ যুক্ত করতে চেয়েছি :

Uncaught TypeError: element.childNodes is not iterable

এটি ব্যবহার করুন:

replaceInText(document.body,"search term","replacement");

এটি jQuery নির্বাচকদের সাথে আমার পক্ষে কাজ করে নি।

Question 10

কখনও কখনও পরিবর্তনগুলি document.body.innerHTMLপৃষ্ঠায় কিছু জেএস স্ক্রিপ্টগুলি ভেঙে দেয়। এখানে সংস্করণ রয়েছে যা কেবলমাত্র textউপাদানগুলির বিষয়বস্তু পরিবর্তন করে:

function replace(element, from, to) {
    if (element.childNodes.length) {
        element.childNodes.forEach(child => replace(child, from, to));
    } else {
        const cont = element.textContent;
        if (cont) element.textContent = cont.replace(from, to);
    }
};

replace(document.body, new RegExp("hello", "g"), "hi");

Question 11

আমি নতুন Javascriptএবং এই দক্ষতাগুলি শিখতে শুরু করেছি। নীচের পদ্ধতিটি পাঠ্য প্রতিস্থাপনের জন্য দরকারী কিনা দয়া করে তা পরীক্ষা করে দেখুন।

<script>

    var txt=document.getElementById("demo").innerHTML;
    var pos = txt.replace(/Hello/g, "hi")
    document.getElementById("demo").innerHTML = pos;

</script>