用js计算字符串中<span>的字符数答案

【问题标题】：Count number of characters to <span> in string with js用js计算字符串中<span>的字符数
【发布时间】：2017-10-03 14:35:48
【问题描述】：

我希望能够获得最多每个[class^="something-"]的字符数

这是一个文本块的示例。

<div class="intro">
    Lorem dolor sit<br>
    <span class="icon-pin"></span> consectetur<br>
    adiposcing elit, sed do <span class="icon-hand"></span> lorem<br>
    ipsum dolor sit amet.
</div>

这是我到目前为止将内容转换为一种格式以便我可以计算字符数（减去特定标记、换行符和大于 1 个空格的空白）

$('[class^="icon-"]', '.intro-title').each(function(index, element){

    var textToIcon = $.trim(
                    $('.intro')
                        .html() // Get HTML code
                        .replace(/[<]p[^>]*[>]/gi, '') // Remove <p> tags
                        .replace(/[<]br[^>]*[>]/gi, '') // Remove <br> tags
                        .replace('&nbsp;', '') // Remove `&nbsp`
                        .replace(/\n+/g, '') // Remove line breaks
                        .replace(/  +/g, ' ') // Remove whitespace larger than one space
                        .replace('&nbsp;', '') // Remove `&nbsp`
                );
});

上面的JS会输出：

Lorem dolor sit <span class="icon-pin"></span> consectetur adiposcing elit, sed do <span class="icon-hand"></span lorem ipsum dolor sit amet.

我想知道获取字符数的最佳方法，直到每个span 标记包含一个从字符串开头带有icon- 的类。

例如，直到第一个 [class^="icon-"] 之前的字符数为 16 Lorem dolor sit

谢谢

【问题讨论】：

查看String.prototype.indexOf()，如果仍有问题，请使用您的代码更新您的问题。

标签： javascript jquery substring substr

【解决方案1】：

您可以使用现有的 HTML 和 JavaScript 代码来执行此操作，如下所示：

    var spansOnly = "Lorem dolor sit <span class=\"icon-pin\"></span> consectetur adiposcing elit, sed do <span class=\"icon-hand\"></span lorem ipsum dolor sit amet.";
    var reg = /<span[^<]* class=\"[^"]+[^>]*><\/span>/g;
    var textRuns = spansOnly.split(reg);
    var $body = $("body");
    for(var i = 0; i < textRuns.length; i++) {
       $body.append($("<div>" + textRuns[i].length + ": " + textRuns[i] + "</div>"));
    }

这是JS fiddle。

【讨论】：

【解决方案2】：

如果可以将文本的每个部分都包装在一个跨度中，那么这将更容易完成：

var element = $('.intro span:first-child').text();
console.log(element.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="intro">
  <span>Lorem dolor sit</span><br>
  <span class="icon-pin"></span> consectetur<br> adiposcing elit, sed do <span class="icon-hand"></span> lorem<br> ipsum dolor sit amet.
</div>

【讨论】：