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

Question

我希望能够得到最多每个[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 space 的白色 space）

$('[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 标签包含 class 和 icon- 从字符串的开头。

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

谢谢

Answer 1

如果可以将文本的每个部分都包裹在一个跨度中，则可以更容易地完成此操作：

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>

Answer 2

您可以使用现有的 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。

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

Count number of characters to <span> in string with js

javascript

jquery

substring

substr