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

好吧，我做了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>"
]

然后您可以在数组中选择所需内容。希望它有所帮助。

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;

}

带有html标签的Javascript子字符串

6 个答案: