Javascript 个带有 html 个标签的子串

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)

字符串是带有 html 标签的动态变量

Answer 1

它不优雅但有效，将增加字符以包含下一个结束标记 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 2

我看不出这样做的理由，但理论上是这样的：

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 3

如果我没理解错的话，你想做这样的事情吗？

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 4

我的解决方案：

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 5

嗯，我做到了 a function:

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>"
]

然后你可以select数组中你想要的东西。希望对你有帮助。

Answer 6

我认为我的函数在对内容语法更敏感方面更准确。例如，如果您的子字符串长度将一个单词减半，则该单词将被完整包含。

function HTML_substring(string, length) {

    var noHTML = string.replace(/<[^>]*>?/gm, ' ').replace(/\s+/g, ' ');
    var subStringNoHTML = noHTML.substr(0, noHTML.indexOf(" ", length));
    var words = subStringNoHTML.split(" ");

    var outPutString = "";
    var wordIndexes = [];

    words.forEach((word, key) => {

        if (key == 0) {

            outPutString += string.substr(0, string.indexOf(word) + word.length);
            wordIndexes[key] = string.indexOf(word) + word.length;

        } else {

            let i = wordIndexes[key - 1];

            outPutString += string.substring(i, string.indexOf(word, i) + word.length);
            wordIndexes[key] = string.indexOf(word, i) + word.length;

        }
    });

    return outPutString;

}

Javascript 个带有 html 个标签的子串

Javascript substring with html tags

javascript

substring