带有 javascript 的子字符串文本，包括 html 标签答案

【问题标题】：Substring text with javascript including html tags带有 javascript 的子字符串文本，包括 html 标签
【发布时间】：2013-05-31 12:08:48
【问题描述】：

我想对一个字符串进行子串化，例如 follow。我有字符串的起始位置和长度。我已经检查了这个问题Substring text with HTML tags in Javascript。但是在这个子字符串中从 0 开始执行，但我有一个随机的起始位置。关于如何完成的任何想法

var str = 'Lorem ipsum <p>dolor <strong>sit</strong> amet</p>, consectetur adipiscing elit.'

【问题讨论】：

@Alex 我想要子字符串及其父 html 标签。
jsfiddle.net/danmana/5mNNU 检查这个小提琴，这一切都完成了。但它通过假设起始位置 0 来工作。但就我而言，我有一个随机的起始位置。

标签： javascript

【解决方案1】：

这里是DEMO

function html_substr( str, start ,count ) {

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

    walk( div, track );

    function track( el ) {
        if( count > 0 ) {
            var len = el.data.length;
            if(start<=len){
                el.data = el.substringData(start,len);
                start=0;
            } else{
                start-=len;
                el.data = '';
            }
            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);
            } else if( node.nodeType === 1 && node.childNodes && node.childNodes[0] ) {
                walk( node, fn );
            }
        } while( node = node.nextSibling );
    }
    return div.innerHTML;
}

称之为

html_substr( str,13, 2 );

【讨论】：

我已经对此进行了彻底的测试，并且每次都有效。带有嵌套标签和简单标签，以及未闭合标签。为了帮助理解 rahul 在这里提供的答案，我将在演示中显示三个示例的输出以及基本的 substr 输出 1) substr : p> ; html_substr :
ol
---------- 2) substr : orem ipsum
dolor ; html_substr : orem ipsum

dolor sit
------------- 3) substr : rem ipsum
dolor sit ; html_substr : rem ipsum
dolor sit amet
，缺点

【解决方案2】：

这是一种用于执行此类操作的本地 DOM API 方法。浏览器已经内置了强大的 HTML 解析能力。无需重新发明轮子

var el = document.createElement("div");
el.innerHTML = 'Lorem ipsum <p>dolor <strong>sit</strong> amet</p>, consectetur adipiscing elit.';
el.getElementsByTagName("p").textContent;

Working demo

结果只是一个非 html 字符串，您可以使用 .substring 轻松操作它

那么，这是如何工作的？

我们将 HTML 转储到 HTML 元素中。

然后我们使用 DOM API 说如下：

“在我们刚刚给你的 HTML 中，找到所有 p 标签，取第一个（即 [0]），然后给我们它的 textContent”。

【讨论】：