多读/少读而不剥离JavaScript中的Html标记

我想实现readmore/less功能。i、 我将有html内容，我将显示该内容的前几个字符，前面将有一个阅读更多的链接。我目前正在使用此代码：

    var txtToHide= input.substring(length);
    var textToShow= input.substring(0, length);
    var html = textToShow+ '<span class="readmore">&nbsp;&hellip;&nbsp;</span>' 
+ ('<span class="readmore">' + txtToHide+ '</span>');
    html = html + '<a id="read-more" title="More" href="#">More</a>';

var txtToHide=input.substring（长度）；
var textToShow=input.substring（0，长度）；
var html=textToShow+'&hellip；'
+（“”+txtToHide+“”）；
html=html+“”；

上面的输入是输入字符串，长度是最初显示的字符串长度。 这段代码有一个问题，假设我想从这个字符串中去掉20个字符：

“Hello output”

，html标记介于两者之间，如果将页面部分剥离，则会弄乱页面。这里我想要的是，如果html标记在这个范围内，它应该覆盖整个标记，即我需要这里的输出是

“Hello”

。如何执行此操作编辑： 对不起，我没有把这个问题读得足够好。 不过，这应该是可行的：

<div id="test">
This <a href="http://www.google.com">links to google</a> 
<strong>and</strong> some random text to make it a little bit longer!
</div>

<script type="text/javascript"> 
$(document).ready(function() {
   var max_length = 21;
   var text_to_display = "";
   var index = 0;
   var full_contents = $("#test").contents();

   // loop through contents, stop after maxlength is reached
   $("#test").contents().each(function(i) {
        if ($(this).text().length + text_to_display.length < max_length) {
            text_to_display += $(this).text();
            index++;
        } else {
            return false;
        }
    });

   // second loop removes unwanted content
   $("#test").contents().each(function(i) {
        if (i > index) {
            $(this).remove();
        }
        return true;
   });

   // add link to show the full text
   $('<a href="#">read more...</a>').click(
    function(){
        $("#test").html($(full_contents));
        $(this).hide(); 
    }).insertAfter($("#test"));
 });
</script> 

这
和一些随机文本，使其稍微长一点！
$（文档）.ready（函数（）{
var max_length=21；
var text_to_display=“”；
var指数=0；
var full#u contents=$（“#测试”）.contents（）；
//循环浏览内容，达到maxlength后停止
$（“#测试”）.contents（）.每个（函数（i）{
if（$（this）.text（）.length+text\u to\u display.length索引）{
$（this.remove（）；
}
返回true；
});
//添加链接以显示全文
$（“”）。单击(
函数（）{
$（“#测试”）.html（$（完整内容））；
$（this.hide（）；
}).insertAfter（$（“#测试”）；
});

使用jQuery可以很容易地实现这一点

<div id="test">This <a href="http://www.google.com">is a link to google</a></div>

<script type="text/javascript"> 
$(document).ready(function() {
   alert($("#test").text());
 });
</script> 

这个
$（文档）.ready（函数（）{
警报（$（“#测试”）.text（）；
});

---

祝你好运

为什么不隐藏内容的隐藏部分，而不是稍后添加？我通常只对隐藏内容使用

display:none

，并在单击“阅读更多”时将其设置为

display:block

。

您说过html标记将成为一个问题，那么为什么不在字符串转换中删除并替换为纯文本，然后在“显示更多”菜单上单击，切换纯html+html

$(document).ready(function(){
    var Contents = $('#post p'); //Object

    var Plain = Contents.text(); //truncate this

    //Hide the texts to Contents
    Contents.hide();

    var PlainContainer = $("<div>").addClass("Plain_Container").val(Plain)

    //Add PlainContainer div after
    Contents.append(PlainContainer);


    var $('.show_hide').click(function(){
        $(Plain_Container).remove(); //Delete it

        Contents.Show(); //Show the orginal

        $(this).remove(); //Remove the link

        return false; //e.PreventDefault() :)
    });
});

$（文档）.ready（函数（）{
var Contents=$（'#post p'）；//对象
var Plain=Contents.text（）；//截断此
//将文本隐藏到内容中
Contents.hide（）；
var PlainContainer=$（“”）.addClass（“Plain_Container”）.val（Plain）
//将PlainContainer div添加到
Contents.append（普通容器）；
var$（'.show_hide'）。单击（函数（）{
$（普通容器）.remove（）；//删除它
Contents.Show（）；//显示原始
$（this）.remove（）；//删除链接
返回false；//e.PreventDefault（）：）
});
});

使用

text（）

函数将html标记转换为这些值，并删除标记本身，您只需切换它们：）

---

注：以上代码不保证工作，仅作为示例提供。

相关：Hi Marcel，我需要输出为“Hello”而不是“Hello test”。我不想剥离html标记。是的，但是您仍然需要知道起始标记伴随着哪个结束标记，当嵌套元素出现时，这可能会出现问题，例如，

test

我不想剥离它。我只想把它包括在内。OPs问题源于缺乏SoC——让标记成为标记，并用CSS/JS适当地处理行为。FWIW我将切换一个

已删除的

类，而不是直接应用样式。我需要在可见文本中包含锚定标记。@annakata，当然，

显示：none

必须进入类，你是对的。洛奇，这不是问题。我认为你在盲目地关注一个其实并不难解决的问题。我需要在可见文本中包含锚定标记。我不希望它显示为纯文本。