slice()在控制台中正确返回,但在

问题描述 投票:1回答:2
中未替换字符串

我在控制台中看到了我期望的子字符串,但是HTML中未更改原始字符串。

最终结果应截断每个表<td>中的任何长文本。

注意:我不想在每个<td>的HTML中使用limitTo,因为此解决方案是对使用数千个表的大型应用程序的测试,我们不想手动为更长的内容添加限制。

这是我遇到问题的JS代码段:(我留了言,因为它们是解决问题的相关尝试)

 // force table content to wrap to next line after 30 characters (limit set in CSS)
        for (var i = 0; i < tableTD.length; i++){
            var text = tableTD[i].textContent;
            //var truncatedText = '';
            if(text.length > 30 ) {
                tableTD[i].classList.add('wrap');
                truncate(text, 60);
                //truncatedText = truncate(text, 60);
                //return truncatedText;

            } else { tableTD[i].classList.add('nowrap'); }

        }

        // testing
        // function truncate(str, num){
        //     var truncatedStr = '';
        //     if (str.length > num) {
        //         truncatedStr = str.slice(0, (num - 2)) + '...'
        //     }
        //     return truncatedStr;
        // };

        function truncate(str, num){
            truncateStr = str.slice(0, (num - 2)) + '...';

            return truncateStr
        }

这是我在控制台中看到的:text truncated in console but not in HTML

这里是完整的JS(angularjs 1.6.9):

var app = angular.module('myApp', []);
app.controller('karinasSandboxCtrl', function($scope)
{
    // create some lines of data
    $scope.records = [
        {
            "Name" : "Peter Rabbit",
            "Age" : "34",
            "Hobbies" : "Peter Rabbit: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
            "NumberOne" : ".01",
            "NumberTwo" : "2828.09",
            "NumberThree" : "33829749.00",
            "NumberFour" : "379234738.0922",
            "ContentToMakeLonger1" : "blah-de blah blah blah",
            "ContentToMakeLonger2" : "doop-dee-doo",
            "ContentToMakeLonger3" : "blooooop",
            "ColumnOne" : "One",
            "ColumnTwo" : "Two Two",
            "ColumnThree" : "Three Three Three",
            "ColumnFour" : "Four Four Four Four",
            "Notes" :"Peter Rabbit: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
        } , {
            "Name" :"Sailor Moon",
            "Age" :"22",
            "Hobbies" : "Sailor Moon: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
            "NumberOne" : ".11",
            "NumberTwo" :"28.09",
            "NumberThree" : "33829749.00",
            "NumberFour":"379234738.0922",
            "ContentToMakeLonger1" : "blah-de blah blah blah",
            "ContentToMakeLonger2" : "doop-dee-doo",
            "ContentToMakeLonger3" : "blooooop",
            "ColumnOne" : "One",
            "ColumnTwo" :"Two Two",
            "ColumnThree" : "Three Three Three",
            "ColumnFour":"Four Four Four Four",
            "Notes" :"Sailor Moon: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
        } , {
            "Name" : "Fire Lizard",
            "Age" :"987",
            "Hobbies" : "Fire Lizard: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
            "NumberOne" : ".11",
            "NumberTwo" :"28.09",
            "NumberThree" : "33829749.00",
            "NumberFour":"379234738.0922",
            "ContentToMakeLonger1" : "blah-de blah blah blah",
            "ContentToMakeLonger2" : "doop-dee-doo",
            "ContentToMakeLonger3" : "blooooop",
            "ColumnOne" : "One",
            "ColumnTwo" :"Two Two",
            "ColumnThree" : "Three Three Three",
            "ColumnFour":"Four Four Four Four",
            "Notes" :"Fire Lizard: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
        }, {
            "Name" : "Tommy Turtle",
            "Age" :"24",
            "Hobbies" : "Tommy Turtle: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
            "NumberOne" : ".11",
            "NumberTwo" :"28.09",
            "NumberThree" : "33829749.00",
            "NumberFour":"379234738.0922",
            "ContentToMakeLonger1" : "blah-de blah blah blah",
            "ContentToMakeLonger2" : "doop-dee-doo",
            "ContentToMakeLonger3" : "blooooop",
            "ColumnOne" : "One",
            "ColumnTwo" :"Two Two",
            "ColumnThree" : "Three Three Three",
            "ColumnFour":"Four Four Four Four",
            "Notes" :"Tommy Turtle: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
        } , {
            "Name" : "Henry Hilgard",
            "Hobbies" : "Henry Hilgard: A big long list of things that I like to do inserted here so it can be truncated. Add a few more so it goes over 90 characters and needs to be truncated.",
            "NumberOne" : ".11",
            "NumberTwo" :"28.09",
            "NumberThree" : "33829749.00",
            "NumberFour":"379234738.0922",
            "ContentToMakeLonger1" : "blah-de blah blah blah",
            "ContentToMakeLonger2" : "doop-dee-doo",
            "ContentToMakeLonger3" : "blooooop",
            "ColumnOne" : "One",
            "ColumnTwo" :"Two Two",
            "ColumnThree" : "Three Three Three",
            "ColumnFour":"Four Four Four Four",
            "Notes" :"Henry Hilgard: And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes! And a TON of notes!",
        }  
    ];

    angular.element(document).ready(function(){

        var tableTD = document.querySelectorAll('table td');

        // testing
        var str = "Testing the substring thingy here to see if it will work";
        document.getElementById("demo").textContent = truncate(str, 20);

        // force table content to wrap to next line after 30 characters (limit set in CSS)
        for (var i = 0; i < tableTD.length; i++){
            var text = tableTD[i].textContent;
            //var truncatedText = '';
            if(text.length > 30 ) {
                tableTD[i].classList.add('wrap');
                truncate(text, 60);
                //truncatedText = truncate(text, 60);
                //return truncatedText;

            } else { tableTD[i].classList.add('nowrap'); }

        }

        // testing
        // function truncate(str, num){
        //     var truncatedStr = '';
        //     if (str.length > num) {
        //         truncatedStr = str.slice(0, (num - 2)) + '...'
        //     }
        //     return truncatedStr;
        // };

        function truncate(str, num){
            truncateStr = str.slice(0, (num - 2)) + '...';

            return truncateStr
        }

    });

});

这里是表格HTML:

<table ng-controller="karinasSandboxCtrl">
    <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Hobbies</th>
          <th>Number 1</th>
          <th>Number 2</th>
          <th>Number 3</th>
          <th>Number 4</th>
          <th>Content To Make Longer 1</th>
          <th>Content To Make Longer 2</th>
          <th>Content To Make Longer 3</th>
          <th>Column One</th>
          <th>Column Two</th>
          <th>Column Three</th>
          <th>Column Four</th>
          <th>Notes</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in records">
          <td>{{x.Name}}</td>
          <td>{{x.Age}}</td>
          <td>{{x.Hobbies}}</td>
          <td>{{x.NumberOne}}</td>
          <td>{{x.NumberTwo}}</td>
          <td>{{x.NumberThree}}</td>
          <td>{{x.NumberFour}}</td>
          <td>{{x.ContentToMakeLonger1}}</td>
          <td>{{x.ContentToMakeLonger2}}</td>
          <td>{{x.ContentToMakeLonger3}}</td>
          <td>{{x.ColumnOne}}</td>
          <td>{{x.ColumnTwo}}</td>
          <td>{{x.ColumnThree}}</td>
          <td>{{x.ColumnFour}}</td>
          <td>{{x.Notes }}</td>
       </tr>
   </tbody>
</table>

这里是相关的CSS:

td {
      padding: 6px 12px;
      vertical-align: top;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 30ch; // "ch" limits number of characters per line.
      &.nowrap {
        white-space: nowrap;
      }
      &.wrap {
        white-space: normal;
        min-width: 29ch; // so the line will not wrap before 29ch
      }
    }

我对javascript很陌生,所以这里可能缺少一些内容。感谢您的帮助:)

javascript html angularjs bootstrap-4
2个回答
1
投票

您实际上是在截断文本,但是在更改后您没有将其分配给变量。


0
投票

[将text传递给truncate(text, 60)时,仅text变量的值被截断,没有内容将应用于HTML内容本身。

© www.soinside.com 2019 - 2024. All rights reserved.