带有html标签的Javascript子字符串

Question

我在同一主题上搜索过多，但对于我正在寻找的内容并不完美。

我有一个字符串：

var string ='<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>'

现在我想要的是用javascript子串函数对其进行子串，但不希望在中间切割标签，例如

<strong><span>Hii </span> <p

应该是这样的

<strong><span>Hii </span> <p>

我在用

string.substr(0,200)

string是带有html标记的动态变量

Answer 1

我的解决方案

function smart_substr(str, len) {
    var temp = str.substr(0, len);
    if(temp.lastIndexOf('<') > temp.lastIndexOf('>')) {
        temp = str.substr(0, 1 + str.indexOf('>', temp.lastIndexOf('<')));
    }
    return temp;
}

http://jsfiddle.net/8t6fs67n/

Answer 2

它不优雅，但它的工作原理，将增加字符包括下一个结束标签https://jsfiddle.net/q680vors/

只需将长度更改为所需的字符数即可。

var string ='<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>';

var length = 2;
var openTag = 0, closeTag = 0,i=0;
for(i; i<length; i++)
{
    if(string[i] == "<")
        openTag++;
    if(string[i] == ">")
        closeTag++;
}
if(openTag > closeTag)
{
    while(string[i] != ">")
        i++;
}

var newString = string.substring(0,(i+1));

alert(newString);

Answer 3

我没有理由这样做，但理论上是这样的：

function substrWithTags(str, len) {
    var result = str.substr(0, len),
        lastOpening = result.lastIndexOf('<'),
        lastClosing = result.lastIndexOf('>');

    if (lastOpening !== -1 && (lastClosing === -1 || lastClosing < lastOpening)) {
        result += str.substring(len, str.indexOf('>', len) + 1);
    }

    return result;
}

var s = '<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>'

// <strong><span>Hii </span> <p>this is just a demo <spa
s.substr(0, 53);

// <strong><span>Hii </span> <p>this is just a demo <span>
substrWithTags(s, 53);

Answer 4

如果我理解正确，你想做这样的事情吗？

var limit = 28;
var test = '';
var string = '<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>';

    do {
          test = string.substring(0,limit); 
          limit++;
    } while(test.charAt(test.length-1) !== '>');


test will be equal to '<strong><span>Hii </span> <p>'

或以任何其他结束标记结束，超过您的限制

Answer 5

好吧，我做了一个功能 ：

function my_substring (str) {
    var answer = [], x;
    for (var i=0, l=str.length; i<l; i++) {
        x = i;
        if (str[i] == '<') {
            while (str[++i] != '>');
            answer.push( str.substring(x, i+1) );
        }
        else {
            while (++i < l && str[i] != '<');
            answer.push( str.substring(x, i) );
            i--;
        }
    }
    return answer;
}

var string = 
"<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>"

console.log ( my_substring(string) );

---

此代码将输出：

["<strong>", 
 "<span>", 
 "Hii ", 
 "</span>", 
 " ", 
 "<p>", 
 "this is just a demo ", 
 "<span>", 
 "string", 
 "<span>", 
 "</p>", 
 "</strong>"
]

然后，您可以在阵列中选择所需内容。 希望能帮助到你。