Question

假设我有一个文字：

<p> hello world! </p>

我正在使用一个在5个单词后剪切文字的功能并添加“...显示更多”

我希望结果如下：

你好......显示更多

由于标签，我得到的是此输出：

你好......显示更多

我在检查元素时看到的是：

<p> hello </p> ...show more

我必须提到文字可以是或不是。

有没有办法解决这个问题？有没有办法在标签内插入添加的文字？我需要提一下，我需要标签，我不能使用条带标签功能。

谢谢，暗

Answer 1

你是说这个吗？

var text = "<p>hello world</p>";
var res = "<p>" + text.substring(3, 8) + " ...show more</p>";

结果是：

<p>hello ...show more</p>

Answer 2

我看到它的方式，你有两个选择：

.split()字符串按空格（假设空格分隔单词）然后切片第一个（最多）5个元素。如果大于5个元素，请添加“...阅读更多”;如果没有，这是不必要的。
您可以使用一些正则表达式替换和（使用否定前瞻）忽略前5个单词，但用“... read more”替换所有其他文本。 （我个人认为这个有更多开销，但您可以使用(?!(?:[^\b]+?[\b\s]+?){5})(.*)$作为模式）

话虽如此，这就是我对字符串拆分的意思：

function readMore(el){
    var ary = el.innerHTML.split(' ');
    el.innerHTML = (ary.length > 5 ? ary.slice(0,5).join(' ') + '... read more' : ary.join(' '));
}

var p = document.getElementById('foo');
readMore(p);

当然，为了本演示的目的，假设Hello, world! How are you today?（这将导致Hello, world! How are you...read more）

Answer 3

$('p').text($('p').text().replace('world!', '... show more'));

Html - 将html插入<p> </p>标签

3 个答案: