Replace dynamically generated text elements

Question

I am working on some code that is using dynamically generated graphs. And all of these graphs have legends at the y-axis. Now my goal is to check how long the longest legend-string is, and if the longest one is bigger than 20 characters, I only want to show the first characters of every string.

With the code below, I achieved that i can alert the desired shortened strings; but I do not know how to change the text now with these new strings.

var textLengthArray = [];
var labelStrings = domContainer.find(" g > .brm-y-direction > .tick > text");

labelStrings.each(function() {
    textLengthArray.push($(this).text());
});

var longestString = textLengthArray.sort(function(a, b) {
    return b.length - a.length;
})[0];

if (longestString.length >= 20) {
    $("g.tick text").css("font-size", "9pt");
    var offsetLeft = longestString.length * 3.7;

    textLengthArray.map(function(sub) {
        var subString = sub.substring(0, 6);
        alert(subString);
    });
};

I have tried something like:

$(labelStrings).replaceWith(subString)

With this, I had no legend at all, since I have replaced the whole text tag and all of its attributes with the new string.

So is there any way of not touching the tag and its values at all, but simply change the text between the opening and closing tag?

Thanks in advance!

If you want to measure text width, [calculate it](http://stackoverflow.com/a/21015393/1762224) using ` — Mr. Polywhirl, Apr 04 '16 at 12:07

score 0 · Answer 1 · answered Apr 04 '16 at 12:10

0

That is basics you should research Google before coming to SO, anyway you can use $(labelStrings).html(subString) or $(labelStrings).text(subString) - they will both change only the inner content between the tags

answered Apr 04 '16 at 12:10

Velimir Tchatchevsky

2,812
1
16
21

This is replacing all strings with the same string. – SaltyM Apr 04 '16 at 12:13
what does labelStrings select in your document - which of those do you want to change? – Velimir Tchatchevsky Apr 04 '16 at 12:19
labelStrings is finding all strings that are needed for the graph. So "First Label", "Second Label" and "Third Label". Right now all get replaced bei "Third" (since i only want to show the first characters). Desired is "First", "Second", "Third". – SaltyM Apr 04 '16 at 12:31
than labelStrings is not the right selector to use, try to add a class or id to the wanted field or at least come up with a selector that would return only it like $("label:eq(2)", labelStrings) - for the third element - note that selector is just an example I would need the HTML to find out a working one – Velimir Tchatchevsky Apr 04 '16 at 12:42

score 0 · Accepted Answer · answered Apr 04 '16 at 18:38

sth. like this?

var $nodes = domContainer.find(" g > .brm-y-direction > .tick > text");

var longestLength = 0;
$nodes.each(function(){
    longestLength = Math.max(longestLength, $(this).text().length);
});

if(longestLength >= 20){
    $("g.tick text").css("font-size", "9pt");
    var offsetLeft = longestLength * 3.7;

    $nodes.each(function(){
        var $this = $(this);
        var text = $this.text();
        var substr = text.substr(0, 6);

        console.log(substr);

        $this.text(substr);
    });
}

Replace dynamically generated text elements

2 Answers2