New line in HTML code text makes different text length. How to fix it?

Question

Sorry for my poor english.

During creating my private portfolio website, I found

    textTest1();
    textTest2();
    function textTest1(){
    var pText1 = $('p.textTest1').text();
    var newString ='';
    for(var i=0;i<pText1.length;i++){
        console.log('total index of text1 is'+ i);
    }
}
function textTest2(){
    var pText2 = $('p.textTest2').text();
    var newString2 ='';
    for(var i=0; i<pText2.length;i++){
        console.log('total index of text2 is' + i);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="textTest1">text test</p>   
        <p class="textTest2">
            text 
            test
        </p>

these two p tags have different length. I understand why it happens

because I had similar problem with CSS.

No problem if text is small, but it would be annoying if text takes more

than two~three lines.

Writing all texts in one line can solve problem but if the text is very long and

there are some tags inside(example: span, i) it will be horrible to read

and find in text editor.

Does somebody have any idea to solve or avoid problem such like this? (I mean

to get a real and right length of text)

Duplicate with https://stackoverflow.com/questions/360491/how-do-i-strip-white-space-when-grabbing-text-with-jquery — emil, Jan 19 '18 at 23:57
@emil thank you for a great link. I didn't really expect replace method should fix the problem. That's why I posted the question. Heh.. means I should learn more and more. Thank you for a great link! — oehqoehfo, Jan 20 '18 at 00:08
Ignore the down voters, they bust have born expert programmers, the rest of us learn from asking questions when we are stuck. — SANM2009, Jan 20 '18 at 02:19

Blue · Accepted Answer · 2018-01-20T00:00:31.057

1

The main issue is the whitespace (The spaces and new lines). We can see this by doing this:

var pText1 = $('p.textTest1').text();
var pText2 = $('p.textTest2').text();

console.log('"' + pText1 + '"', pText1.length);
console.log('"' + pText2 + '"', pText2.length);

//To fix this, one solution could be to strip all non-alphanumeric characters:

pText1 = pText1.replace(/\W+/g, '');
pText2 = pText2.replace(/\W+/g, '');

console.log('"' + pText1 + '"', pText1.length);
console.log('"' + pText2 + '"', pText2.length);

//Even better, let's create a function that just handles excess whitespace.

function cleanText(str) {
  //Trim all whitespace at the start and end
  str = str.trim();
  //Replace all whitespace (new lines, excess spaces) with just one space
  str = str.replace(/\s+/g, ' ');
  
  return str;
}

console.log('cleanText():');

pText1 = cleanText($('p.textTest1').text());
pText2 = cleanText($('p.textTest2').text());

console.log('"' + pText1 + '"', pText1.length);
console.log('"' + pText2 + '"', pText2.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="textTest1">text test</p>   
        <p class="textTest2">
            text 
            test
        </p>

Each space, tab, and new line counts as 1 character for .length calculations.

edited Jan 20 '18 at 00:00

answered Jan 19 '18 at 23:50

Blue

22,608
7
62
92

So, removing white spaces with replace method should fix the issue. Am I thinking right? – oehqoehfo Jan 19 '18 at 23:52
Yes it does, try it. – SANM2009 Jan 19 '18 at 23:53
Why is this answer down voted? some trigger happy users around for sure. – SANM2009 Jan 19 '18 at 23:54
@SANM2009: I down voted because the OP already knows the cause of the issue. I don't see how this is an answer. Why is that "trigger happy"? – Jan 19 '18 at 23:56
@rockstar He's looking to solve the issue. I've provided just that. – Blue Jan 19 '18 at 23:56
@FrankerZ: That's my point. You didn't solve it until just a moment ago, so why is everyone so confused by the vote? – Jan 19 '18 at 23:57
@FrankerZ: Your current solution will remove everything except alpha-numeric characters and underscore. While that's all there is in the simple example, it seems fairly clear that the OP is only wanting to normalize whitespace. – Jan 20 '18 at 00:00
@rockstar Modified to include a "nicer" `cleanText()` function which should clean up whitespace. Check the update OP – Blue Jan 20 '18 at 00:01
@SANM2009 Thank you! – oehqoehfo Jan 20 '18 at 00:05
@rockstar Thank you :) – oehqoehfo Jan 20 '18 at 00:06
someone can take a look to my answer bellow :) – YouneL Jan 20 '18 at 00:23

Scott Marcus · Answer 2 · 2018-01-20T02:56:11.337

First, call .trim() to remove the leading and trailing spaces.
Then call .replace() to remove the space, new lines and carriage returns in between words with a single space.

Also, you don't need to loop over the string to get its length, just use the .length property:

function getTrueLength(str){
  // Trim off the leading and trailing spaces, then replace the space, 
  // returns and new lines in the middle with a single space
  return str.text().trim().replace(/(\s+|\r+|\n+)/, " ").length;
}

console.log('total index of text1 is ' + getTrueLength($('p.textTest1')));
console.log('total index of text2 is ' + getTrueLength($('p.textTest2')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="textTest1">text



test</p>   
<p class="textTest2">
            text 
            test
</p>

score 0 · Answer 3 · answered Jan 20 '18 at 00:09

Use regular expression to remove new line and tab.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <p class="textTest1">text test</p>   
    <p class="textTest2">
        text 
        test
    </p>
    <script>
        textTest1();
        textTest2();

        function textTest1(){
            var pText1 = $('p.textTest1').text();
            var newString ='';
            for(var i=0;i<pText1.length;i++){
                console.log('total index of text1 is'+ i);
            }
        }
        function textTest2(){
            var pText2 = $('p.textTest2').text()
                            .replace(/\n/g, '')
                            .replace(/\t/g, ''); // and any other replace you want

            console.log(pText2);
            var newString2 ='';
            for(var i=0; i<pText2.length;i++){
                console.log('total index of text2 is' + i);
            }
        }
    </script>
</body></html>

YouneL · Answer 4 · 2018-01-20T01:15:52.343

Use:

pText1.match(/[^\s]+/g).join(' ');

This will match anything except spaces, put them into array and then join them by only one space. working example bellow:

textTest1();
textTest2();

function textTest1(){
    var pText1 = $('p.textTest1').text();
    
    console.log(pText1.match(/[^\s]+/g).join(' ').length);
    console.log(pText1.match(/[^\s]+/g).join(' '));
}

function textTest2(){
    var pText2 = $('p.textTest2').text();
    
    console.log(pText2.match(/[^\s]+/g).join(' ').length);
    console.log(pText2.match(/[^\s]+/g).join(' '));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="textTest1">text test</p>   
<p class="textTest2">
            text 
            test
</p>

Remove the `+` from the character set. It's interpreted as an actual `+` character and so it's excluded. `pText1.match(/[^\s]+/g)` You could also make it shorter with `\S` instead. `pText1.match(/\S+/g)` — , Jan 20 '18 at 01:12

New line in HTML code text makes different text length. How to fix it?

4 Answers4