dolor sit ame'/> dolor sit ame'/> 在Javascript中使用HTML标记的子字符串文本 | 所有编程讨论 | zhouni.net

问题 在Javascript中使用HTML标记的子字符串文本


你有解决方案在Javascript中使用HTML标签子串文本吗?

例如:

var str = 'Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, consectetur adipiscing elit.'

html_substr(str, 20)
// return Lorem ipsum <a href="#">dolor <strong>si</strong></a>

html_substr(str, 30)
// return Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, co

10372
2018-05-14 16:43


起源

您似乎希望子字符串忽略标记,但在最终结果中保持它们完好无损。我认为你需要将字符串转换为DOM元素,遍历元素,计算文本节点中的字符,并删除超过计数的所有字符(或文本节点)。即便如此,我还是觉得浏览器之间在空白方面可能存在一些差异。不过不确定。 - user113716
发表了答案。似乎给出了你想要的结果,但是在浏览器之间可能会有一些关于空格的变化。不确定。 - user113716
子串html代码没有像[this] [1]那样打破html。 [1]: stackoverflow.com/questions/6118904/... - imxylz


答案:


考虑到这一点 用正则表达式解析html是个坏主意,这是一个解决方案,只做:)

编辑:只是要清楚:这不是一个有效的解决方案,它是一个练习,对输入字符串作出非常宽松的假设,因此应该采取一些盐。阅读上面的链接,看看为什么永远不能用正则表达式解析html。

function htmlSubstring(s, n) {
    var m, r = /<([^>\s]*)[^>]*>/g,
        stack = [],
        lasti = 0,
        result = '';

    //for each tag, while we don't have enough characters
    while ((m = r.exec(s)) && n) {
        //get the text substring between the last tag and this one
        var temp = s.substring(lasti, m.index).substr(0, n);
        //append to the result and count the number of characters added
        result += temp;
        n -= temp.length;
        lasti = r.lastIndex;

        if (n) {
            result += m[0];
            if (m[1].indexOf('/') === 0) {
                //if this is a closing tag, than pop the stack (does not account for bad html)
                stack.pop();
            } else if (m[1].lastIndexOf('/') !== m[1].length - 1) {
                //if this is not a self closing tag than push it in the stack
                stack.push(m[1]);
            }
        }
    }

    //add the remainder of the string, if needed (there are no more tags in here)
    result += s.substr(lasti, n);

    //fix the unclosed tags
    while (stack.length) {
        result += '</' + stack.pop() + '>';
    }

    return result;

}

例:  http://jsfiddle.net/danmana/5mNNU/

注意: 帕特里克dw的解决方案 关于糟糕的HTML可能更安全,但我不确定它处理空白的好坏。


7
2018-05-14 19:21



<img src='blah' title='Yes/No' alt='>>' /> 不要用正则表达式解析html - 对于你拥有的每个正则表达式,可以找到html来打破它。 - Zirak
@Zirak:我知道:)你真的读过我发布的第一句中的第一个链接吗? :)还读了我的最后一句:P我知道这不是正确的解决方案,但我认为这对我来说是一个有趣的练习,如果我还是这样做,那么为什么不发布它。 - Dan Manastireanu
所以你知道它很糟糕,但你建议吗?我的例子不是无效或坏的HTML。这完全有效。针对验证器运行它,它不会发出噪音。什么是有效的是你的正则表达式,因为它无法匹配所有有效的htmls。 - Zirak
@Zirak:我从来没有说过这是一个有效的解决方案,当然正则表达式无效,它从来就没有意义。这只是一个练习,对输入字符串做了一些疯狂的假设...我将编辑帖子并使其更清晰 - Dan Manastireanu


用法:

var str = 'Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, consectetur adipiscing elit.';

var res1 = html_substr( str, 20 );
var res2 = html_substr( str, 30 );

alert( res1 ); // Lorem ipsum <a href="#">dolor <strong>si</strong></a>
alert( res2 ); // Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, co

例:  http://jsfiddle.net/2ULbK/4/


功能:

function html_substr( str, count ) {

    var div = document.createElement('div');
    div.innerHTML = str;

    walk( div, track );

    function track( el ) {
        if( count > 0 ) {
            var len = el.data.length;
            count -= len;
            if( count <= 0 ) {
                el.data = el.substringData( 0, el.data.length + count );
            }
        } else {
            el.data = '';
        }
    }

    function walk( el, fn ) {
        var node = el.firstChild;
        do {
            if( node.nodeType === 3 ) {
                fn(node);
                    //          Added this >>------------------------------------<<
            } else if( node.nodeType === 1 && node.childNodes && node.childNodes[0] ) {
                walk( node, fn );
            }
        } while( node = node.nextSibling );
    }
    return div.innerHTML;
}

5
2018-05-14 17:48



我不认为只是回归 div.innerHTML 足够。考虑如果切割点后面有更多标签会发生什么。他们最终会在最后的字符串中结束,但是空洞......我想这一次 count<=0 你应该删除剩余的元素,而不是设置 data = '' - Dan Manastireanu
@Dan:是的,那是真的。我不确定哪个OP想要。可能是潜在的空标签应该作为DOM结构的一部分留在原地。但是你是对的,如果不是这样,那你就做了 el.parentNode.removeChild(el) 代替。编辑:实际上这会搞砸DOM走路。 - user113716
@patrick dw:这是一个 更新了jsFiddle 删除剩余的节点 - Dan Manastireanu
@Dan:看起来不错! - user113716
谢啦。这个解决方案很棒。但是非配对标签存在一些问题(img,hr,...)。效果很好! - honzahommer


它是单个标签的解决方案

function subStrWithoutBreakingTags(str, start, length) {
    var countTags = 0;
    var returnString = "";
    var writeLetters = 0;
    while (!((writeLetters >= length) && (countTags == 0))) {
        var letter = str.charAt(start + writeLetters);
        if (letter == "<") {
            countTags++;
        }
        if (letter == ">") {
            countTags--;
        }
        returnString += letter;
        writeLetters++;
    }
    return returnString;
}

5
2017-11-07 10:58





Javascript有一个子字符串方法。如果字符串包含html,则没有区别。

看到 http://www.w3schools.com/jsref/jsref_substr.asp


-1
2018-05-14 16:51



是的我知道。但我的问题是,当我使用substr时,html标签可能会被破坏。 - honzahommer
在这种情况下,您可以查看类似递归正则表达式的内容来平衡html标记。但实施起来会非常复杂。 - herostwist


使用类似的东西 = str.replace(/<[^>]*>?/gi, '').substr(0, 20);
我在以下位置创建了一个示例: http://fiddle.jshell.net/xpW9j/1/


-1
2018-05-14 17:23



这不符合OP的要求。在示例结果中,标记得以维护。 - user113716