কিভাবে একটি এলিমেন্টের টেক্সট নোড পাবেন?

Question 1

<div class="title">
   I am text node
   <a class="edit">Edit</a>
</div>

আমি "আমি পাঠ্য নোড" পেতে চাই, "সম্পাদনা" ট্যাগটি সরাতে চাই না এবং একটি ক্রস ব্রাউজার সমাধানের প্রয়োজন।

Question 2

var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

এটি contentsনির্বাচিত উপাদানটির মধ্যে পায় এবং এটিতে একটি ফিল্টার ফাংশন প্রয়োগ করে। ফিল্টার ফাংশনটি কেবল পাঠ্য নোডগুলি (যেমন সেই নোডগুলি সহ nodeType == Node.TEXT_NODE) প্রদান করে।

Question 3

ব্যবহার করে আপনি প্রথম চাইল্ডনোডের নোডভ্যালু পেতে পারেন

$('.title')[0].childNodes[0].nodeValue

http://jsfiddle.net/TU4FB/

Question 4

যদি আপনি বোঝাতে চান যে উপাদানটিতে প্রথম পাঠ্য নোডের মান পান তবে এই কোডটি কাজ করবে:

var oDiv = document.getElementById("MyDiv");
var firstText = "";
for (var i = 0; i < oDiv.childNodes.length; i++) {
    var curNode = oDiv.childNodes[i];
    if (curNode.nodeName === "#text") {
        firstText = curNode.nodeValue;
        break;
    }
}

আপনি এখানে এটি ক্রিয়াতে দেখতে পারেন: http://jsfiddle.net/ZkjZJ/

Question 5

"জটিল" বা গভীরভাবে নেস্টেড উপাদানগুলির জন্য কার্যকর হতে পারে এমন আরেকটি নেটিভ জেএস সমাধান হ'ল নোডিয়েট্রেটার ব্যবহার করা । NodeFilter.SHOW_TEXTদ্বিতীয় আর্গুমেন্ট ("হোয়াটটোশো") হিসাবে রাখুন এবং উপাদানটির কেবল পাঠ্য নোডের উপর পুনরাবৃত্তি করুন।

var root = document.querySelector('p'),
    iter = document.createNodeIterator(root, NodeFilter.SHOW_TEXT),
    textnode;

// print all text nodes
while (textnode = iter.nextNode()) {
  console.log(textnode.textContent)
}

<p>
<br>some text<br>123
</p>

স্নিপেট প্রসারিত করুন

আপনি ব্যবহার করতে পারেন TreeWalker। NodeIteratorউভয়ের মধ্যে পার্থক্য হ'ল এটি একটি সরল রৈখিক পুনরাবৃত্তকারী, তবে TreeWalkerআপনাকে সহোদর ও পূর্বপুরুষদের মাধ্যমেও নেভিগেট করতে দেয়।

Question 6

খাঁটি জাভাস্ক্রিপ্ট: মিনিমালিস্ট ist

প্রথমে, ডিওএম-এ পাঠ্যের সন্ধান করার সময় এটিকে সর্বদা মনে রাখবেন।

এমডিএন - ডিওমে সাদা স্থান

এই সমস্যাটি আপনাকে আপনার এক্সএমএল / এইচটিএমএলের কাঠামোর দিকে মনোযোগ দেবে।

এই খাঁটি জাভাস্ক্রিপ্ট উদাহরণে, আমি একাধিক পাঠ্য নোডগুলির সম্ভাবনার জন্য দায়বদ্ধ যা অন্য ধরণের নোডের সাথে ইন্টারলিভড হতে পারে । যাইহোক, প্রাথমিকভাবে, আমি হোয়াইটস্পেসের বিষয়ে রায় দিই না, ফিল্টারিংয়ের কাজটি অন্য কোডে রেখে।

এই সংস্করণে, আমি NodeListকলিং / ক্লায়েন্ট কোড থেকে একটি পাস করি ।

/**
* Gets strings from text nodes. Minimalist. Non-robust. Pre-test loop version.
* Generic, cross platform solution. No string filtering or conditioning.
*
* @author Anthony Rutledge
* @param nodeList The child nodes of a Node, as in node.childNodes.
* @param target A positive whole number >= 1
* @return String The text you targeted.
*/
function getText(nodeList, target)
{
    var trueTarget = target - 1,
        length = nodeList.length; // Because you may have many child nodes.

    for (var i = 0; i < length; i++) {
        if ((nodeList[i].nodeType === Node.TEXT_NODE) && (i === trueTarget)) {
            return nodeList[i].nodeValue;  // Done! No need to keep going.
        }
    }

    return null;
}

অবশ্যই, node.hasChildNodes()প্রথমে পরীক্ষার মাধ্যমে , প্রাক-পরীক্ষার forলুপ ব্যবহার করার প্রয়োজন হবে না ।

/**
* Gets strings from text nodes. Minimalist. Non-robust. Post-test loop version.
* Generic, cross platform solution. No string filtering or conditioning.
*
* @author Anthony Rutledge
* @param nodeList The child nodes of a Node, as in node.childNodes.
* @param target A positive whole number >= 1
* @return String The text you targeted.
*/
function getText(nodeList, target)
{
    var trueTarget = target - 1,
        length = nodeList.length,
        i = 0;

    do {
        if ((nodeList[i].nodeType === Node.TEXT_NODE) && (i === trueTarget)) {
            return nodeList[i].nodeValue;  // Done! No need to keep going.
         }

        i++;
    } while (i < length);

    return null;
}

খাঁটি জাভাস্ক্রিপ্ট: মজবুত

এখানে getTextById()ফাংশনটিতে দুটি সহায়ক ফাংশন ব্যবহার করা হয়: getStringsFromChildren()এবং filterWhitespaceLines()।

getStringsFromChildren () থেকে

/**
* Collects strings from child text nodes.
* Generic, cross platform solution. No string filtering or conditioning.
*
* @author Anthony Rutledge
* @version 7.0
* @param parentNode An instance of the Node interface, such as an Element. object.
* @return Array of strings, or null.
* @throws TypeError if the parentNode is not a Node object.
*/
function getStringsFromChildren(parentNode)
{
    var strings = [],
        nodeList,
        length,
        i = 0;

    if (!parentNode instanceof Node) {
        throw new TypeError("The parentNode parameter expects an instance of a Node.");
    }

    if (!parentNode.hasChildNodes()) {
        return null; // We are done. Node may resemble <element></element>
    }

    nodeList = parentNode.childNodes;
    length = nodeList.length;

    do {
        if ((nodeList[i].nodeType === Node.TEXT_NODE)) {
            strings.push(nodeList[i].nodeValue);
         }

        i++;
    } while (i < length);

    if (strings.length > 0) {
        return strings;
    }

    return null;
}

ফিল্টারউইটস্পেসলাইনস ()

/**
* Filters an array of strings to remove whitespace lines.
* Generic, cross platform solution.
*
* @author Anthony Rutledge
* @version 6.0
* @param textArray a String associated with the id attribute of an Element.
* @return Array of strings that are not lines of whitespace, or null.
* @throws TypeError if the textArray param is not of type Array.
*/
function filterWhitespaceLines(textArray) 
{
    var filteredArray = [],
        whitespaceLine = /(?:^\s+$)/; // Non-capturing Regular Expression.

    if (!textArray instanceof Array) {
        throw new TypeError("The textArray parameter expects an instance of a Array.");
    }

    for (var i = 0; i < textArray.length; i++) {
        if (!whitespaceLine.test(textArray[i])) {  // If it is not a line of whitespace.
            filteredArray.push(textArray[i].trim());  // Trimming here is fine. 
        }
    }

    if (filteredArray.length > 0) {
        return filteredArray ; // Leave selecting and joining strings for a specific implementation. 
    }

    return null; // No text to return.
}

getTextById ()

/**
* Gets strings from text nodes. Robust.
* Generic, cross platform solution.
*
* @author Anthony Rutledge
* @version 6.0
* @param id A String associated with the id property of an Element.
* @return Array of strings, or null.
* @throws TypeError if the id param is not of type String.
* @throws TypeError if the id param cannot be used to find a node by id.
*/
function getTextById(id) 
{
    var textArray = null;             // The hopeful output.
    var idDatatype = typeof id;       // Only used in an TypeError message.
    var node;                         // The parent node being examined.

    try {
        if (idDatatype !== "string") {
            throw new TypeError("The id argument must be of type String! Got " + idDatatype);
        }

        node = document.getElementById(id);

        if (node === null) {
            throw new TypeError("No element found with the id: " + id);
        }

        textArray = getStringsFromChildren(node);

        if (textArray === null) {
            return null; // No text nodes found. Example: <element></element>
        }

        textArray = filterWhitespaceLines(textArray);

        if (textArray.length > 0) {
            return textArray; // Leave selecting and joining strings for a specific implementation. 
        }
    } catch (e) {
        console.log(e.message);
    }

    return null; // No text to return.
}

এরপরে, রিটার্ন মান (অ্যারে বা নাল) ক্লায়েন্ট কোডে পাঠানো হয় যেখানে এটি পরিচালনা করা উচিত। আশা করা যায়, অ্যারেতে সত্যিকারের পাঠ্যের স্ট্রিং উপাদান থাকা উচিত, হোয়াইটস্পেসের লাইনে নয়।

খালি স্ট্রিং ( ""হয় না) না কারণ আপনি একটি টেক্সট নোড প্রয়োজন সঠিকভাবে বৈধ পাঠ্য উপস্থিতি নির্দেশ ফিরে আসেন। প্রত্যাবর্তন ( "") ফেরত পাঠ্য নোডের উপস্থিতিটি ভুল ধারণা প্রদান করতে পারে, যার ফলে কেউ এই মান ধরে নিতে পারে যে তারা এর মান পরিবর্তন করে পাঠ্যটিকে পরিবর্তন করতে পারে .nodeValue। এটি মিথ্যা, কারণ খালি স্ট্রিংয়ের ক্ষেত্রে পাঠ্য নোডের অস্তিত্ব নেই।

উদাহরণ 1 :

<p id="bio"></p> <!-- There is no text node here. Return null. -->

উদাহরণ 2 :

<p id="bio">

</p> <!-- There are at least two text nodes ("\n"), here. -->

সমস্যাটি তখন উপস্থিত হয় যখন আপনি নিজের এইচটিএমএলকে ফাঁক করে ফাঁক করে পড়া সহজ করতে চান। এখন, কোনও মানব পাঠযোগ্য বৈধ পাঠ্য না থাকলেও এখনও"\n" তাদের .nodeValueবৈশিষ্ট্যগুলিতে নিউলাইন ( ) অক্ষরযুক্ত পাঠ্য নোড রয়েছে ।

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

for (var i = 0; i < length; i++) {
    if (nodeList[i].nodeType === Node.TEXT_NODE) {
            textNodes.push(nodeList[i].nodeValue);
    }
}

উদাহরণস্বরূপ দুটি, দুটি পাঠ্য নোড বিদ্যমান এবং তাদের উভয়ের ( ) getStringFromChildren()ফেরত দেবে । তবে খাঁটি হোয়াইটস্পেস অক্ষরের লাইনগুলি ফিল্টার করার জন্য একটি নিয়মিত অভিব্যক্তি ব্যবহার করে।.nodeValue"\n"filterWhitespaceLines()

nullনিউলাইন ( "\n") অক্ষরগুলির পরিবর্তে ক্লায়েন্ট / কলিং কোডের কাছে মিথ্যা বলার ফর্মটি ফিরছে ? মানুষের ভাষায়, না। ডম শর্তাবলী, হ্যাঁ। তবে, এখানে সমস্যাটি পাঠ্য পাচ্ছে, এটি সম্পাদনা করছে না। কলিং কোডটিতে ফিরে আসার মতো কোনও মানব পাঠ্য নেই।

কারও এইচটিএমএলে কতগুলি নতুন লাইন অক্ষর উপস্থিত হতে পারে তা কেউ কখনই জানতে পারে না। "দ্বিতীয়" নিউলাইন চরিত্রের সন্ধান করা এমন কাউন্টার তৈরি করা বিশ্বাসযোগ্য নয়। এটি অস্তিত্ব থাকতে পারে।

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

নির্বিশেষে, আপনি অসাধারণ কিছু করছেন এমন ক্ষেত্রে ব্যতীত আপনার কোন পাঠ্য নোডের .nodeValueসম্পত্তিতে সত্যিকারের, মানব পাঠযোগ্য পাঠ্য যা আপনি সম্পাদনা করতে চান তা নির্ধারণ করার একটি উপায় প্রয়োজন । filterWhitespaceLinesআমাদের সেখানে অর্ধেক পথ।

var whitespaceLine = /(?:^\s+$)/; // Non-capturing Regular Expression.

for (var i = 0; i < filteredTextArray.length; i++) {
    if (!whitespaceLine.test(textArray[i])) {  // If it is not a line of whitespace.
        filteredTextArray.push(textArray[i].trim());  // Trimming here is fine. 
    }
}

এই মুহুর্তে আপনার কাছে আউটপুট থাকতে পারে যা দেখতে দেখতে:

["Dealing with text nodes is fun.", "Some people just use jQuery."]

কোনও গ্যারান্টি নেই যে এই দুটি স্ট্রিংটি ডিওএমে একে অপরের সাথে সংলগ্ন, সুতরাং তাদের সাথে যোগ দেওয়ার .join()ফলে একটি অপ্রাকৃত সংমিশ্রণ তৈরি হতে পারে। পরিবর্তে, যে কোডটি কল করে getTextById(), আপনি কোন স্ট্রিংয়ের সাথে কাজ করতে চান তা চয়ন করতে হবে।

আউটপুট পরীক্ষা করুন।

try {
    var strings = getTextById("bio");

    if (strings === null) {
        // Do something.
    } else if (strings.length === 1) {
        // Do something with strings[0]
    } else { // Could be another else if
        // Do something. It all depends on the context.
    }
} catch (e) {
    console.log(e.message);
}

এক যোগ করতে পারিনি .trim()ভেতরে getStringsFromChildren()সামনের এবং হোয়াইটস্পেস trailing পরিত্রাণ পেতে (অথবা একটি শূন্য দৈর্ঘ্য স্ট্রিং মধ্যে শূণ্যস্থান একটি গুচ্ছ ঘুরে ( ""), কিন্তু কিভাবে আপনি স্ট্রিং জানতে পারেন অবরোহমার্গী কি যে অ্যাপ্লিকেশান পাঠ্য ঘটতে আছে করার প্রয়োজন হতে পারে () একবার এটি খুঁজে পাওয়া যায়? আপনি না, তাই এটি একটি নির্দিষ্ট প্রয়োগের জন্য ছেড়ে দিন, এবং getStringsFromChildren()জেনেরিক হতে দিন ।

অনেক সময় থাকতে পারে যখন এই স্তরের সুনির্দিষ্টতার ( targetএবং এই জাতীয়) প্রয়োজন হয় না। ওটা দারুন. এই ক্ষেত্রে একটি সহজ সমাধান ব্যবহার করুন। তবে, একটি সাধারণীকরণ করা অ্যালগরিদম আপনাকে সহজ এবং জটিল পরিস্থিতিতে সমন্বিত করতে সক্ষম করে।

Question 7

ES6 সংস্করণ যা প্রথম # পাঠ্য নোড সামগ্রীতে ফিরে আসে

const extract = (node) => {
  const text = [...node.childNodes].find(child => child.nodeType === Node.TEXT_NODE);
  return text && text.textContent.trim();
}

Question 8

.text() - for jquery

$('.title').clone()    //clone the element
.children() //select all the children
.remove()   //remove all the children
.end()  //again go back to selected element
.text();    //get the text of element

Question 9

এটি হোয়াইটস্পেসকেও এড়িয়ে যাবে তাই আপনার মূল জাভাস্ক্রিপ্ট ব্যবহার করে খালি পাঠ্য নোট.কোড পাওয়া যায় নি।

var oDiv = document.getElementById("MyDiv");
var firstText = "";
for (var i = 0; i < oDiv.childNodes.length; i++) {
    var curNode = oDiv.childNodes[i];
    whitespace = /^\s*$/;
    if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) {
        firstText = curNode.nodeValue;
        break;
    }
}

এটি jsfiddle এ দেখুন: - http://jsfiddle.net/webx/ZhLep/

Question 10

আপনি text()কেবল পাঠ্য নোডগুলি পেতে এক্সপাথের নোড পরীক্ষাটিও ব্যবহার করতে পারেন । উদাহরণ স্বরূপ

var target = document.querySelector('div.title');
var iter = document.evaluate('text()', target, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
var node;
var want = '';

while (node = iter.iterateNext()) {
    want += node.data;
}

Question 11

সমস্ত চাইল্ডনড (পুনরাবৃত্ত) এর সংমিশ্রিত পাঠ্যের বিপরীতে একটি স্ট্রিং তৈরি করতে এটি ES6 এ আমার সমাধান । নোট যে চাইল্ডনোড এর shdowroot এছাড়াও পরিদর্শন করা হয়।

function text_from(node) {
    const extract = (node) => [...node.childNodes].reduce(
        (acc, childnode) => [
            ...acc,
            childnode.nodeType === Node.TEXT_NODE ? childnode.textContent.trim() : '',
            ...extract(childnode),
            ...(childnode.shadowRoot ? extract(childnode.shadowRoot) : [])],
        []);

    return extract(node).filter(text => text.length).join('\n');
}

এই সমাধানটি https://stackoverflow.com/a/41051238./1300775 এর সমাধান দ্বারা অনুপ্রাণিত হয়েছিল ।