Selecting, and Changing, Text outside of any element

Question

I am trying to change the text of some HTML on a page. I cannot directly edit the HTML because in this case it is generated by XSLT. I am trying to select text, using jQuery, that is not inside of any element.

<span class="available">
    <b>LARGE PRINT</b>
        <span class="term">LARGE PRINT</span>
        , J..
</span>

I am trying to select the ", J.." text and remove the extra period after and remove the comma before. Any insights on how I can select this text and than manipulate it?

Thanks in advance.

Theoretically, it is still in a node, as it is part of the `available` span, can't you just fix the document from which you are generating this? — Icepickle, May 11 '18 at 17:49
Possible duplicate of [How do I select text nodes with jQuery?](https://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — AndrewL64, May 11 '18 at 18:02
@Icepickle I wish, unfortunately it is generated by an XSLT file I have no access to. — illibrarian, May 11 '18 at 18:03

Ajay Reddy · Answer 1 · 2018-05-11T18:11:34.213

2

Try this: Assuming you are using JQUERY

 $(document).ready(function () {

    var a = $('.available').contents().filter(function () {
        return this.nodeType == 3;
    }).text().trim();
    var b = a.substring(1, a.length - 1);
    alert(b);
});

edited May 11 '18 at 18:11

answered May 11 '18 at 17:57

Ajay Reddy

113
6

score 1 · Answer 2 · answered May 11 '18 at 17:47

1

Something like this might work

<span class="available">
    <b>LARGE PRINT</b>
        <span class="term">LARGE PRINT</span>
        <span id="text_to_change">, J..</span>
</span>

if you have access to Jquery

var htmlText = $("#text_to_change").html();
htmlText = htmlText.replace(/^, /g, ""); 
htmlText = htmlText.replace(/\.\.$/g, ""); 
$("#text_to_change").html(htmlText);

Without Jquery

var htmlText = document.getElementById("text_to_change").innerHTML;
htmlText = htmlText.replace(/^, /g, ""); 
htmlText = htmlText.replace(/\.\.$/g, ""); 
document.getElementById("text_to_change").innerHTML = htmlText;

answered May 11 '18 at 17:47

J. Burke

179
1
5

1

But now you have added a node around the text to be changed, exactly what the OP mentioned that he couldn't do – Icepickle May 11 '18 at 17:48
Then, of course, you would need to manipulate the text in $("#available").html() or another element in the DOM. – J. Burke May 11 '18 at 17:58

Selecting, and Changing, Text outside of any element

2 Answers2