Javascript 如果文本格式为html，则使用angularjs显示更少/更多文本

我读过关于使用angularjs隐藏和显示长文本的stackoverflow问题。 我的问题是，我从服务器端返回的文本是html文本，带有HREF和标记，或者我可以将其作为标记返回，然后在客户端进行解析

问题是，若文本中有html或标记，如何将文本剪切成短显示版本

在其中一个答案中，我找到了一个指令，可以剪切长文本并显示更多/更少的链接

而且这个指令可以将html标记分为两部分，这样文本就会被破坏

因此，我的问题将分为两部分：

如何在服务器端更好地存储用户输入，这将在输出后显示href链接和\n，并且可以切换短/长文本版本

angularjs代码的外观如何，因此它将解析html或标记以切换短/长文本版本

编辑：

我使用angular和css解决方案部分解决了展开/折叠问题，这也解决了解析html文本的问题

.expand-wrapper {
    &.text-expanded {
        .text-container {
            overflow: visible;
            height: auto;
        }
        .btn-text-expand {
            .hidden;
        }
    }
    &.text-hidden {
        .text-container {
            height: 40px;
            overflow: hidden;
        }
        .btn-text-collapse {
            .hidden;
        }
    }
}


<div class="expand-wrapper" ng-class="{ 'text-expanded': show, 'text-hidden': !show }">
    <div class="text-container">
        Long text goes here....            
    </div>
    <button class="btn-text-expand" ng-click="show = true">Show text</button>
    <button class="btn-text-collapse" ng-click="show = false">Hide text</button>
</div>

---

但如果文本大小的高度小于40px，我怎么能隐藏显示按钮呢？因为没有什么可扩展的

请尝试使用textContainer.getBoundingClientRect.height来获取文本高度，并将条件绑定到按钮的ng show属性，或者直接在处理服务器响应的代码中应用它。

要扩展上面提供的答案，下面是我隐藏show按钮所做的操作。我在元素上创建了一个指令，根据该元素的高度设置范围属性，并在“显示”按钮上使用它：

       link: function (scope, element, attrs) {
            scope.getElementDimensions = function () {
                return { 'ht': element.height() };
            };

            scope.$watch(
                scope.getElementDimensions,
                function (newValue, oldValue) {
                    if (newValue.ht > 40) {
                        scope.showMoreButton = true;
                    }
                },
                true
            );

            element.bind('load', function () {
                scope.$apply();
            });
        }

<button class="btn-text-expand" ng-click="show = true" ng-show="showMoreButton">Show text</button>

您可以在“显示”按钮上使用此showMoreButton道具：

       link: function (scope, element, attrs) {
            scope.getElementDimensions = function () {
                return { 'ht': element.height() };
            };

            scope.$watch(
                scope.getElementDimensions,
                function (newValue, oldValue) {
                    if (newValue.ht > 40) {
                        scope.showMoreButton = true;
                    }
                },
                true
            );

            element.bind('load', function () {
                scope.$apply();
            });
        }

<button class="btn-text-expand" ng-click="show = true" ng-show="showMoreButton">Show text</button>

RegExp/[A-Za-z]/.testlast永远不会工作：使用/[A-Za-z]/.testlast或新的RegExp'[A-Za-z]'.testlast。同时添加全局标志/../g或新的RegExp“…”，“g”